/* Chappa Facturare — the application (standalone, embedded, portal).
   Needs base.css. Panels are flat paper with a hairline; only documents,
   dialogs, menus and toasts cast a shadow. */

html { scroll-padding-top: 1rem; }
body.app-body { font-size: .9375rem; line-height: 1.45; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono, .code { font-family: var(--mono); font-size: .875em; }
.muted { color: var(--ink-3); }
.text-2 { color: var(--ink-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: calc(1.25rem * var(--dens, 1)); align-content: start; }
.stack.tight { gap: .6rem; }
.mt1 { margin-top: .6rem; } .mt2 { margin-top: 1.2rem; } .mb0 { margin-bottom: 0; } .mb1 { margin-bottom: .6rem; }
.w100 { width: 100%; }

/* ─── Shell ────────────────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100vh;
  height: 100dvh;
  padding: 1rem .8rem 1rem;
  border-right: 1px solid var(--rule);
  background: var(--desk);
  overflow-y: auto;
  z-index: 30;
}
.side > .brand { padding: .35rem .5rem .5rem; }
.ent-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .1rem .5rem;
  width: 100%;
  padding: calc(0.55rem * var(--dens, 1)) .65rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-ctl, var(--r-2));
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-1);
}
.ent-btn:hover { border-color: var(--ink-3); }
.ent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-code { grid-column: 1; color: var(--ink-3); font-size: .8125rem; }
.ent-btn .i { grid-row: 1 / 3; grid-column: 2; color: var(--ink-3); }

.side-nav { position: relative; display: grid; gap: 1px; }
.nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.5rem * var(--dens, 1)) .65rem;
  border-radius: var(--r-ctl, var(--r-2));
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-1);
}
.nav-item:hover { color: var(--ink); }
.nav-item.on { color: var(--ink); font-weight: 600; }
.nav-count { font-size: .8125rem; color: var(--ink-3); font-weight: 500; }
.nav-count.hot { color: var(--bad); font-weight: 600; }
.nav-ind {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--h, 2.3rem);
  border-radius: var(--r-ctl, var(--r-2));
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  transform: translateY(var(--y, 0));
  transition: transform var(--t-3) var(--spring), height var(--t-2) var(--ease-out), opacity var(--t-2);
  pointer-events: none;
}
.side .btn.new-doc { width: 100%; }
.side-sep { height: 1px; background: var(--rule); margin: .2rem .4rem; }
.side-links a { display: block; padding: .35rem .65rem; color: var(--ink-3); font-size: .875rem; text-decoration: none; border-radius: var(--r-2); }
.side-links a:hover { color: var(--ink); background: var(--desk-2); }
.side-foot { margin-top: auto; display: grid; gap: .55rem; padding: .7rem .5rem 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.side-foot .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .mail { color: var(--ink-3); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -.45rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: none; }
.view { width: 100%; max-width: 76rem; padding: 1.6rem clamp(1rem, 3vw, 2.2rem) 4rem; view-transition-name: view; }
.boot { display: grid; min-height: 100vh; place-items: center; color: var(--ink-3); }

.scrim { position: fixed; inset: 0; z-index: 25; background: rgb(15 18 17 / .35); opacity: 0; pointer-events: none; transition: opacity var(--t-3); }
.scrim.on { opacity: 1; pointer-events: auto; }

@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(18rem, 86vw); transform: translateX(-102%); transition: transform var(--t-3) var(--ease-out); box-shadow: var(--shadow-lift); }
  .side.open { transform: none; }
  .top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    background: var(--desk);
    border-bottom: 1px solid var(--rule);
  }
  .top .brand { margin-right: auto; }
  .top .logo { height: 1.8rem; }
  .view { padding-top: 1.1rem; }
}

/* Embedded: one bar on top, tabs under it, no sidebar. */
.shell.embed { display: block; min-height: 0; }
.embed-bar { display: flex; align-items: center; gap: .6rem; padding: calc(0.6rem * var(--dens, 1)) clamp(.8rem, 2vw, 1.2rem); background: var(--paper); border-bottom: 1px solid var(--rule); }
.embed-bar .ent-btn { width: auto; max-width: 22rem; }
.tabs-bar { position: relative; display: flex; gap: .2rem; padding: 0 clamp(.8rem, 2vw, 1.2rem); background: var(--paper); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs-bar::-webkit-scrollbar { display: none; }
.tabs-bar a { padding: calc(0.65rem * var(--dens, 1)) .55rem; color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs-bar a.on { color: var(--ink); font-weight: 600; }
.tab-ind { position: absolute; bottom: 0; left: 0; height: 2px; width: var(--w, 0); background: var(--ink); transform: translateX(var(--x, 0)); transition: transform var(--t-3) var(--spring), width var(--t-3) var(--spring); }
.embed .view { padding: calc(1.1rem * var(--dens, 1)) clamp(.8rem, 2vw, 1.2rem) 1.5rem; max-width: none; }
.embed-foot { padding: .5rem 1rem 1rem; text-align: center; color: var(--ink-3); font-size: .75rem; }
/* Embedded with a side panel (look: layout.nav = "side"; tabs again below 720 px). */
.shell.embed.with-side { display: grid; grid-template-columns: 14rem minmax(0, 1fr); align-items: stretch; }
.shell.embed.with-side > .ribbon, .shell.embed.with-side > .embed-foot { grid-column: 1 / -1; }
.eside { display: flex; flex-direction: column; gap: .9rem; min-width: 0; padding: calc(1rem * var(--dens, 1)) .75rem; border-right: 1px solid var(--rule); background: var(--desk); }
.eside .ent-btn, .eside .new-doc { width: 100%; }
.eside > .logo-pair { padding: .2rem .4rem .1rem; }
/* The embedding page's logo; the night one shows when the frame is dark. */
.logo-pair { display: inline-flex; flex: none; align-items: center; }
.host-logo { display: block; width: auto; max-width: 12rem; object-fit: contain; }
.host-logo.n { display: none; }
:root[data-theme="dark"] .logo-pair:has(.n) .host-logo.d { display: none; }
:root[data-theme="dark"] .host-logo.n { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-pair:has(.n) .host-logo.d { display: none; }
  :root:not([data-theme="light"]) .host-logo.n { display: block; }
}

/* The look editor's preview scrolls inside its phone and tablet screens. */
html.demo { scrollbar-width: thin; }

/* A new look (js/look.js applyLook): the frame fades to it; a new mode
   sweeps in, night from the top and day from the bottom, with a soft edge. */
html.look-fade .view, html.look-dusk .view, html.look-dawn .view { view-transition-name: none; }
html.look-fade::view-transition-old(root), html.look-dusk::view-transition-old(root), html.look-dawn::view-transition-old(root) { animation: none; }
html.look-fade::view-transition-new(root) { animation: look-fade 240ms ease both; }
html.look-dusk::view-transition-new(root), html.look-dawn::view-transition-new(root) {
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html.look-dusk::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 60%);
  animation: look-dusk 680ms var(--ease-out) both;
}
html.look-dawn::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 60%);
  mask-image: linear-gradient(to top, #000 50%, transparent 60%);
  animation: look-dawn 680ms var(--ease-out) both;
}
@keyframes look-fade { from { opacity: 0; } }
@keyframes look-dusk { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes look-dawn { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }

.ribbon { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .5rem 1rem; background: var(--warn-wash); color: var(--warn); font-size: .8125rem; }
.ribbon b { color: var(--ink); }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(view) { animation: vt-out 110ms ease-in both; }
::view-transition-new(view) { animation: vt-in 260ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* A thin line on top while a slow screen loads (paused when hidden). */
.top-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--t-2); }
.top-progress.on { opacity: 1; }
.top-progress::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--tus); animation: loading 1s var(--ease) infinite; }
.top-progress:not(.on)::after { animation: none; }
.stale { opacity: .55; transition: opacity var(--t-2); }

/* ─── Page parts ───────────────────────────────────────────────────────── */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.4rem; }
.page-head h1 { font-size: clamp(1.4rem, 1vw + 1.1rem, 1.75rem); font-stretch: 92%; letter-spacing: -.016em; }
.page-head .sub { margin-top: .3rem; color: var(--ink-2); }
.page-head .over { margin-bottom: .25rem; font-size: .875rem; color: var(--ink-3); }
.page-head .over a { color: var(--ink-2); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: .6rem; min-height: calc(3rem * (1 + (var(--dens, 1) - 1) / 2)); padding: calc(0.55rem * var(--dens, 1)) 1rem; border-bottom: 1px solid var(--rule); }
.panel-head h2 { flex: 1; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.panel-body { padding: calc(1rem * var(--dens, 1)); }
.panel > .t-wrap:last-child { border-radius: 0 0 var(--r-2) var(--r-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.25rem * var(--dens, 1)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.25rem * var(--dens, 1)); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.section-title { margin: 0 0 .6rem; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.empty { padding: 2.2rem 1.2rem; text-align: center; color: var(--ink-2); }
.empty h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: .35rem; }
.empty p { margin: 0 auto 1rem; max-width: 30rem; }

.loading { position: relative; height: 2px; margin: 1.2rem 0; overflow: hidden; background: var(--rule); border-radius: 2px; }
.loading-bar { position: absolute; inset: 0; width: 35%; background: var(--ink-3); border-radius: 2px; animation: loading 1.1s var(--ease) infinite; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* Notices: a tinted block with a glyph, never a coloured stripe. */
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-2); background: var(--paper-2); color: var(--ink-2); }
.notice > .i { margin-top: .15rem; color: var(--ink-3); }
.notice .body { flex: 1; min-width: 0; }
.notice .body b { display: block; color: var(--ink); margin-bottom: .1rem; }
.notice .act { flex: none; align-self: center; }
.notice.ok { background: var(--ok-wash); } .notice.ok > .i { color: var(--ok); }
.notice.warn { background: var(--warn-wash); } .notice.warn > .i { color: var(--warn); }
.notice.bad { background: var(--bad-wash); } .notice.bad > .i { color: var(--bad); }
.notice.info { background: var(--tus-wash); } .notice.info > .i { color: var(--tus); }
.errors-list { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .875rem; }
.errors-list li + li { margin-top: .2rem; }

.flash { animation: flash 1.1s var(--ease-out); }
@keyframes flash { from { background-color: var(--tus-wash); } }

/* ─── Tables ───────────────────────────────────────────────────────────── */

.t-wrap { overflow-x: auto; }
.t { font-size: .9rem; }
.t th { padding: calc(0.55rem * var(--dens, 1)) .8rem; border-bottom: 1px solid var(--rule); color: var(--ink-3); font-size: .8125rem; font-weight: 550; text-align: left; white-space: nowrap; }
.t td { padding: calc(0.6rem * var(--dens, 1)) .8rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tr.click { cursor: pointer; transition: background-color var(--t-1); }
.t tr.click:hover { background: var(--paper-2); }
.t tr.click:focus-visible { outline-offset: -2px; }
.t .num, .t th.num { text-align: right; }
.t th:first-child, .t td:first-child { padding-left: 1rem; }
.t th:last-child, .t td:last-child { padding-right: 1rem; }
.cell-main { font-weight: 550; color: var(--ink); }
.t td:first-child .cell-main { white-space: nowrap; }
.cell-sub { margin-top: .1rem; color: var(--ink-3); font-size: .8125rem; }
.cell-bad { color: var(--bad); font-weight: 600; }
.t .right { text-align: right; white-space: nowrap; }
.t .right .btn + .btn { margin-left: .35rem; }
.t-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .875rem; }
@media (max-width: 700px) { .t .hide-sm { display: none; } }

/* ─── Filters, segmented controls, tabs ────────────────────────────────── */

.filters { display: grid; gap: .8rem; margin-bottom: 1rem; }
.filters .row { gap: .6rem .8rem; }
.search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.search .i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { padding-left: 2.2rem; }
.range { display: flex; align-items: center; gap: .4rem; color: var(--ink-3); font-size: .875rem; }
.range input { width: auto; }
.filter-label { color: var(--ink-3); font-size: .8125rem; min-width: 4.5rem; }

.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: calc(var(--r-ctl, var(--r-2)) + 2px);
  background: var(--desk-2);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative;
  z-index: 1;
  padding: .32rem .7rem;
  border: 0;
  border-radius: var(--r-ctl, var(--r-2));
  background: none;
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-1);
}
.seg button:hover { color: var(--ink); }
.seg button > .i { display: block; width: 1.05rem; height: 1.05rem; }
.seg button.on { color: var(--ink); font-weight: 600; }
.seg button[disabled] { cursor: not-allowed; opacity: .55; }
.seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--w, 0);
  border-radius: var(--r-ctl, var(--r-2));
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(20 23 22 / .1), inset 0 0 0 1px var(--rule);
  transform: translateX(var(--x, 0));
  transition: transform var(--t-3) var(--spring), width var(--t-3) var(--spring);
}

.tabs { position: relative; display: flex; gap: .25rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { padding: .55rem .6rem; border: 0; background: none; color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .on { color: var(--ink); font-weight: 600; }

/* ─── Forms ────────────────────────────────────────────────────────────── */

.field { display: grid; gap: .3rem; min-width: 0; }
.field > label { font-size: .8125rem; font-weight: 550; color: var(--ink-2); }
.help { font-size: .8125rem; color: var(--ink-3); }
.help.bad { color: var(--bad); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; align-items: start; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.check { display: inline-flex; align-items: flex-start; gap: .55rem; cursor: pointer; line-height: 1.35; }
.check input { margin-top: .12rem; }
.copy-box { display: flex; gap: .5rem; }
.copy-box input { font-family: var(--mono); font-size: .8125rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--r-ctl, var(--r-2)); background: none; color: var(--ink-2); cursor: pointer; transition: background-color var(--t-1), color var(--t-1); }
.icon-btn:hover { background: var(--desk-2); color: var(--ink); }
.icon-btn[disabled] { opacity: .35; cursor: default; background: none; }


.autocomplete { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 15; max-height: 18rem; overflow-y: auto; padding: .3rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-lift); }
/* In the top layer (views/common.js suggestList): placed by script, never clipped. */
.ac-list[popover] { position: fixed; inset: auto; right: auto; margin: 0; color: var(--ink); overflow-y: auto; }
.ac-list button { display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: var(--r-1); background: none; text-align: left; cursor: pointer; }
.ac-list button:hover, .ac-list button.on { background: var(--tus-wash); }
.ac-list .sub { color: var(--ink-3); font-size: .8125rem; }
.ac-list .ac-group { padding: .55rem .6rem .25rem; font-size: .75rem; color: var(--ink-3); }
.ac-list .ac-group:not(:first-child) { margin-top: .2rem; border-top: 1px solid var(--rule); }

/* ─── Dialogs, menus, toasts ───────────────────────────────────────────── */

dialog.modal { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: min(34rem, calc(100vw - 1.5rem)); width: 100%; max-height: calc(100dvh - 2rem); overflow: visible; }
dialog.modal.wide { max-width: min(48rem, calc(100vw - 1.5rem)); }
dialog.modal.full { max-width: min(64rem, calc(100vw - 1.5rem)); }
dialog.modal::backdrop { background: rgb(15 18 17 / .42); animation: backdrop-in var(--t-3) var(--ease-out); }
dialog.modal.closing::backdrop { opacity: 0; transition: opacity 140ms; }
@keyframes backdrop-in { from { opacity: 0; } }
.modal-box { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); background: var(--paper); border-radius: var(--r-3); box-shadow: var(--shadow-lift); }
.modal-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .4rem 1.3rem; }
.modal-head h2 { flex: 1; font-size: 1.15rem; font-stretch: 94%; }
.modal-body { padding: .6rem 1.3rem 1.2rem; overflow-y: auto; }
.modal-body > p:first-child { color: var(--ink-2); }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .9rem 1.3rem; border-top: 1px solid var(--rule); }
.pdf-frame { width: 100%; height: min(72vh, 52rem); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-2); }

.menu[popover] { position: fixed; inset: auto; margin: 0; min-width: 13rem; max-width: 20rem; padding: .3rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-lift); }
.menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--r-1); background: none; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--paper-2); outline: none; }
.menu-item.danger { color: var(--bad); }
.menu-item[disabled] { opacity: .5; cursor: default; }
.menu-hint { color: var(--ink-3); font-size: .8125rem; }
.menu-sep { height: 1px; margin: .3rem .2rem; background: var(--rule); }

.toasts { position: fixed; left: 50%; bottom: 1rem; z-index: 60; display: grid; gap: .5rem; justify-items: center; width: min(28rem, calc(100vw - 1.5rem)); transform: translateX(-50%); pointer-events: none; }
.toast { position: relative; display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .6rem .7rem 1rem; overflow: hidden; border-radius: var(--r-2); background: var(--ink); color: var(--desk); box-shadow: var(--shadow-lift); pointer-events: auto; }
.toast-text { flex: 1; }
.toast-x { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: var(--r-1); background: none; color: inherit; opacity: .6; cursor: pointer; }
.toast-x:hover { opacity: 1; }
.toast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; transform-origin: left; animation: life var(--life, 3600ms) linear forwards; }
.toast.held::after { animation-play-state: paused; }
.toast.ok::before, .toast.bad::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); }
.toast.bad::before { background: var(--bad); border-radius: 1px; }
@keyframes life { to { transform: scaleX(0); } }

/* ─── Dashboard ────────────────────────────────────────────────────────── */

.todo { display: grid; gap: .5rem; }
.figures { margin: 0; }
.figures > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem; padding: calc(0.85rem * var(--dens, 1)) 1rem; border-top: 1px solid var(--rule); }
.figures > div:first-child { border-top: 0; }
.figures dt { color: var(--ink-2); }
.figures dd { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; text-align: right; }
.figures .hint { grid-column: 1 / -1; color: var(--ink-3); font-size: .8125rem; }
.figures dt a { color: inherit; text-decoration: none; }
.figures dt a:hover { color: var(--tus); text-decoration: underline; }
.figures .bad dd { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* ─── Documents: the sheet ─────────────────────────────────────────────── */

/* The document and its side (e-Factura, payments, stornos): side by side
   whenever the page's own width allows, whatever the window or the frame. */
.doc-page { container-type: inline-size; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 1.25rem; align-items: start; }
.doc-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
@container (max-width: 760px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-side { position: static; } }

.paper-doc {
  position: relative;
  padding: clamp(1rem, 3vw, 2.2rem);
  background: var(--paper);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-paper);
  contain: layout;
}
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.4rem; }
.doc-kind { color: var(--ink-3); font-size: .875rem; }
.doc-no { margin-top: .1rem; font-size: 1.6rem; font-weight: 650; font-stretch: 90%; letter-spacing: -.01em; }
.doc-total { text-align: right; }
.doc-total .label { color: var(--ink-3); font-size: .8125rem; }
.doc-total .value { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.doc-total .rest { color: var(--ink-2); font-size: .875rem; }
.parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(10rem, .8fr); gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* By the sheet's width (.paper-doc is a container): two parties with the
   details under them, then one column. */
@container (max-width: 720px) { .parties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .parties > .kv { grid-column: 1 / -1; } }
@container (max-width: 480px) { .parties { grid-template-columns: minmax(0, 1fr); } }
.party h4 { margin: 0 0 .3rem; color: var(--ink-3); font-size: .8125rem; font-weight: 500; }
.party .name { font-weight: 600; margin-bottom: .15rem; }
.party div { color: var(--ink-2); font-size: .875rem; overflow-wrap: anywhere; }
.party .iban { margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .875rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.kv.left { grid-template-columns: max-content minmax(0, 1fr); }
.kv.left dd { text-align: left; overflow-wrap: anywhere; }
.doc-lines { margin-top: 1rem; font-size: .9rem; }
.doc-lines th { padding: .55rem .5rem; border-bottom: 1px solid var(--ink); color: var(--ink-2); font-size: .78rem; font-weight: 550; text-align: left; }
.doc-lines td { padding: .6rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-lines th:first-child, .doc-lines td:first-child { padding-left: 0; }
.doc-lines th:last-child, .doc-lines td:last-child { padding-right: 0; }
.doc-lines .num { text-align: right; }
.totals { display: grid; gap: .2rem; width: min(20rem, 100%); margin: 1rem 0 0 auto; font-size: .9375rem; }
.totals .line { display: flex; justify-content: space-between; gap: 1rem; }
.totals .line > span:first-child { color: var(--ink-2); }
.totals .line > span:last-child { font-variant-numeric: tabular-nums; }
.totals .grand { margin-top: .4rem; padding-top: .5rem; border-top: 3px double var(--ink); font-weight: 650; font-size: 1.05rem; }
.totals .grand > span:first-child { color: var(--ink); }
.doc-notes { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9rem; }

.stamp {
  position: absolute;
  left: 50%;
  top: .4rem;
  margin-left: -3.8rem;
  display: grid;
  place-content: center;
  width: 7.6rem;
  height: 7.6rem;
  border: 4px solid var(--tus);
  border-radius: 50%;
  outline: 1.5px solid var(--tus);
  outline-offset: -10px;
  color: var(--tus);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .88;
  transform: rotate(-12deg);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.stamp span:first-child { font-size: .85rem; }
.stamp span:last-child { font-size: 1.3rem; }
.stamp.bad { border-color: var(--bad); outline-color: var(--bad); color: var(--bad); }
.paper-doc { container-type: inline-size; }
/* On a narrow sheet the stamp goes where a real one would: at the end. */
@container (max-width: 36rem) {
  .stamp { position: static; margin: 1.4rem 0 .4rem .6rem; width: 6.4rem; height: 6.4rem; }
}
:root[data-theme="dark"] .stamp { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { mix-blend-mode: screen; } }

/* The state track above a document: one marker that travels. */
.track { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); margin-bottom: 1.1rem; padding-top: .7rem; border-top: 2px solid var(--rule); font-size: .8125rem; color: var(--ink-3); }
.track li { list-style: none; padding-right: .5rem; transition: color var(--t-2); }
.track li.done { color: var(--ink-2); }
.track li.cur { color: var(--ink); font-weight: 600; }
.track li.fail { color: var(--bad); font-weight: 600; }
.track::before { content: ""; position: absolute; top: -2px; left: 0; width: calc(100% / var(--n, 4)); height: 2px; background: var(--ink); transform: translateX(calc(var(--step, 0) * 100%)); transition: transform var(--t-4) var(--spring), background-color var(--t-2); }
.track.failed::before { background: var(--bad); }
.track { margin: 0 0 1.1rem; padding-left: 0; }

/* The keyed buttons and "Mai multe" wrap as one row. */
.actions-bar { display: contents; }
.side-card h3 { font-size: .9375rem; margin-bottom: .6rem; }
.pay-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pay-list li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .6rem 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.pay-list li:first-child { border-top: 0; }
.pay-list .amt { font-weight: 600; text-align: right; }
.pay-list .meta { color: var(--ink-3); font-size: .8125rem; }
.pay-list .acts { grid-column: 1 / -1; display: flex; gap: .35rem; }

/* ─── Editor ───────────────────────────────────────────────────────────── */

.editor { display: grid; gap: 1.25rem; }
.editor .paper-doc { padding: clamp(1rem, 2.5vw, 1.8rem); }
.ed-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .ed-head { grid-template-columns: minmax(0, 1fr); } }
/* The lines table answers to the sheet's own width (container query), not
   the window's: a narrow sheet stacks each line as a small card. */
.editor .paper-doc { container-type: inline-size; }
.lines-table { margin-top: .4rem; table-layout: fixed; }
.lines-table th { padding: .5rem .35rem; border-bottom: 1px solid var(--ink); color: var(--ink-2); font-size: .78rem; font-weight: 550; text-align: left; white-space: nowrap; }
.lines-table th.num { text-align: right; }
.lines-table td { padding: .45rem .35rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lines-table th:first-child, .lines-table td:first-child { padding-left: 0; }
.lines-table input, .lines-table select { min-height: 2.2rem; padding: .35rem .5rem; font-size: .9rem; }
.lines-table select { padding-right: 1.6rem; background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%; }
.lines-table input[type="number"] { text-align: right; }
.lines-table .desc { margin-top: .3rem; font-size: .8125rem; min-height: 1.9rem; }
.lines-table .line-total { padding-top: .5rem; text-align: right; font-weight: 550; white-space: nowrap; }
.lines-table .ctl { display: flex; justify-content: flex-end; gap: 0; padding-top: .15rem; }
/* The price and the currency it is written in; another currency shows its conversion under it. */
.price-in { position: relative; }
.lines-table .price-in input { padding-right: 3.2rem; }
.lines-table .price-in .cur-pick { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 3rem; min-height: 0; padding: 0 .3rem; border: 0; border-left: 1px solid var(--rule); border-radius: 0 var(--r-ctl, var(--r-2)) var(--r-ctl, var(--r-2)) 0; background: transparent none; color: var(--ink-3); font-size: .75rem; text-align: center; cursor: pointer; }
.lines-table .price-in .cur-pick:hover, .lines-table .price-in .cur-pick:focus { color: var(--ink); box-shadow: none; }
.lines-table .fx { margin-top: .3rem; font-size: .75rem; line-height: 1.35; color: var(--tus); text-align: right; }
@container (max-width: 44rem) { .lines-table .fx { text-align: left; } }
.lines-table .c-unit { width: 6.2rem; }
.lines-table .c-q { width: 5.6rem; }
.lines-table .c-p { width: 9.4rem; }
.lines-table .c-d { width: 5rem; }
.lines-table .c-v { width: 8.4rem; }
.lines-table .c-t { width: 7.2rem; }
.lines-table .c-x { width: 4.6rem; }
@container (max-width: 44rem) {
  .lines-table { table-layout: auto; }
  .lines-table thead { display: none; }
  .lines-table, .lines-table tbody { display: block; }
  .lines-table tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  .lines-table td { display: block; padding: 0; border: 0; width: auto; }
  .lines-table td.c-name { grid-column: 1 / -1; }
  .lines-table td.c-unit, .lines-table td.c-q, .lines-table td.c-p { grid-column: span 2; }
  .lines-table td.c-d { grid-column: span 2; }
  .lines-table td.c-v { grid-column: span 4; }
  .lines-table td.c-t { grid-column: span 4; }
  .lines-table td.c-x { grid-column: span 2; }
  .lines-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--ink-3); font-size: .75rem; }
  .lines-table .line-total { text-align: left; }
}
.ed-foot { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; padding: .8rem 1rem; background: color-mix(in srgb, var(--desk) 94%, transparent); border-top: 1px solid var(--rule); }
.ed-foot .grow { color: var(--ink-3); font-size: .875rem; }
.pay-block { display: grid; gap: .5rem; padding-top: .2rem; }
.pay-block .row select { width: auto; min-width: 12rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.chip { padding: .18rem .5rem; border: 1px solid var(--rule-2); border-radius: var(--r-ctl, var(--r-1)); background: var(--paper); color: var(--ink-2); font-size: .8125rem; cursor: pointer; transition: border-color var(--t-1), color var(--t-1); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.pay-tick { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }

/* Before issuing: products the catalog does not know, or knows differently. */
.pchg-list { display: grid; gap: 0; margin: .8rem 0 0; padding: 0; list-style: none; }
.pchg { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 0; border-top: 1px solid var(--rule); }
.pchg:first-child { border-top: 0; }
.pchg .muted { margin-top: .2rem; font-size: .875rem; }

.party-card { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-2); font-size: .9rem; }
.party-card .name { font-weight: 600; font-size: 1rem; }
.party-card div { color: var(--ink-2); }

/* ─── Settings, lists, misc ────────────────────────────────────────────── */

.list-plain { margin: 0; padding: 0; list-style: none; }
.list-plain li { padding: .55rem 0; border-top: 1px solid var(--rule); }
.list-plain li:first-child { border-top: 0; }
.logo-preview { max-height: 4rem; max-width: 12rem; padding: .3rem; border-radius: var(--r-1); background: #fff; }
.progress { height: 6px; border-radius: 3px; background: var(--desk-2); overflow: hidden; }
.progress > div { height: 100%; width: 100%; background: var(--ok); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--t-4) var(--ease-out); }
.progress.warn > div { background: var(--warn); }
.progress.bad > div { background: var(--bad); }
.label { color: var(--ink-3); font-size: .8125rem; margin-bottom: .3rem; }
.btn .label { color: inherit; font-size: inherit; margin: 0; }
.keybox, .log { margin: 0; padding: .7rem .8rem; overflow: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-2); font-family: var(--mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.log { max-height: 16rem; }
.log .ev { color: var(--ok); }
.log .err { color: var(--bad); }
.code-wrap { position: relative; }
.code-wrap pre.code { margin: 0; padding: .9rem 1rem; overflow-x: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-2); font-size: .8125rem; }
.code-wrap .copy { position: absolute; top: .45rem; right: .45rem; }
.playground-frame { min-height: 26rem; border: 1px dashed var(--rule-2); border-radius: var(--r-2); background: var(--desk); }
.playground-frame > .empty { padding-top: 6rem; }

/* Screens inside the iframe before the app (sign-in, errors): no full
   height, the iframe follows the content. */
.embed-screen { display: grid; justify-items: center; padding: 1.5rem 1rem 2rem; }
.embed-screen .signin-card { box-shadow: none; border: 1px solid var(--rule); }
.embed-screen .signin-card .btn { width: 100%; }

/* Portal header. */
.portal-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .7rem clamp(1rem, 3vw, 2.2rem); background: var(--desk); border-bottom: 1px solid var(--rule); }
.portal-nav { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.portal-nav a { padding: .4rem .65rem; border-radius: var(--r-2); color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.portal-nav a:hover { color: var(--ink); background: var(--desk-2); }
.portal-nav a.on { color: var(--ink); font-weight: 600; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.list-steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-2); }
.list-steps li + li { margin-top: .5rem; }
.list-steps b { color: var(--ink); }

/* Sign-in inside the app (not signed in). */
.signin { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 1.25rem; }
.signin-card { width: min(27rem, 100%); padding: clamp(1.4rem, 5vw, 2.2rem); background: var(--paper); border-radius: var(--r-1); box-shadow: var(--shadow-paper); animation: signin-in var(--t-4) var(--spring) both; }
@keyframes signin-in { from { opacity: 0; transform: translateY(10px); } }
.signin-card .brand { margin-bottom: 1.6rem; }
.signin-card h1 { font-size: 1.45rem; font-stretch: 92%; margin-bottom: .5rem; }
.signin-card p { color: var(--ink-2); }
.signin-card .btn { width: 100%; }
.signin-card .btn + .btn { margin-top: .5rem; }
.signin-card .foot { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--ink-3); }

/* ── Charts (js/charts.js): boxes on a ruled sheet ───────────────────────── */
.chart { margin: 0; }
.ch-plot { position: relative; height: 13.5rem; margin: .6rem 0 0 2.8rem; }
.ch-grid { position: absolute; inset: 0 0 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ch-line { position: relative; height: 0; border-top: 1px dashed var(--rule); }
.ch-line:last-child { border-top: 1px solid var(--rule-2); }
.ch-tick { position: absolute; right: calc(100% + .55rem); top: -.55rem; font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-cols { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; }
.ch-col { display: grid; grid-template-rows: minmax(0, 1fr) 1.6rem; border-radius: var(--r-1); outline: none; transition: background-color var(--t-1) var(--ease); }
.ch-col:hover, .ch-col:focus-visible { background: var(--paper-2); }
.ch-col:focus-visible { box-shadow: inset 0 0 0 2px var(--tus); }
.ch-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 14%; }
.ch-bar { flex: 1 1 0; max-width: 1.25rem; height: 0; border-radius: 2px 2px 0 0; transition: height .75s var(--spring); }
.ch-label { align-self: end; padding-bottom: .15rem; text-align: center; font-size: .72rem; color: var(--ink-3); }
.ch-col.now .ch-label { color: var(--ink); font-weight: 600; }
.ch-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .7rem 0 0 2.8rem; font-size: .8rem; color: var(--ink-2); }
.ch-key { display: inline-flex; align-items: center; gap: .4rem; }
.ch-sw { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -.05rem; }
.ch-tip { position: absolute; z-index: 3; min-width: 10rem; padding: .5rem .65rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-lift); font-size: .8rem; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; }
.ch-tip b { display: block; margin-bottom: .25rem; }
.ch-tip .r { display: flex; justify-content: space-between; gap: 1.2rem; font-variant-numeric: tabular-nums; }
.ch-tip .r span:first-child { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); }
.t-ink { background: var(--ink); }
.t-tus { background: var(--tus); }
.t-ok { background: var(--ok); }
.t-warn { background: var(--warn); }
.t-bad { background: var(--bad); }
.t-bad2 { background: color-mix(in srgb, var(--bad) 62%, var(--ink)); }
.t-muted { background: var(--rule-2); }
.ch-track { display: flex; gap: 2px; height: .95rem; margin-top: .3rem; overflow: hidden; border-radius: 999px; background: var(--paper-2); }
.ch-seg { flex: 0 0 0%; min-width: 0; transition: flex-basis .8s var(--spring); }
.ch-list { display: grid; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.ch-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; font-size: .86rem; }
.ch-list li.zero { color: var(--ink-3); }
.ch-list .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-list li.zero .v { font-weight: 400; }
.ch-rank { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin: .2rem 0 0; padding: 0; list-style: none; }
/* Name, then the amount on the same line; the name wraps only in a panel
   narrower than it (a grid: its natural width is name + amount, which a
   wrapping flex row would not report). */
.ch-rank .hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .8rem; font-size: .86rem; }
.ch-rank .nm { min-width: 0; overflow-wrap: anywhere; }
.ch-rank .hd > span:last-child { white-space: nowrap; }
.ch-rank .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-rank .sub { margin-left: .4rem; color: var(--ink-3); font-weight: 400; }
.ch-rank .tr { height: .42rem; margin-top: .32rem; overflow: hidden; border-radius: 999px; background: var(--paper-2); }
.ch-rank .fill { width: 0; height: 100%; border-radius: inherit; transition: width .85s var(--spring); }
.ch-empty { margin: .4rem 0 0; color: var(--ink-3); font-size: .86rem; }
.ch-head-figure { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Each panel starts as wide as its content asks (a ranking: its longest
   name on one line); the ones that no longer fit on the row wrap, and every
   row is then shared out to its full width. */
.ch-trio { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.ch-trio > * { flex: 1 1 auto; min-width: min(100%, 19rem); }
/* The dashboard takes the whole width of the window. */
.view:has(> .dash) { max-width: none; }
@media (max-width: 560px) { .ch-plot { height: 11rem; margin-left: 2.3rem; } .ch-legend { margin-left: 2.3rem; } .ch-bars { padding: 0 6%; } }

/* ─── Firm form: the payment-tracking question ─────────────────────────── */

.tp-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.tp-choice legend { padding: 0; margin-bottom: .6rem; font-weight: 600; }
.tp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 560px) { .tp-cards { grid-template-columns: minmax(0, 1fr); } }
.tp-card { position: relative; display: grid; gap: .35rem; padding: .8rem .9rem .9rem; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper); cursor: pointer; }
.tp-card:has(input:checked) { border-color: var(--tus); box-shadow: 0 0 0 1px var(--tus) inset; }
.tp-card:has(input:disabled) { cursor: default; }
.tp-card:has(input:focus-visible) { outline: 2px solid var(--tus); outline-offset: 2px; }
.tp-card input { position: absolute; top: .85rem; right: .9rem; }
.tp-card b { font-size: 1rem; }
.tp-line { color: var(--ink-2); font-size: .875rem; }
.tp-demo { display: grid; gap: .3rem; margin: 0 2rem .35rem 0; padding: .55rem .65rem; border-radius: var(--r-1); background: var(--paper-2); font-size: .78rem; }
.tp-row { display: grid; grid-template-columns: 3.6rem 1fr auto; align-items: center; gap: .5rem; min-height: 1.35rem; color: var(--ink-2); }
.tp-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.tp-row .tag { font-size: .7rem; }

/* ─── API keys and webhooks (views/api.js) ──────────────────────────────── */
.t td:first-child .cell-main.break { white-space: normal; overflow-wrap: anywhere; }
td.bad, div.bad { color: var(--bad); }
.key-co { font-size: .875rem; line-height: 1.45; }
.key-co + .key-co { margin-top: .3rem; }
.key-co.off b { color: var(--ink-3); font-weight: 500; }
.perm-cos { display: grid; gap: .6rem; }
.perm-co { border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper); }
.perm-co-head { display: flex; width: 100%; padding: .7rem .8rem; }
.perm-co-body { display: grid; gap: .7rem; padding: .2rem .8rem .9rem 2.2rem; }
.perm-grid { display: grid; gap: .45rem; }
.perm-row { display: grid; grid-template-columns: minmax(9rem, 12rem) auto; align-items: center; gap: .8rem; font-size: .9375rem; }
.perm-row .seg { justify-self: start; }
.perm-acts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding-top: .2rem; font-size: .9375rem; }
@media (max-width: 560px) { .perm-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; } .perm-co-body { padding-left: .8rem; } }
.ev-list, .co-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .45rem 1.2rem; margin-top: .5rem; font-size: .9375rem; }
.co-list { margin-top: 0; }
.ev-list code { font-size: .75rem; }
.secret-box { padding: .8rem .9rem; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-2); }
code.secret { display: block; font: .875rem/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }