/* Shared components. Rules: flat fills, no outline darker than the fill,
   no dots, no tinted tile behind icons, paintings contained and unframed. */

/* Pill buttons */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill); background: var(--card); color: var(--fg);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pill.pri { background: var(--accent); color: var(--accent-fg); }
.pill.soft { background: var(--canvas); }
.pill.white { background: #fff; color: var(--accent); font-weight: 600; }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.pill:disabled { opacity: .55; cursor: default; }

/* Badge and count */
.st { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; border: 0; }
.st.av { color: var(--ok); background: var(--ok-soft); }
.st.sd { color: var(--danger); background: #fef2f2; }
.st.cm { color: var(--warn); background: var(--warn-soft); }
.st.gr { color: var(--grey); background: var(--grey-soft); }
.cnt { font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--canvas); border-radius: var(--r-pill); padding: 1px 8px; }

/* Panel: the big rounded white section */
.pnl { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-section); overflow: hidden; margin-bottom: 16px; }
.pnl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.pnl-h h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: -.005em; }
.pnl-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.pnl-b { padding: 4px 20px 20px; }
.pnl-f { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line-soft); }

/* Row */
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; background: none; border: 0; text-align: left; }
.row + .row { border-top: 1px solid var(--line-soft); }
.row--link { cursor: pointer; }
.row--link:hover { background: #fafafc; }
.row--unread { background: #f6f6fd; }
.row--on, .row--on:hover { background: var(--accent-soft); }
.row--unread .row-main b { font-weight: 650; }
.row--unread .row-main span { color: var(--fg); }
.row-lead { display: grid; place-items: center; color: var(--muted); flex: none; }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-weight: 500; }
.row-main span { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Stat: title + number only */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.stat-h { color: var(--muted); font-weight: 500; font-size: 13.5px; }
.stat-v { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; line-height: 1.1; }

/* ItemCard: the painting on a soft grey tile, whole, no border (icard--bare) */
.icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px; padding: 0 20px 20px; }
.icard { display: block; width: 100%; }
.icard-link { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.icard-img { position: relative; display: grid; place-items: center; height: 168px; padding: 10px; border-radius: 14px; background: var(--canvas); color: var(--faint); }
.icard-img--empty { background: none; }
.icard-img img { max-width: 100%; max-height: 148px; object-fit: contain; }
.icard-img svg.ico { width: 28px; height: 28px; }
.icard-t { display: block; font-weight: 600; font-size: 14.5px; margin: 12px 2px 2px; }
.icard-m { display: block; color: var(--muted); font-size: 12.5px; margin: 0 2px; }
.icard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 2px 0; }
.icard-a { margin-left: auto; }

/* Segmented filter and view toggle: fill only */
.seg { display: inline-flex; gap: 2px; background: #e9e9ee; border-radius: var(--r-pill); padding: 3px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--fg); }
.seg button i { font-style: normal; margin-left: 5px; color: var(--faint); font-weight: 400; }
.seg--view button { padding: 6px 12px; }
.seg--view svg.ico { width: 15px; height: 15px; }

/* Publish switch, always with its word */
.onsite { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.tg { position: relative; width: 32px; height: 18px; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--accent); }
.tg::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: var(--r-pill); background: #fff; }
.tg.off { background: var(--toggle-off); }
.tg.off::after { right: auto; left: 2px; }
.tg:disabled { opacity: .55; cursor: default; }

/* Fields */
.fld { margin-bottom: 16px; }
.fl { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: 13px; margin-bottom: 7px; }
.fl em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; }
.fi { display: block; width: 100%; min-height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-field); background: var(--field); color: var(--fg); font-size: 14px; }
.fi::placeholder { color: var(--faint); }
.fi:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-ring); }
.fi.ta { padding: 12px 14px; line-height: 1.55; min-height: 110px; resize: vertical; }
.fi.err { background: #fff; box-shadow: 0 0 0 2px #fca5a5; }
.fi:read-only { color: var(--muted); }
.fh { color: var(--muted); font-size: 12px; margin-top: 6px; }
.ferr { color: var(--danger); font-size: 12.5px; margin-top: 6px; }
.sel { position: relative; }
.sel select { appearance: none; width: 100%; min-height: 42px; padding: 0 36px 0 14px; border: 0; border-radius: var(--r-field); background: var(--field); font-size: 14px; }
.sel select:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-ring); }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* Action buttons: real buttons for contact actions (decision 24) */
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font-size: 14px; font-weight: 600; }
.abtn svg.ico { width: 17px; height: 17px; }
.abtn.pri { background: var(--accent); color: #fff; }
.abtn.wa { background: var(--wa); color: #fff; }
.abtn.sec { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.abtn.ghost { background: var(--canvas); color: var(--fg); }
.abtn.del { background: var(--danger-soft); color: var(--danger); }
.abtn:disabled { opacity: .55; cursor: default; }

/* Empty state */
.empty { padding: 28px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--fg); font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.empty .pill { margin-top: 12px; }

/* Toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 50; }
.toasts-r { display: grid; gap: 8px; }
.toasts-r:not(:empty) + .toasts-r:not(:empty) { margin-top: 8px; }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--fg); color: #fff; font-size: 13.5px; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .35); }
.toast a { color: #c7d2fe; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.toast--err { background: var(--danger); }

/* Text link */
.lnk { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 500; font-size: inherit;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .12s ease, text-decoration-color .12s ease; }
.lnk:hover { color: #29266e; text-decoration-color: currentColor; }

/* Motion (decisions 25-27). Buttons: the fill deepens on hover (120 ms), a
   small press on click (97%, indigo deeper still). No lift, no shadow; the
   focus ring is the shared :focus-visible one (base.css). */
.pill, .abtn { transition: background-color .12s ease, transform .08s ease; }
.pill:not(:disabled):hover { background: #ececf1; }
.pill.soft:not(:disabled):hover { background: #e9e9ee; }
.pill.white:not(:disabled):hover { background: #f1f1f6; }
.pill.pri:not(:disabled):hover, .abtn.pri:not(:disabled):hover { background: #29266e; }
.pill.danger:not(:disabled):hover, .abtn.del:not(:disabled):hover { background: #fbe4e4; }
.abtn.wa:not(:disabled):hover { background: #15803d; }
.abtn.sec:not(:disabled):hover { background: #f7f7fa; }
.abtn.ghost:not(:disabled):hover { background: #ebebf0; }
:is(.pill, .abtn):not(:disabled):active { transform: scale(.97); }
:is(.pill.pri, .abtn.pri):not(:disabled):active { background: #221f5e; }
/* Segmented control: colour only, no press */
.seg button { transition: background-color .12s ease, color .12s ease; }
.seg button:not(.on):hover { background: rgba(255, 255, 255, .55); color: var(--fg); }

/* Fields: hover darkens the grey fill, focus brings the indigo ring */
.fi, .sel select { transition: background-color .2s ease, box-shadow .2s ease; }
.fi:not(:focus):not(.err):not(:read-only):hover, .sel select:not(:focus):not(:disabled):hover { background: #ececf1; }

/* RuleIcon: the field's own icon, or our check drawn in a circle */
.vi { position: relative; width: 17px; height: 17px; flex: none; }
.vi svg { position: absolute; inset: 0; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vi .own { color: #9a9aa6; transition: color .2s ease, opacity .16s ease, transform .2s ease; }
.vi .ok { color: var(--ok); opacity: 0; }
.vi .ok circle, .vi .ok path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.vi .ok circle { transition: stroke-dashoffset .2s ease-in; }
.vi .ok path { transition: stroke-dashoffset .12s ease-in; }
:focus-within > .vi .own { color: var(--fg); }
.vi.is-bad .own { color: var(--danger); }
.vi.is-good .own { opacity: 0; transform: scale(.5); }
.vi.is-good .ok { opacity: 1; }
.vi.is-good .ok circle { stroke-dashoffset: 0; transition: stroke-dashoffset .34s cubic-bezier(.3, .7, .3, 1) .06s; }
.vi.is-good .ok path { stroke-dashoffset: 0; transition: stroke-dashoffset .22s cubic-bezier(.3, .7, .3, 1) .3s; }
/* Admin look: the icon sits inside the grey field */
.fiw { position: relative; }
.fiw .vi { position: absolute; left: 14px; top: 50%; margin-top: -8.5px; pointer-events: none; }
.fiw .fi { padding-left: 41px; }

@media (prefers-reduced-motion: reduce) {
  .pill, .abtn, .seg button, .lnk, .fi, .sel select, .vi .own, .vi .ok circle, .vi .ok path,
  .vi.is-good .ok circle, .vi.is-good .ok path { transition: none; }
  :is(.pill, .abtn):not(:disabled):active { transform: none; }
  .vi.is-good .own { transform: none; }
}

/* Checkbox (decision 28): the input sits invisibly over the box */
.cbl { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.cbl input { position: absolute; z-index: 1; left: 0; top: 50%; width: 17px; height: 17px; margin: -8.5px 0 0; opacity: 0; cursor: pointer; }
.cbx { position: relative; width: 17px; height: 17px; flex: none; border-radius: 5px; background: #fff;
  box-shadow: inset 0 0 0 1.5px #c9c9d6; transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease; }
.cbx svg { position: absolute; inset: 0; width: 17px; height: 17px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cbx .tick { stroke: #fff; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .16s ease-in; }
.cbl:hover .cbx { box-shadow: inset 0 0 0 1.5px #9a9aa6; }
.cbl input:focus-visible + .cbx { outline: 2px solid var(--accent); outline-offset: 2px; }
.cbl:active .cbx { transform: scale(.9); }
.cbl input:checked + .cbx { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cbl:hover input:checked + .cbx { background: #29266e; box-shadow: inset 0 0 0 1.5px #29266e; }
.cbl input:checked + .cbx .tick { stroke-dashoffset: 0; transition: stroke-dashoffset .3s cubic-bezier(.3, .7, .3, 1) .06s; }
@media (prefers-reduced-motion: reduce) {
  .cbx, .cbx .tick, .cbl input:checked + .cbx .tick { transition: none; }
  .cbl:active .cbx { transform: none; }
}

/* PasswordInput (decision 30): the eye and the text roll. Hover only darkens
   the eye (no tile behind it, the pupil stays centred). */
.pwf { position: relative; }
.pwf input[type=password]:not(:placeholder-shown) { font-size: 17px; letter-spacing: .22em; }
.pwf--admin .fi { padding-right: 44px; }
.pwf--admin .eye { position: absolute; right: 9px; top: 50%; margin-top: -14px; }
.eye { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -6px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: #9a9aa6; cursor: pointer; transition: color .15s ease; }
.pwf--admin .eye { margin-right: 0; }
.eye:hover, .eye:focus-visible { color: var(--fg); }
.eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eye svg { width: 18px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye .top { transform-box: view-box; transform-origin: 12px 12px; transition: transform .26s cubic-bezier(.5, 0, .3, 1) .1s; }
.eye .pupil { fill: currentColor; stroke: none; transform-box: view-box; transform-origin: 12px 12px; transition: transform .2s ease .22s, opacity .12s ease .22s; }
.eye .lash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .12s ease-in; }
.eye.shut .top { transform: scaleY(-1); transition-delay: 0s; }
.eye.shut .pupil { transform: scaleY(0); opacity: 0; transition-delay: 0s; }
.eye.shut .lash { stroke-dashoffset: 0; transition: stroke-dashoffset .18s ease-out; }
/* the lashes draw one after another, right to left */
.eye.shut .l5 { transition-delay: .2s; }
.eye.shut .l4 { transition-delay: .24s; }
.eye.shut .l3 { transition-delay: .28s; }
.eye.shut .l2 { transition-delay: .32s; }
.eye.shut .l1 { transition-delay: .36s; }
/* the roll: dots slide up and out, the real text slides up into place */
.pwf.rolling input { color: transparent !important; }
.roll { position: absolute; overflow: hidden; pointer-events: none; }
.roll-in { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.roll-in span { display: flex; align-items: center; flex: none; white-space: pre; }
.roll-in .dots { letter-spacing: .22em; }
.roll-in .out { opacity: 0; transition: opacity .3s ease-out; }
.roll-in .in { opacity: 1; transition: opacity .3s ease-in .12s; }
@media (prefers-reduced-motion: reduce) {
  .eye, .eye *, .roll-in, .roll-in span { transition: none !important; }
}

/* Autofill: Chrome paints its light blue only on the <input>, which shows as
   a blue box inside our fields. Cover it with the field's own fill (an inset
   shadow, the only thing that paints over it) in every state, keep the text
   colour, the caret and the font (its hover preview switches font). */
.fi:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  box-shadow: inset 0 0 0 1000px var(--field);
}
.fi:not(:focus):not(.err):not(:read-only):hover:is(:-webkit-autofill, :autofill) { box-shadow: inset 0 0 0 1000px #ececf1; }
.fi:focus:is(:-webkit-autofill, :autofill) { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-ring), inset 0 0 0 1000px #fff; }
.fi.err:is(:-webkit-autofill, :autofill) { box-shadow: 0 0 0 2px #fca5a5, inset 0 0 0 1000px #fff; }
.gi input:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: #2a2a33; caret-color: #2a2a33;
  box-shadow: inset 0 0 0 1000px #fff;
}
:is(.fi, .gi input):-webkit-autofill::first-line { font-family: var(--font); }
/* the roll hides the field's own text; autofill's text-fill colour must go too */
.pwf.rolling input { -webkit-text-fill-color: transparent !important; }

/* SheetSelect (decision 24): the trigger looks like the select it replaces;
   the sheet comes up from the bottom over a dimmed page. */
.sel .sel-btn { display: block; width: 100%; min-height: 42px; padding: 0 36px 0 14px; border: 0; border-radius: var(--r-field);
  background: var(--field); color: var(--fg); font-size: 14px; text-align: left; transition: background-color .2s ease; }
.sel .sel-btn:hover { background: #ececf1; }
.sheet-dim { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .28); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 80vh; max-height: 80dvh;
  overflow-y: auto; overscroll-behavior: none; padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 30px -10px rgba(15, 23, 42, .25);
  animation: sheet-in .24s cubic-bezier(.3, .7, .3, 1);
}
.sheet-grab { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #d4d4d8; }
.sheet-t { padding: 0 12px 6px; font-weight: 500; font-size: 13px; }
.sheet-opt { display: block; width: 100%; padding: 13px 12px; border: 0; border-radius: 12px; background: none; color: var(--fg); font-size: 15px; text-align: left; }
.sheet-opt:hover { background: var(--canvas); }
.sheet-opt[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .sel .sel-btn { transition: none; }
}