/* ============================================================
   CTM.net — Tiptari internal request app
   Default palette (v1.12): ChaTraMue — Tiptari's red, maroon and gold.
   Tea House (cream, leaf green, oolong amber) and the others stay selectable.
   ============================================================ */
:root, html[data-theme="chatramue"] {
  --leaf:      #8E1B22;            /* deep brand red: headings, links, active items */
  --leaf-soft: #C9A94A;            /* gold: focus rings */
  --ink:       #2B1517;
  --cream:     #FBF6EE;
  --porcelain: #FFFFFF;
  --line:      #EADFCB;
  --muted:     #7A6660;
  --oolong:    #7A6524;            /* antique gold, readable as text */
  --matcha:    #4F7A3A;
  --berry:     #9B1C4A;            /* alerts: raspberry, so it doesn't read as the brand red */
  --info:      #2D5570;
  --steep:     #947E31;
  --topbar-bg: #431B1E;            /* maroon band, like the logo's frame */
  --topbar-fg: #FBF3E4;
  --btn-bg:    #B71C22;            /* ChaTraMue red (6.6:1 with white) */
  --btn-fg:    #FFFFFF;
  --radius: 12px;
  --radius-ctl: 10px;
  --font-display: Georgia, "Times New Roman", serif;
  --label-track: .08em;
  --shadow: 0 1px 3px rgba(67,27,30,.09), 0 4px 14px rgba(67,27,30,.06);
  font-size: 16px;
}
html[data-theme="chatramue-night"] {
  --leaf: #D9B95A; --leaf-soft: #E8CC7A;
  --ink: #F6EADB; --cream: #1C1112; --porcelain: #2A1A1B;
  --line: #3D2A2B; --muted: #A89287;
  --oolong: #E0A050; --matcha: #8FC07A; --berry: #F0857A; --info: #8DB8D8;
  --steep: #D9B95A;
  --topbar-bg: #2A1416; --topbar-fg: #F6EADB;
  --btn-bg: #D9B95A; --btn-fg: #1C1112;
  --radius: 12px; --radius-ctl: 10px;
  --font-display: Georgia, "Times New Roman", serif;
  --label-track: .08em;
  --shadow: 0 1px 3px rgba(0,0,0,.45);
}
html[data-theme="thaitea"] {
  --leaf: #8A2B0F; --leaf-soft: #E8823A;
  --ink: #3A2014; --cream: #FFF6EC; --porcelain: #FFFFFF;
  --line: #F1DCC4; --muted: #8A6B58;
  --oolong: #A0620F; --matcha: #5E8A3C; --berry: #A63D3D; --info: #3D6A8A;
  --steep: #E8823A;
  --topbar-bg: #B5561A; --topbar-fg: #FFF6EC;
  --btn-bg: #B5561A; --btn-fg: #FFFFFF;
  --radius: 18px; --radius-ctl: 14px;
  --font-display: inherit;
  --label-track: .06em;
  --shadow: 0 1px 4px rgba(138,43,15,.08), 0 4px 14px rgba(138,43,15,.06);
}
html[data-theme="contrast"] {
  --leaf: #0B3D91; --leaf-soft: #0B3D91;
  --ink: #000000; --cream: #FFFFFF; --porcelain: #FFFFFF;
  --line: #595959; --muted: #333333;
  --oolong: #7A4A00; --matcha: #1E5E1E; --berry: #A00000; --info: #0B3D91;
  --steep: #000000;
  --topbar-bg: #000000; --topbar-fg: #FFFFFF;
  --btn-bg: #000000; --btn-fg: #FFFFFF;
  --radius: 6px; --radius-ctl: 6px;
  --font-display: inherit;
  --label-track: .06em;
  --shadow: none;
}
html[data-theme="teahouse"] {
  --leaf:      #1E3A2B;
  --leaf-soft: #2C5240;
  --ink:       #17241C;
  --cream:     #F5F1E6;
  --porcelain: #FFFFFF;
  --line:      #E2DCC9;
  --muted:     #6E7A6C;
  --oolong:    #C4762A;
  --matcha:    #6E9A46;
  --berry:     #A63D3D;
  --info:      #2D5570;
  --steep:     #8A5A2B;
  --topbar-bg: var(--leaf);
  --topbar-fg: var(--cream);
  --btn-bg:    var(--leaf);
  --btn-fg:    var(--cream);
  --radius: 14px;
  --radius-ctl: 10px;
  --font-display: Georgia, "Times New Roman", serif;
  --label-track: .08em;
  --shadow: 0 1px 3px rgba(23,36,28,.08), 0 4px 14px rgba(23,36,28,.06);
  font-size: 16px;
}
html[data-theme="matcha"] {
  --leaf: #4C6B33; --leaf-soft: #5E8A3C;
  --ink: #263322; --cream: #FCFDFB; --porcelain: #FFFFFF;
  --line: #E2EAE0; --muted: #8B9684;
  --oolong: #C98A2E; --matcha: #7BA05B; --berry: #C05B5B; --info: #4A7A96;
  --steep: #7BA05B;
  --topbar-bg: #FCFDFB; --topbar-fg: #263322;
  --btn-bg: #4C6B33; --btn-fg: #FFFFFF;
  --radius: 20px; --radius-ctl: 16px;
  --font-display: inherit;
  --label-track: .06em;
  --shadow: 0 1px 4px rgba(38,51,34,.07), 0 4px 14px rgba(38,51,34,.05);
}
html[data-theme="midnight"] {
  --leaf: #8FD0A0; --leaf-soft: #A8DCB5;
  --ink: #E9EFE7; --cream: #101712; --porcelain: #1B241D;
  --line: #2A3A2E; --muted: #7C8B7E;
  --oolong: #E09A4A; --matcha: #8FD0A0; --berry: #E06A5A; --info: #7FB4D0;
  --steep: #E09A4A;
  --topbar-bg: #16201A; --topbar-fg: #E9EFE7;
  --btn-bg: #8FD0A0; --btn-fg: #101712;
  --radius: 10px; --radius-ctl: 8px;
  --font-display: inherit;
  --label-track: .1em;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}
html[data-theme="celadon"] {
  --leaf: #2F6157; --leaf-soft: #3D7A6E;
  --ink: #22333A; --cream: #EDF3F0; --porcelain: #FFFFFF;
  --line: #C7D8D1; --muted: #6D8079;
  --oolong: #A5701F; --matcha: #3E7A52; --berry: #A64848; --info: #3E6A8A;
  --steep: #2F6157;
  --topbar-bg: #2F6157; --topbar-fg: #EDF3F0;
  --btn-bg: #22333A; --btn-fg: #FFFFFF;
  --radius: 3px; --radius-ctl: 3px;
  --font-display: inherit;
  --label-track: .16em;
  --shadow: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Helvetica Neue", sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
#app { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg); color: var(--topbar-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--topbar-fg) 12%, var(--topbar-bg));
  margin: 0 -16px 16px; padding: 14px 18px calc(14px);
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .brand { font-weight: 800; letter-spacing: .12em; font-size: .8rem; text-transform: uppercase; }
.topbar .brand span { color: var(--oolong); }
.topbar .who { font-size: .78rem; opacity: .85; text-align: right; line-height: 1.3; }
.topbar .who b { display: block; font-size: .85rem; }

/* ---- section headers ---- */
h1 { font-size: 1.35rem; margin: 4px 0 2px; letter-spacing: -.01em; font-family: var(--font-display); }
h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: var(--label-track);
     color: var(--muted); margin: 22px 0 10px; font-weight: 700; }
.sub { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }

/* ---- cards & list ---- */
.card {
  background: var(--porcelain); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 10px;
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:active { transform: scale(.99); }
.card .row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.req-no { font-size: .72rem; color: var(--muted); letter-spacing: .06em; }
.req-title { font-weight: 650; margin: 3px 0 8px; line-height: 1.3; }
.meta-line { font-size: .78rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- tea-tag chips ---- */
.chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
  text-transform: uppercase; white-space: nowrap;
}
.chip.type    { background: color-mix(in srgb, var(--leaf) 14%, var(--porcelain)); color: var(--leaf); }
.chip.warranty{ background: color-mix(in srgb, var(--matcha) 16%, var(--porcelain)); color: var(--matcha); }
.chip.nowarr  { background: color-mix(in srgb, var(--oolong) 15%, var(--porcelain)); color: var(--oolong); }
.chip.sla     { background: color-mix(in srgb, var(--berry) 14%, var(--porcelain)); color: var(--berry); }
.chip.prio-CRITICAL { background: var(--berry); color: #fff; }
.chip.prio-HIGH     { background: var(--oolong); color: #fff; }
.chip.prio-NORMAL   { background: color-mix(in srgb, var(--muted) 14%, var(--porcelain)); color: var(--muted); }
.chip.prio-LOW      { background: color-mix(in srgb, var(--muted) 9%, var(--porcelain)); color: var(--muted); }

.status {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}
.st-NEW, .st-ROUTED           { background: color-mix(in srgb, var(--leaf) 13%, var(--porcelain)); color: var(--leaf); }
.st-PENDING_QUOTE             { background: color-mix(in srgb, var(--oolong) 15%, var(--porcelain)); color: var(--oolong); }
.st-PENDING_APPROVAL          { background: var(--oolong); color: #fff; }
.st-APPROVED, .st-VERIFIED    { background: color-mix(in srgb, var(--matcha) 20%, var(--porcelain)); color: var(--matcha); }
.st-REJECTED, .st-REWORK      { background: color-mix(in srgb, var(--berry) 15%, var(--porcelain)); color: var(--berry); }
.st-IN_PROGRESS               { background: var(--btn-bg); color: var(--btn-fg); }
.st-WORK_SUBMITTED            { background: color-mix(in srgb, var(--info) 15%, var(--porcelain)); color: var(--info); }
.st-CLOSED                    { background: color-mix(in srgb, var(--muted) 12%, var(--porcelain)); color: var(--muted); }
.st-CANCELLED                 { background: color-mix(in srgb, var(--muted) 12%, var(--porcelain)); color: var(--muted); text-decoration: line-through; }

/* ---- the steep line (lifecycle tracker) ---- */
.steep { margin: 18px 2px 6px; }
.steep .track { display: flex; align-items: center; }
.steep .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--porcelain); flex: none;
}
.steep .dot.done   { background: var(--steep); border-color: var(--steep); }
.steep .dot.now    { background: var(--porcelain); border-color: var(--steep); box-shadow: 0 0 0 4px rgba(138,90,43,.18); }
.steep .bar { flex: 1; height: 3px; background: var(--line); }
.steep .bar.done { background: linear-gradient(90deg, var(--steep), #B07B41); }
.steep .labels { display: flex; justify-content: space-between; margin-top: 7px;
  font-size: .62rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.steep .labels span { flex: 1; text-align: center; }
.steep .labels span:first-child { text-align: left; }
.steep .labels span:last-child  { text-align: right; }
.steep .labels .now { color: var(--steep); font-weight: 800; }

/* ---- forms ---- */
label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: var(--label-track);
        text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
input[type=text], textarea, select {
  width: 100%; padding: 12px 13px; font-size: .95rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-ctl); background: var(--porcelain);
  font-family: inherit;
}
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--leaf-soft); outline-offset: 1px;
}
textarea { min-height: 96px; resize: vertical; }
.seg { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.seg button {
  padding: 10px 4px; border-radius: var(--radius-ctl); border: 1.5px solid var(--line);
  background: var(--porcelain); font-weight: 700; font-size: .74rem; color: var(--muted);
}
.seg button.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

button.primary {
  width: 100%; margin-top: 20px; padding: 15px; border: 0; border-radius: var(--radius-ctl);
  background: var(--btn-bg); color: var(--btn-fg); font-size: 1rem; font-weight: 750;
  letter-spacing: .02em; cursor: pointer;
}
button.primary:disabled { opacity: .5; }
button.ghost {
  padding: 10px 14px; border-radius: var(--radius-ctl); border: 1.5px solid var(--leaf);
  background: transparent; color: var(--leaf); font-weight: 700; font-size: .82rem; cursor: pointer;
}
button.ghost.danger { border-color: var(--berry); color: var(--berry); }
button.ghost.amber  { border-color: var(--oolong); color: var(--oolong); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---- persona picker ---- */
.persona { display: flex; align-items: center; gap: 12px; }
.persona .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--btn-bg); color: var(--btn-fg); display: flex; align-items: center;
  justify-content: center; font-weight: 800;
}
.persona .role { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---- thread ---- */
.thread { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; }
.msg .a { display: block; font-size: .68rem; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.msg.mine { align-self: flex-end; background: var(--btn-bg); color: var(--btn-fg); border-bottom-right-radius: 4px; }
.msg.mine .a { color: color-mix(in srgb, var(--btn-fg) 75%, var(--btn-bg)); }
.msg.theirs { align-self: flex-start; background: var(--porcelain); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.composer { display: flex; gap: 8px; margin-top: 12px; }
.composer input { flex: 1; }
.composer button { flex: none; width: 52px; border-radius: var(--radius-ctl); border: 0; background: var(--btn-bg); color: var(--btn-fg); font-size: 1.1rem; }

/* ---- timeline ---- */
.timeline { border-left: 2px solid var(--line); margin: 8px 0 0 6px; padding-left: 16px; }
.tl-item { position: relative; padding: 6px 0 12px; font-size: .82rem; }
.tl-item::before {
  content: ""; position: absolute; left: -21.5px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--steep);
}
.tl-item .t { color: var(--muted); font-size: .7rem; }

/* ---- kpi ---- */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .n { font-size: 1.5rem; font-weight: 800; color: var(--leaf); }
.kpi .n.bad { color: var(--berry); }
.kpi .l { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* ---- quote block ---- */
.quote { border-left: 4px solid var(--oolong); }
.quote .amt { font-size: 1.25rem; font-weight: 800; color: var(--oolong); }

/* ---- bottom nav ---- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--porcelain); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.bottomnav a {
  text-decoration: none; color: var(--muted); font-size: .68rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  letter-spacing: .05em; text-transform: uppercase; padding: 2px 18px; border-radius: 10px;
}
.bottomnav a .ic { font-size: 1.25rem; line-height: 1; }
.bottomnav a.on { color: var(--leaf); }

.empty { text-align: center; color: var(--muted); padding: 44px 16px; font-size: .9rem; }
.empty .big { font-size: 2rem; display: block; margin-bottom: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--ink); color: var(--porcelain); padding: 10px 18px; border-radius: 999px;
  font-size: .82rem; z-index: 50; box-shadow: var(--shadow);
}
.back { display: inline-block; margin: 2px 0 10px; color: var(--leaf); text-decoration: none; font-weight: 700; font-size: .85rem; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: .85rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (min-width: 700px) { body { padding-bottom: 90px; } }


/* ---- theme switcher ---- */
.theme-btn {
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--topbar-fg) 35%, transparent);
  color: var(--topbar-fg); border-radius: 999px; padding: 5px 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.sheet-veil {
  position: fixed; inset: 0; background: rgba(10,16,12,.45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--porcelain); width: 100%; max-width: 640px;
  border-radius: 18px 18px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
}
.sheet h3 { margin: 0 0 4px; font-size: 1.05rem; font-family: var(--font-display); color: var(--ink); }
.sheet .sub { margin-bottom: 12px; }
.theme-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 14px; margin-bottom: 8px; cursor: pointer; text-align: left;
  background: var(--porcelain); border: 1.5px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 650;
}
.theme-opt.on { border-color: var(--leaf); outline: 1.5px solid var(--leaf); }
.theme-opt .desc { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.swatches { display: flex; gap: 5px; flex: none; margin-left: 12px; }
.swatches span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

/* ---- photo attachments ---- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-ctl); border: 1px solid var(--line); display: block;
}
.photo-btn {
  flex: none; width: 46px; border-radius: var(--radius-ctl);
  border: 1.5px solid var(--line); background: var(--porcelain); font-size: 1.1rem; cursor: pointer;
}

/* ================= Tiptari One platform additions ================= */
.urgent-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #A63D3D; color: #fff; padding: 10px 14px; margin: 0 0 12px;
  border-radius: var(--radius-ctl); font-size: .9rem;
}
.ack-mini { background: #fff; color: #A63D3D; border: none; border-radius: 8px;
  padding: 6px 12px; font-weight: 700; cursor: pointer; }
.ann-urgent { border-left: 4px solid #A63D3D; border-radius: 0; }
.progress { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 8px 0 4px; }
.progress span { display: block; height: 100%; background: var(--leaf); }
.stream-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 6px 0; }
.insight-cols { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.ws-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.ws-head { font-size: .7rem; letter-spacing: 1px; color: var(--muted); }
.ws-link { font-size: .82rem; color: var(--leaf); text-decoration: none; padding: 3px 4px; border-radius: 6px; }
.ws-link:hover { background: var(--porcelain); }
.desktop-only { display: none !important; }

/* ---------- Desktop: sidebar layout for PC/laptop roles ---------- */
@media (min-width: 900px) {
  .desktop-only { display: flex !important; }
  .ws-slot.desktop-only { display: block !important; }
  body { padding-bottom: 0; }
  .bottomnav {
    top: 0; bottom: 0; left: 0; right: auto; width: 220px;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 18px 12px; gap: 4px; border-top: none; border-right: 1px solid var(--line);
  }
  .bottomnav a { flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius-ctl); font-size: .95rem; }
  .bottomnav a i { font-size: 1.15rem; }
  .bottomnav a.on { background: var(--porcelain); }
  #app, .topbar-wrap, main { margin-left: 220px; }
  #app { max-width: 960px; padding: 20px 32px 40px; }
  .insight-cols { grid-template-columns: 1fr 1fr; }
  .composer { left: 220px; }
}

/* ---------- demo PIN gate ---------- */
.pin-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.pin-card { text-align: center; padding: 36px 30px; background: var(--card, #fff);
  border: 1px solid var(--line); border-radius: 18px; width: min(340px, 90vw); }
.pin-logo { font-family: Georgia, serif; font-size: 1.3rem; color: var(--leaf);
  letter-spacing: 1px; margin-bottom: 4px; }
.pin-logo span { color: var(--oolong); }
.pin-title { color: var(--muted); font-size: .95rem; margin: 6px 0 18px; }
.pin-input { width: 200px; text-align: center; font-size: 1.7rem; letter-spacing: .5em;
  padding: 10px 0 10px .5em; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--porcelain, #F5F1E6); color: var(--ink, #17241C); }
.pin-input:focus { outline: none; border-color: var(--leaf); }
.pin-msg { color: #A63D3D; font-size: .85rem; min-height: 1.2em; margin-top: 10px; }
.pin-hint { color: var(--muted); font-size: .78rem; margin-top: 14px; }

/* ================= v0.9: directory · equipment · markup · translate ================= */
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--leaf);
  color: var(--porcelain, #F5F1E6); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; flex: none; }
.facet-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.facet-row select { flex: 1; min-width: 120px; font-size: .85rem; padding: 7px 8px; }
.dm-img { max-width: min(240px, 70vw); border-radius: 10px; display: block; margin: 4px 0; }
.tr-link { border: none; background: transparent; color: var(--oolong); font-size: .78rem;
  padding: 2px 0; cursor: pointer; display: block; text-align: inherit; }
.tr-note { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.composer #dmphoto { border: none; background: transparent; font-size: 1.2rem; cursor: pointer; }
.mk-wrap { position: fixed; inset: 0; background: rgba(23,36,28,.82); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 14px; }
.mk-card { background: var(--card, #fff); border-radius: 16px; padding: 14px;
  max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; gap: 10px; }
.mk-title { font-weight: 700; color: var(--leaf); }
.mk-card canvas { max-width: 100%; max-height: 68vh; border-radius: 10px;
  border: 1px solid var(--line); touch-action: none; }
.mk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-colors { display: flex; gap: 6px; }
.mk-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.mk-color.on { border-color: var(--ink, #17241C); transform: scale(1.12); }
.mk-tool { border: 1px solid var(--line); background: var(--porcelain, #F5F1E6);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: .85rem; }
.mk-cancel { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 8px 10px; }
.mk-send { background: var(--leaf); color: var(--porcelain, #F5F1E6); border: none;
  border-radius: 10px; padding: 9px 22px; font-weight: 700; cursor: pointer; }

/* ================= v0.10: digest · checklists · delegation ================= */
.digest-card { border-left: 3px solid var(--leaf); border-radius: 0; }
.digest-bits { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; }
.digest-bits a { text-decoration: none; }
.ck-item.ck-done { background: var(--porcelain, #F5F1E6); }
.ck-tick { width: 30px; height: 30px; border-radius: 50%; flex: none; cursor: pointer;
  border: 2px solid var(--line); background: transparent; font-weight: 700; color: #fff; }
.ck-tick.on { background: var(--green, #6E9A46); border-color: var(--green, #6E9A46); }
.ckb-row { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ckb-row:last-child { border-bottom: none; }
.ckb-head { background: var(--porcelain, #F5F1E6); font-weight: 700; font-size: .75rem;
  letter-spacing: .5px; color: var(--muted); }
.ckb { text-align: center; font-weight: 700; font-size: .82rem; border-radius: 8px; padding: 3px 0; }
.ckb-ok { color: var(--green, #6E9A46); }
.ckb-part { color: var(--oolong); }
.ckb-zero { color: #A63D3D; }
.ckb-none { color: var(--muted); }

/* ================= v0.11: activity timeline · launch pipeline ================= */
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.act-chip { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 99px;
  padding: 5px 12px; font-size: .8rem; cursor: pointer; color: var(--ink, #17241C); }
.act-chip span { color: var(--muted); margin-left: 2px; }
.act-chip.on { background: var(--leaf); color: var(--porcelain, #F5F1E6); border-color: var(--leaf); }
.act-chip.on span { color: inherit; opacity: .75; }
.act-card { padding: 4px 14px 10px; }
.act-day { font-size: .72rem; letter-spacing: 1px; color: var(--muted); text-transform: uppercase;
  margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.act-row { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.act-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: .85rem; color: #fff; }
.act-body { flex: 1; min-width: 0; font-size: .9rem; }
.pipe { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 4px 0 10px; }
.pipe-node { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 3px; padding: 10px 6px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card, #fff); opacity: .6; }
.pipe-node.done { opacity: 1; border-color: #6E9A46; }
.pipe-node.cur { opacity: 1; border: 1.5px solid var(--oolong); box-shadow: 0 0 0 3px rgba(196,118,42,.12); }
.pipe-node.rej { opacity: 1; border-color: #A63D3D; }
.pipe-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; border: 2px solid var(--line); font-size: .85rem; }
.pipe-node.done .pipe-dot { background: #6E9A46; border-color: #6E9A46; color: #fff; }
.pipe-node.cur .pipe-dot { border-color: var(--oolong); color: var(--oolong); }
.pipe-node.rej .pipe-dot { border-color: #A63D3D; color: #A63D3D; }
.pipe-sub { font-size: .7rem; color: var(--muted); }
.pipe-arrow { align-self: center; color: var(--muted); flex: none; }

/* version stamp (login footer + desktop sidebar) */
.ver-foot { text-align: center; color: var(--muted); font-size: .72rem; margin: 18px 0 6px; letter-spacing: .5px; }
.ver-tag { font-size: .68rem; color: var(--muted); padding: 10px 12px 0; letter-spacing: .5px; }

/* ================= v0.12: admin console ================= */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.adm-tab { padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none;
  color: var(--ink); font-size: .85rem; background: var(--porcelain); }
.adm-tab.on { background: var(--leaf); color: var(--cream); border-color: var(--leaf); }
.adm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.adm-bar input[type=text] { flex: 1; min-width: 200px; }
.adm-bar select { width: auto; min-width: 150px; }
.adm-table { width: 100%; border-collapse: collapse; background: var(--porcelain); border-radius: var(--radius);
  overflow: hidden; font-size: .88rem; margin: 6px 0 12px; }
.adm-table th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--line) 35%, var(--porcelain)); }
.adm-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-row { cursor: pointer; }
.adm-row:hover td { background: color-mix(in srgb, var(--leaf) 5%, var(--porcelain)); }
.adm-row.off td, .card.off, .adm-steps li.off { opacity: .55; }
.bad-row td, .card.bad-row { background: color-mix(in srgb, var(--berry) 6%, var(--porcelain)); }
.adm-modal { position: fixed; inset: 0; background: rgba(23,36,28,.5); z-index: 400; display: flex;
  align-items: flex-start; justify-content: center; padding: 6vh 14px; overflow-y: auto; }
.adm-card { background: var(--porcelain); border-radius: var(--radius); padding: 18px 20px; width: min(720px, 100%);
  box-shadow: var(--shadow); }
.adm-x { border: none; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.adm-form input[type=number], .adm-form input[type=date] { width: 100%; padding: 12px 13px; font-size: .95rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-ctl); background: var(--porcelain); color: var(--ink); font-family: inherit; }
.adm-form .bad { border-color: var(--berry) !important; }
.adm-fielderr { color: var(--berry); font-size: .76rem; margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.adm-err { color: var(--berry); font-size: .85rem; min-height: 1em; margin-top: 8px; }
.adm-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0;
  font-size: .88rem; font-weight: 500; color: var(--ink); margin: 10px 0; }
.adm-check input { width: auto; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-picklist { max-height: 55vh; overflow-y: auto; columns: 2 260px; }
.adm-picklist .adm-check { break-inside: avoid; margin: 6px 0; }
.adm-steps { margin: 10px 0 0; padding-left: 22px; }
.adm-steps li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.adm-steps li:last-child { border-bottom: none; }
.adm-steptext { display: inline-block; max-width: 60%; }
.adm-stepbtns { float: right; display: flex; gap: 4px; }
.adm-mini { border: 1px solid var(--line); background: var(--porcelain); border-radius: 8px; padding: 3px 8px;
  font-size: .78rem; cursor: pointer; color: var(--ink); }
.adm-mini:disabled { opacity: .35; cursor: default; }
.adm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.adm-link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--porcelain); }
a.ghost, .adm-link { display: inline-block; padding: 10px 14px; border-radius: var(--radius-ctl); border: 1.5px solid var(--leaf);
  color: var(--leaf); font-weight: 700; font-size: .82rem; text-decoration: none; background: transparent; }
.adm-save { background: var(--btn-bg) !important; color: var(--btn-fg) !important; border-color: var(--btn-bg) !important; }
.adm-go:not(:disabled) { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.adm-go:disabled { opacity: .45; cursor: default; }
/* v1.11: Admin → AI */
.ai-engine input[type=password], .ai-engine input[type=url] { width: 100%; padding: 12px 13px; font-size: .95rem;
  color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); background: var(--porcelain);
  font-family: inherit; }
.ai-hint { margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; overflow-wrap: anywhere; }
.ai-engine .row1 > span { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ai-result:empty { display: none; }
.adm-json { white-space: pre-wrap; font-size: .75rem; background: color-mix(in srgb, var(--line) 30%, var(--porcelain));
  padding: 8px; border-radius: 8px; max-height: 260px; overflow: auto; }

/* ---------------- v0.13: sign-in, invites ---------------- */
.login-hero { text-align: center; margin: 28px 0 18px; }
.login-brand { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 1.5rem; color: var(--leaf); }
.login-brand span { color: var(--oolong); }
.login-brand.small { font-size: .8rem; margin-bottom: 4px; }
.login-hero .sub { margin-top: 8px; white-space: normal; }
.login-err { border-left: 4px solid var(--berry); color: var(--berry); font-weight: 600; }
.persona.sso { display: flex; align-items: center; gap: 12px; cursor: pointer; color: inherit; text-decoration: none; }
.adm-signin .chip { margin: 0 2px 2px 0; }
.invite-card { max-width: 420px; }
.invite-qr { display: flex; justify-content: center; margin: 10px 0; }
.invite-qr svg { width: 180px; height: 180px; background: #fff; border-radius: 10px; padding: 6px; }
.invite-url { width: 100%; font-size: .78rem; }
.invite-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.invite-slip { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--line);
  border-radius: 12px; padding: 12px; background: var(--porcelain); break-inside: avoid; }
.invite-slip .invite-qr { margin: 0; }
.invite-slip .invite-qr svg { width: 120px; height: 120px; padding: 0; }
.invite-slip p { font-size: .8rem; margin: 6px 0; white-space: normal; }
@media print {
  .topbar, .bottomnav, .adm-tabs, .noprint, .adm > h1, #app > h1, #app > .sub, .toast { display: none !important; }
  body, #app { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  .invite-sheet { grid-template-columns: 1fr 1fr; gap: 8px; }
  .invite-slip { border-color: #999; color: #000; }
}

/* ================= v0.14: notification bell · center · System tab ================= */
.top-right { display: flex; align-items: center; gap: 12px; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: var(--topbar-fg); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--topbar-fg) 25%, transparent); flex: none; }
.bell:hover { background: color-mix(in srgb, var(--topbar-fg) 10%, transparent); }
.bell-n { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--berry); color: #fff; font-size: .68rem; font-weight: 800;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--topbar-bg); }
.bell-n[hidden] { display: none; }
.ntf { display: block; text-decoration: none; color: inherit; }
.ntf.unread { border-left: 4px solid var(--oolong); }
.ntf.unread b { font-weight: 800; }
.ntf.urgent { border-left-color: var(--berry); }
.ntf .row1 b { font-size: .92rem; }
.ntf-body { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.push-card .adm-bar button { flex: none; }
.sys-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
@media (min-width: 700px) { .sys-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sys-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sys-comp { display: flex; gap: 10px; align-items: flex-start; }
.sys-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--muted); }
.sys-dot.ok { background: var(--matcha, #6E9A46); }
.sys-dot.bad { background: var(--berry); box-shadow: 0 0 0 4px color-mix(in srgb, var(--berry) 20%, transparent); }
.sys-dot.na { background: var(--line); }
.adm-table [data-run] { white-space: nowrap; }

/* ---- v1.0: pilot scorecard, readiness, feedback, help ---- */
.helpbtn { font-weight: 800; font-size: 1rem; text-decoration: none; }
.pl-demo { border-left: 4px solid var(--oolong); font-size: .85rem; color: var(--oolong); }
.pl-head { font-size: .92rem; }
.pl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
@media (min-width: 900px) { .pl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1300px) { .pl-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pl-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-card.pl-behind { border-top: 3px solid var(--berry); }
.pl-card.pl-ok { border-top: 3px solid var(--matcha, #6E9A46); }
.pl-crit { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pl-crit span { text-transform: none; letter-spacing: 0; }
.pl-measure { font-weight: 650; line-height: 1.35; }
.pl-row { display: flex; align-items: center; gap: 14px; }
.pl-big { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; min-width: 3.2ch; }
.pl-behind .pl-big { color: var(--berry); }
.pl-ok .pl-big { color: var(--matcha, #6E9A46); }
.pl-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; margin-top: 4px; }
.pl-bar { flex: 1; max-width: 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
          align-items: center; position: relative; padding-bottom: 14px; box-sizing: border-box; }
.pl-bar span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--line); }
.pl-bar span.ok { background: var(--matcha, #6E9A46); }
.pl-bar span.low { background: var(--berry); }
.pl-bar i { position: absolute; bottom: 0; font-style: normal; font-size: .62rem; color: var(--muted); }
.pl-details summary { cursor: pointer; font-size: .85rem; color: var(--leaf); font-weight: 650; }
.pl-miss { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; max-height: 220px; overflow: auto; }
.pl-miss a { color: var(--leaf); font-weight: 650; }
.pl-table-wrap { overflow-x: auto; }
.pl-table td { white-space: nowrap; }
.ap-checks { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 4px; }
@media (min-width: 900px) { .ap-checks { grid-template-columns: 1fr 1fr; } }
.ap-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; }
.ap-pick .meta-line { width: 100%; }
.bad-cell { color: var(--berry); font-weight: 700; }
.fb-photo { max-width: 160px; max-height: 120px; border-radius: 8px; display: block; margin-bottom: 8px; }
.fb-reply { background: color-mix(in srgb, var(--leaf) 8%, var(--porcelain)); border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
.help-card summary { cursor: pointer; }
.help-card ol { margin: 8px 0 0; padding-left: 20px; }
.help-card li { margin: 4px 0; }

.tb-short { display: none; }
@media (max-width: 520px) {
  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .topbar .brand { letter-spacing: .06em; }
  .theme-btn { padding: 5px 9px; }
  .tb-full { display: none; }
  .tb-short { display: inline; font-size: .8rem; }
  .top-right { gap: 8px; min-width: 0; }
  .topbar .helpbtn { display: none; }          /* phones: Help sits at the foot of home */
  .topbar .who { min-width: 0; max-width: 128px; }
  .topbar .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.help-link { display: block; text-align: center; margin: 22px 0 8px; font-size: .85rem; font-weight: 650;
  color: var(--leaf); text-decoration: none; }
.pl-table a { color: var(--leaf); text-decoration: none; }

/* ---- v1.1: LINE ---- */
.line-card { border-left: 4px solid #06C755; }
.line-add { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.line-qr { width: 132px; height: 132px; background: #fff; border-radius: 10px; padding: 6px; flex: none; }
.line-qr svg { width: 100%; height: 100%; }
a.line-btn { display: inline-block; background: #06C755; color: #fff; border-radius: 12px; padding: 10px 16px;
  font-weight: 700; text-decoration: none; }
.line-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 4px; }
.line-meter span { display: block; height: 100%; background: #06C755; }
.line-meter span.hot { background: var(--oolong); }

/* ---- v1.2: visits, permit letters, weekly reports ---- */
.visit-card { display: block; text-decoration: none; color: inherit; }
.visit-person { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.visit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.visit-actions .primary { width: auto; }
.letter { background: #fff; color: #111; max-width: 760px; margin: 18px auto; padding: 40px 48px; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.12); font-size: .95rem; line-height: 1.6; page-break-after: always; }
.letter-head { border-bottom: 2px solid #222; padding-bottom: 10px; margin-bottom: 16px; }
.letter-head b { font-size: 1.15rem; }
.letter-date { text-align: right; }
.letter h3 { text-align: center; margin: 18px 0; }
.letter-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.letter-table th, .letter-table td { border: 1px solid #999; padding: 8px 10px; text-align: left; vertical-align: top; }
.letter-table th { width: 30%; background: #f3f3f3; }
.letter-sign { margin-top: 36px; text-align: right; }
@media print { .letter { box-shadow: none; margin: 0; max-width: none; border-radius: 0; } body { background: #fff; } }
@media (max-width: 520px) { .letter { padding: 22px 16px; font-size: .9rem; } }
.rep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
@media (min-width: 900px) { .rep-grid { grid-template-columns: repeat(4, 1fr); } }
.rep-num { margin: 0; }
.rep-num .pl-big { font-size: 1.6rem; }
.rep-num.bad .pl-big { color: var(--berry); }
.rep-cases .rc-no { white-space: nowrap; }
.rep-cases .rc-sub { display: none; }
@media (max-width: 520px) {            /* a phone: number (with its branch), what, where it stands */
  .rep-cases .rc-branch, .rep-cases .rc-when { display: none; }
  .rep-cases .rc-sub { display: block; }
}

/* ---- v1.3: equipment — condition, repair-or-replace, the quarterly check, QR labels, scan audit ---- */
.seg.two { grid-template-columns: 1fr 1fr; }
.eq-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.chip.cond-GOOD           { background: color-mix(in srgb, var(--matcha) 16%, var(--porcelain)); color: var(--matcha); }
.chip.cond-ATTENTION      { background: color-mix(in srgb, var(--oolong) 15%, var(--porcelain)); color: var(--oolong); }
.chip.cond-POOR           { background: color-mix(in srgb, var(--berry) 14%, var(--porcelain)); color: var(--berry); }
.chip.cond-OUT_OF_SERVICE { background: var(--berry); color: #fff; }
.chip.cond-NONE           { background: color-mix(in srgb, var(--muted) 10%, var(--porcelain)); color: var(--muted); }
.chip.risk-WATCH   { background: color-mix(in srgb, var(--oolong) 15%, var(--porcelain)); color: var(--oolong); border-color: var(--oolong); }
.chip.risk-REPLACE { background: var(--berry); color: #fff; }
button.chip { cursor: pointer; font-family: inherit; }
.eq-why { color: var(--oolong); margin-top: 2px; }
.eq-riskcard { border-left: 4px solid var(--oolong); }
.eq-actions { margin: 4px 0 10px; }
.eq-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.eq-btns button, .eq-btns a { width: auto; margin: 0; }
.eq-btns .danger { color: var(--berry); border-color: var(--berry); }
.eq-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.eq-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.eq-home .row1 a { color: inherit; text-decoration: none; }
.eq-home .adm-link { margin-top: 8px; padding: 6px 12px; font-size: .85rem; }
.chk-item .chk-cond { margin: 8px 0 6px; }
.chk-item .chk-cond button { font-size: .75rem; padding: 8px 4px; }
.chk-row { display: flex; gap: 8px; align-items: center; }
.chk-row .chk-note { flex: 1; min-width: 0; font-size: .85rem; }
.chk-photo { cursor: pointer; padding: 8px 12px; white-space: nowrap; font-size: .85rem; border-radius: var(--radius-ctl);
  border: 1.5px solid var(--leaf); color: var(--leaf); font-weight: 650; }
.chk-photo.ok { background: color-mix(in srgb, var(--matcha) 16%, var(--porcelain)); border-color: var(--matcha); color: var(--matcha); }
#chksend { margin-top: 10px; }
#audvideo { width: 100%; max-height: 280px; border-radius: 10px; margin-top: 8px; background: #000; object-fit: cover; }
.aud-FOUND b { color: var(--matcha); }
.aud-ELSEWHERE b { color: var(--oolong); }
.aud-UNKNOWN b { color: var(--berry); }
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.qr-label { display: flex; gap: 10px; align-items: center; border: 1px dashed var(--line); border-radius: 10px;
  padding: 10px; background: #fff; color: #111; break-inside: avoid; page-break-inside: avoid; }
.qr-code { width: 96px; height: 96px; flex: none; }
.qr-code svg { width: 100%; height: 100%; }
.qr-text { font-size: .8rem; line-height: 1.3; min-width: 0; }
.qr-text b { font-size: .95rem; letter-spacing: .02em; }
.qr-en, .qr-br { color: #555; }
.qr-brand { color: #999; font-size: .68rem; margin-top: 3px; }
@media print {
  .qr-sheet { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .qr-label { border-color: #bbb; border-radius: 3mm; padding: 3mm; }
  .qr-code { width: 24mm; height: 24mm; }
}
.eqt-table .adm-row { cursor: pointer; }
.eqt-table .adm-row.off { opacity: .5; }

/* ---- v1.4: maintenance schedules, vendors, claims ---- */
.mt-task .mt-due { margin: 6px 0 2px; }
.mt-task.mt-late, .mt-home.mt-late { border-left: 4px solid var(--berry); }
.mt-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mt-btns .mt-done { width: auto; padding: 8px 16px; margin: 0; }
.mt-tabs { margin-bottom: 8px; }
.mt-comp td.bad { color: var(--berry); font-weight: 700; }
.mt-rate { min-width: 130px; white-space: nowrap; }
.mt-bar { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden;
  vertical-align: middle; margin-right: 6px; }
.mt-bar span { display: block; height: 100%; background: var(--matcha); }
.mt-plan.off { opacity: .55; }
.mt-plan .adm-mini { margin-top: 6px; }
a.mt-home { display: block; text-decoration: none; color: inherit; }
.vd-case select { margin-top: 6px; }
.vd-ct .adm-mini { margin-top: 6px; }
.vd-multi { width: 100%; font-size: .85rem; }

/* ---- v1.5: people — recognition, skills, certificates, help between branches ---- */
.chip.pp-flag { background: color-mix(in srgb, var(--oolong) 16%, var(--porcelain)); color: var(--oolong); }
.chip.pp-tag  { background: color-mix(in srgb, var(--matcha) 18%, var(--porcelain)); color: var(--leaf); }
.pp-rec .chips { margin: 0; }
.pp-rec p { white-space: pre-wrap; }
.pp-skills td { vertical-align: middle; }
.pp-skills tr.pp-cat td { padding-top: 12px; border-bottom: 1px solid var(--line); }
.pp-skills td.pp-act { text-align: right; white-space: nowrap; }
.pp-skills .pp-set { width: auto; min-width: 120px; padding: 4px 8px; font-size: .82rem; }
.chip.pp-lvl.lvl-LEARNING  { background: color-mix(in srgb, var(--info) 14%, var(--porcelain)); color: var(--info); }
.chip.pp-lvl.lvl-CAPABLE   { background: color-mix(in srgb, var(--matcha) 20%, var(--porcelain)); color: var(--leaf); }
.chip.pp-lvl.lvl-CAN_TRAIN { background: var(--leaf); color: var(--porcelain); }
.chip.pp-lvl.pending { outline: 1.5px dashed currentColor; outline-offset: -1px; opacity: .8; }
.pp-ok { color: var(--leaf); font-weight: 650; }
.pp-today.now { border-left: 4px solid var(--matcha); }
.pp-today .primary, .pp-today .ghost { width: auto; margin-top: 8px; padding: 10px 18px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pp-tagpick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-size: .85rem; cursor: pointer; }
.pp-tagpick input { width: auto; margin: 0; }
.pp-pick { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 8px; }
.pp-pickrow { text-align: left; background: var(--porcelain); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; cursor: pointer; color: inherit; font: inherit; }
.linkish { background: none; border: none; color: var(--oolong); padding: 0; cursor: pointer; font: inherit;
  text-decoration: underline; width: auto; margin: 0; }
.pp-helper.off, .pp-cands tr.off, .pp-ref tr.off { opacity: .55; }
.pp-export { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pp-export input[type=month] { max-width: 190px; margin: 0; }
a.pp-home, a.pp-person, a.pp-cv, a.pp-helped { display: block; text-decoration: none; color: inherit; }
.pp-cands td { vertical-align: top; }
.pp-ret input { max-width: 140px; display: block; margin-top: 4px; }

/* ================= v1.6: stock — catalogue · warehouse · orders · counts · waste ================= */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.st-kpis .card { margin: 0; padding: 10px 12px; }
.st-kpis b { font-size: 1.2rem; display: block; margin-top: 2px; }
.st-warn { color: var(--berry); }
.st-table .num, .adm-table td.num { text-align: right; white-space: nowrap; }
.st-table th.num { text-align: right; }
.st-table tr.st-low td { background: color-mix(in srgb, var(--berry) 5%, var(--porcelain)); }
.adm-table tr.off td { opacity: .55; }
.st-seg { display: inline-grid; grid-template-columns: repeat(4, auto); gap: 4px; }
.st-seg button { padding: 7px 10px; }
.row1 .st-seg { grid-template-columns: repeat(3, auto); }
.st-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.st-actions .st-act { margin: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: .95rem; text-align: left;
  cursor: pointer; color: var(--ink); font-family: inherit; }
button.st-act { border: 1px solid var(--line); background: var(--porcelain); }
.st-item.below, .st-orow.below { border-left: 3px solid var(--berry); }
.st-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; margin: 4px 0; }
.st-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); margin: 6px 0; }
.st-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--matcha); }
.st-bar .fill.low { background: var(--berry); }
.st-bar .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .45; }
.st-trf.urgent, .st-home.urgent { border-left: 3px solid var(--oolong); }
.st-note { background: color-mix(in srgb, var(--oolong) 7%, var(--porcelain)); }
.st-note.urgent { background: color-mix(in srgb, var(--berry) 9%, var(--porcelain)); }
.st-steps { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 8px 0 12px; padding-bottom: 2px; }
.st-step { display: flex; flex-direction: column; flex: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--porcelain); font-size: .8rem; }
.st-qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.st-qty input { width: 96px; padding: 9px 10px; font-size: 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--porcelain); color: var(--ink); text-align: right; }
.st-qty .adm-mini { min-width: 38px; padding: 8px 10px; font-size: 1rem; }
.st-in { width: 84px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--porcelain);
  color: var(--ink); text-align: right; font-size: .9rem; }
.st-sticky { position: sticky; bottom: 70px; display: flex; align-items: center; gap: 12px; background: var(--cream);
  padding: 10px 0; z-index: 5; }
@media (min-width: 700px) { .st-sticky { bottom: 0; } }
.st-sticky .primary { margin: 0; flex: 1; }
.st-sticky span { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.st-more summary { cursor: pointer; font-weight: 700; margin: 10px 0; color: var(--muted); }
.st-acts { align-items: flex-end; }
.st-acts label { margin: 0; }
.st-acts input[type=date], .st-period input[type=date] { padding: 8px; border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--porcelain); color: var(--ink); }
.st-period label { margin: 0; }
.st-photo-img { max-width: 220px; border-radius: 10px; margin: 6px 0; display: block; }
.st-itemhead { display: flex; gap: 14px; align-items: flex-start; }
.st-itemhead img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.st-lotrow { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.st-lotrow:last-child { border-bottom: 0; }
.st-cols { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 900px) { .st-cols { grid-template-columns: 1fr 1fr; } }
.st-days { gap: 4px 12px; }
.adm-link-chip.off { opacity: .5; }
.st-trf input[type=checkbox] { width: auto; }
.st-rcv .st-qty label { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.st-rcv .st-qty label.adm-check { flex-direction: row; align-items: center; }
@media print { .st-sticky, .st-actions { display: none !important; } }
.st-body a:not(.card):not(.adm-link):not(.adm-tab):not(.adm-link-chip), .adm-table a:not(.adm-mini), .st-trf a, .st-issue a,
.st-lotrow a, .st-note a, .st-waste a, .meta-line a { color: var(--leaf); text-decoration: none; font-weight: 650; }
.adm-table a:not(.adm-mini):hover, .st-trf a:hover, .meta-line a:hover { text-decoration: underline; }
a.adm-link-chip { color: var(--ink); text-decoration: none; }
.st-limits .row1 { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.st-limits .row1:last-of-type { border-bottom: 0; }

/* ================= v1.7: purchasing · wholesale ================= */
.by-line .row1, .by-rcv .row1 { margin-top: 6px; }
.by-line .by-del { color: var(--berry); }
.by-line [hidden], .by-rcv [hidden] { display: none !important; }
.by-step { padding: 6px 0; border-bottom: 1px dashed var(--line); gap: 10px; flex-wrap: wrap; }
.by-step:last-of-type { border-bottom: 0; }
.by-step.on b { color: var(--oolong); }
.st-photo-thumb { max-width: 120px; max-height: 90px; object-fit: cover; border-radius: 8px; margin-top: 6px; display: block; }
.st-table td input.st-in + input.st-in { margin-top: 4px; }
.po-doc { font-size: .9rem; }
.po-doc h3 { letter-spacing: .5px; }
.po-head { display: flex; justify-content: space-between; gap: 12px; }
.po-meta th { width: 18%; font-size: .8rem; }
.po-lines th { font-size: .78rem; }
.po-lines .num, .po-lines th.num { text-align: right; white-space: nowrap; }
.po-lines .meta-line { color: #555; }
.po-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; text-align: center; font-size: .82rem; }
@media print { .po-doc { font-size: 10.5pt; padding: 0; } .po-doc .letter-table th, .po-doc .letter-table td { padding: 5px 7px; } }
.by-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.by-top h1, .by-top h2 { margin: 0; }
.by-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.by-seg .adm-tab { padding: 6px 12px; font-size: .85rem; }
.st-actions a.st-act, .st-actions button.ghost.st-act, .st-actions button.primary.st-act {
  border: 1px solid var(--line); background: var(--porcelain); border-radius: var(--radius-ctl); padding: 11px 14px;
  text-decoration: none; justify-content: center; width: auto; min-height: 44px; font-size: .9rem; letter-spacing: 0; }
.st-actions button.primary.st-act, .st-actions a.primary.st-act { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.st-actions .danger.st-act { color: var(--berry); border-color: var(--berry); }
.req-no a { color: var(--leaf); text-decoration: none; }
h1 > a { color: inherit; text-decoration: none; }
h1 > a:hover { text-decoration: underline; }
.po-doc { max-width: 900px; }
.po-lines td:nth-child(2), .po-lines td.num { white-space: nowrap; }
.po-lines td:nth-child(3) { min-width: 200px; }

/* ================= v1.8: branch operations ================= */
.card.urgent:not(.st-note):not(.st-home):not(.st-trf) { border-left: 3px solid var(--berry); }
.ops-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
@media (min-width: 760px) { .ops-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .ops-grid { grid-template-columns: 1fr 1fr 1fr; } }
.ops-tile { display: flex !important; gap: 12px; align-items: flex-start; margin: 0; }
.ops-ic { font-size: 1.5rem; line-height: 1; flex: none; width: 2rem; text-align: center; }
.ops-tile .meta-line { white-space: normal; margin-top: 3px; }
.ops-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ops-links a { display: inline-block; margin: 0; text-decoration: none; }
.ops-report { color: var(--berry); border-color: var(--berry); }
/* X3 the zone dashboard */
.zn-table { font-size: .84rem; }
.zn-table td, .zn-table th { vertical-align: top; }
.zn-table tr.adm-row { cursor: pointer; }
.zn-table .chip { font-size: .6rem; padding: 2px 6px; }
/* R3 raised items */
.rs-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 12px; }
.rs-line { display: block; font-size: .82rem; color: var(--oolong); font-weight: 650; text-decoration: none;
  padding: 7px 11px; border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--oolong) 9%, var(--porcelain)); }
.dm-channel { border-left: 3px solid var(--leaf); }
.dm-unread { background: var(--berry); color: #fff; border-radius: 99px; min-width: 22px; padding: 1px 7px; font-size: .72rem;
  font-weight: 800; text-align: center; }
.dm-seen { display: block; font-size: .66rem; opacity: .75; margin-top: 3px; text-align: right; cursor: default; }
.dm-raise { background: none; border: none; color: inherit; opacity: .45; cursor: pointer; font-size: .8rem; padding: 0 2px;
  float: right; margin-top: 2px; width: auto; min-height: 0; }
.dm-raise:hover { opacity: 1; }
.ann-task { color: var(--leaf); font-weight: 700; font-size: .8rem; text-decoration: none; }
/* R5 incidents */
.chipbtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chipbtn { width: auto; margin: 0; padding: 8px 12px; min-height: 40px; border-radius: 99px; border: 1.5px solid var(--line);
  background: var(--porcelain); color: var(--ink); font-weight: 650; font-size: .85rem; cursor: pointer; }
.chipbtn.on { background: var(--leaf); border-color: var(--leaf); color: var(--cream); }
.chipbtn.sev-HIGH.on { background: var(--oolong); border-color: var(--oolong); }
.chipbtn.sev-CRITICAL.on { background: var(--berry); border-color: var(--berry); color: #fff; }
#incwho { margin: 0 0 8px; font-weight: 650; color: var(--oolong); }
.inc-tl .tl-item { white-space: normal; }
/* R6 tasks */
.tk-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 760px) { .tk-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.tk-cell { margin: 0; }
.tk-cell .st-photo-img { max-width: 100%; max-height: 180px; object-fit: cover; }
.tk-pick { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 4px 10px 8px; }
.tk-pick .adm-check { margin: 4px 0; }
/* R4 store visits */
.sv-search { width: 100%; margin: 0 0 10px; }
.sv-branch .st-actions { margin-bottom: 0; }
.sv-running { bottom: 70px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--porcelain); }
@media (min-width: 700px) { .sv-running { bottom: 0; } }
.sv-q { border-left: 3px solid var(--line); }
.sv-q.done { border-left-color: var(--matcha); }
.sv-q.no { border-left-color: var(--berry); }
.sv-ans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.sv-ans button { margin: 0; min-height: 44px; border-radius: var(--radius-ctl); border: 1.5px solid var(--line); background: var(--porcelain);
  color: var(--ink); font-weight: 700; cursor: pointer; }
.sv-ans button.on.YES { background: var(--matcha); border-color: var(--matcha); color: #fff; }
.sv-ans button.on.NO { background: var(--berry); border-color: var(--berry); color: #fff; }
.sv-ans button.on.NA { background: var(--muted); border-color: var(--muted); color: #fff; }
.sv-more { margin-top: 10px; }
.sv-more input[type=text] { width: 100%; }
.sv-photos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sv-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.sv-pick { cursor: pointer; margin: 0; }
.sv-due { padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--porcelain); color: var(--ink); }
.sv-score > b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; display: block; }
.sv-sec { display: grid; grid-template-columns: 9.5rem 1fr 3.4rem; gap: 8px; align-items: center; font-size: .85rem; margin-top: 6px; }
.sv-sec b { text-align: right; }
.sv-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sv-bar span { display: block; height: 100%; background: var(--matcha); }
.sv-bar span.low { background: var(--berry); }
.sv-ansrow { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .85rem; }
.sv-ansrow:last-child { border-bottom: 0; }
.sv-trend .row1 { align-items: center; }
.sv-tbars { display: flex; gap: 4px; align-items: flex-end; height: 52px; flex: 1; justify-content: flex-end; }
.sv-tbar { width: 12px; border-radius: 3px 3px 0 0; background: var(--matcha); display: block; }
.sv-tbar.fail { background: var(--berry); }
/* X2 temperatures and the food-safety log */
.ck-temps { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ck-temp { display: grid; grid-template-columns: 1fr 96px; gap: 6px 10px; align-items: center; padding: 8px 10px;
  border-radius: var(--radius-ctl); background: var(--cream); border: 1px solid var(--line); }
.ck-temp.ok { border-color: var(--matcha); }
.ck-temp.out { border-color: var(--berry); background: color-mix(in srgb, var(--berry) 7%, var(--porcelain)); }
.ck-temps.done .ck-temp { grid-template-columns: 1fr auto; font-size: .85rem; }
.ck-temp-val { width: 96px; padding: 9px 10px; font-size: 1.05rem; text-align: right; border: 1.5px solid var(--line);
  border-radius: var(--radius-ctl); background: var(--porcelain); color: var(--ink); }
.ck-temp-act { grid-column: 1 / -1; width: 100%; }
.ck-temp-save { margin: 2px 0 0; }
.ck-therm { display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; cursor: default; }
.fs-day .row1 { margin-bottom: 4px; }
.fs-day.partial { border-left: 3px solid var(--oolong); }
.fs-read { display: grid; grid-template-columns: 3.6rem 1fr auto 1.4rem; gap: 4px 10px; padding: 4px 0; font-size: .85rem;
  border-bottom: 1px dashed var(--line); }
.fs-read:last-child { border-bottom: 0; }
.fs-read.out { color: var(--berry); }
.fs-read .meta-line { grid-column: 1 / -1; }
@media print {
  #app > .sub.fs-print { display: block !important; }
  .fs-day { break-inside: avoid; box-shadow: none; }
  details.noprint { display: none !important; }
}
.dt-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 10px; align-items: end; }
.adm-form input[type=time], .adm-form input[type=month], .by-top input[type=month], .by-top select, input[type=search].sv-search {
  width: 100%; padding: 11px 12px; font-size: .95rem; border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--porcelain); color: var(--ink); font-family: inherit; }
.by-top input[type=month], .by-top select { width: auto; padding: 8px 10px; font-size: .88rem; }
.card.row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card.row1 > b:last-child, .card.row1 > span:last-child { text-align: right; flex: none; }
.fs-gap { font-size: .8rem; color: var(--muted); padding: 8px 14px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: var(--radius); }
.fs-outrow { border-left: 3px solid var(--berry); }
.zn-all td:first-child { min-width: 11rem; }
.zn-all td:nth-child(2) { min-width: 10rem; }
.zn-table td:first-child { min-width: 10rem; }
.sv-trend .card.row1 { align-items: center; }
.rt-table td, .rt-table th { text-align: center; }
.rt-table td:first-child, .rt-table th:first-child { text-align: left; }
.kv a, .card.row1 > a, .card.row1 > span > a { color: var(--leaf); text-decoration: none; font-weight: 650; }
.kv a:hover, .card.row1 > a:hover { text-decoration: underline; }
.kv .status { font-size: .66rem; padding: 2px 8px; }
.zn-one td.num, .zn-one th.num { white-space: normal; }
.zn-one td { font-size: .84rem; }
.zn-one th .meta-line { text-transform: none; letter-spacing: 0; font-weight: 500; }
.zn-one td .chip { margin-top: 3px; display: inline-block; }
.zn-one td.num { min-width: 4.6rem; }
.zn-one td:first-child { min-width: 9rem; }

/* =====================================================================
   v1.13 — the look: one typeface pair, a calmer surface, the new shell
   (sidebar groups on desktop; tab bar + "More" on phones; profile menu)
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/noto-sans-thai-thai-wght-normal.woff2) format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --sidebar-w: 264px;
  --surface: color-mix(in srgb, var(--porcelain) 70%, var(--cream));
  --hover: color-mix(in srgb, var(--leaf) 7%, transparent);
  --sel: color-mix(in srgb, var(--leaf) 11%, var(--porcelain));
  --shadow-lg: 0 10px 30px -8px rgba(20, 10, 10, .22), 0 2px 8px rgba(20, 10, 10, .08);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body { font-family: "Inter", "Noto Sans Thai", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-feature-settings: "cv11", "ss01"; line-height: 1.5; letter-spacing: -.005em; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 4px; }
h2 { letter-spacing: .06em; }
.sub { font-size: .88rem; line-height: 1.5; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--btn-bg) 22%, transparent); }

/* surfaces */
.card { border-color: color-mix(in srgb, var(--line) 85%, transparent); padding: 16px 18px; margin-bottom: 12px;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
a.card:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--leaf) 25%, var(--line)); transform: translateY(-1px); }
a.card:active { transform: translateY(0) scale(.995); }
.chip { text-transform: none; letter-spacing: .01em; font-weight: 650; font-size: .72rem; padding: 3px 10px; }
.status { letter-spacing: .02em; border-radius: 999px; padding: 4px 11px; }
.kpi { box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .n { letter-spacing: -.02em; }

/* controls */
button.primary { border-radius: var(--radius-ctl); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 8px -2px color-mix(in srgb, var(--btn-bg) 55%, transparent);
  transition: filter .15s, transform .1s; }
button.primary:hover:not(:disabled) { filter: brightness(1.07); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.ghost { transition: background .15s; }
button.ghost:hover { background: var(--hover); }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=time], input[type=email],
textarea, select { transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf-soft) 35%, transparent); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--leaf-soft); outline-offset: 2px; }

/* a screen arrives softly */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#app > *:not(.topbar):not(.bottomnav) { animation: rise .28s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #app > * { animation: none !important; } }

/* ---- top bar ---- */
.topbar { padding: 10px 16px; gap: 10px; min-height: 58px; }
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; letter-spacing: .1em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-grid; place-items: center;
  font: 800 .95rem/1 Georgia, serif; letter-spacing: 0; color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--steep) 80%, transparent), 0 2px 6px rgba(0,0,0,.18); }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 11px;
  transition: background .15s; }
.theme-btn:hover { background: color-mix(in srgb, var(--topbar-fg) 12%, transparent); }
.theme-btn .ic { width: 16px; height: 16px; }
.bell .ic { width: 20px; height: 20px; }
.helpbtn { font-weight: 400; }
.top-right { gap: 8px; }
.topbar .who { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 4px 4px 4px 10px; border-radius: 999px; font: inherit; font-size: .78rem; text-align: right; transition: background .15s; }
.topbar .who:hover { background: color-mix(in srgb, var(--topbar-fg) 10%, transparent); }
.who-text { display: flex; flex-direction: column; line-height: 1.25; opacity: .9; min-width: 0; }
.who-text b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-weight: 750; font-size: .78rem; color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--topbar-fg) 30%, transparent); }
.who-av.big { width: 46px; height: 46px; font-size: .95rem; box-shadow: none; }
@media (max-width: 520px) {
  .who-text, .brand-word { display: none; }
  .topbar .who { padding: 2px; }
}

/* ---- navigation: phones (tab bar) ---- */
.bottomnav { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); align-items: stretch;
  background: color-mix(in srgb, var(--porcelain) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 -6px 24px -12px rgba(0,0,0,.18); }
.bottomnav .nav-tabs, .nav-brand, .nav-new, .nav-groups, .nav-foot { display: none; }
.nav-phone { display: flex; width: 100%; justify-content: space-around; align-items: flex-end; }
.bottomnav .nav-a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 4px; color: var(--muted); text-decoration: none; font-size: .66rem; font-weight: 650; letter-spacing: .01em;
  text-transform: none; border: 0; background: none; font-family: inherit; cursor: pointer; border-radius: 12px; }
.bottomnav .nav-a .ic { width: 23px; height: 23px; }
.bottomnav .nav-a.on { color: var(--leaf); }
.bottomnav .nav-a.on .ic { stroke-width: 2.2; }
.nav-phone .nav-a span:not(.nav-n) { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-fab { flex: 0 0 auto !important; }
.nav-fab .ic { width: 26px !important; height: 26px !important; }
.bottomnav .nav-fab { width: 54px; height: 54px; margin: -22px 6px 2px; border-radius: 50%; padding: 0; justify-content: center;
  color: var(--btn-fg); background: var(--btn-bg); box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--btn-bg) 70%, transparent),
  0 0 0 4px var(--cream); }
.nav-n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--berry); color: #fff; font-size: .62rem; font-weight: 750; line-height: 17px; text-align: center; }
.nav-n[hidden] { display: none; }

/* ---- navigation: desktop (sidebar) ---- */
@media (min-width: 900px) {
  .bottomnav { width: var(--sidebar-w); padding: 14px 12px 16px; gap: 2px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--porcelain); backdrop-filter: none; box-shadow: none; border-right: 1px solid var(--line); scrollbar-width: thin; }
  .bottomnav .nav-phone { display: none; }
  .bottomnav .nav-tabs, .bottomnav .nav-groups.desktop-only, .bottomnav .nav-foot.desktop-only { display: flex !important; flex-direction: column; gap: 2px; }
  .bottomnav .nav-brand.desktop-only { display: flex !important; align-items: center; gap: 11px; padding: 6px 8px 14px; text-decoration: none; color: var(--ink); }
  .nav-brand b { display: block; font-size: .95rem; letter-spacing: -.01em; }
  .nav-brand small { display: block; font-size: .74rem; color: var(--muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottomnav .nav-new.desktop-only { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin: 2px 2px 12px;
    padding: 11px 14px; border-radius: var(--radius-ctl); background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
    font-weight: 700; font-size: .9rem; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--btn-bg) 80%, transparent); transition: filter .15s; }
  .nav-new:hover { filter: brightness(1.08); }
  .nav-new .ic { width: 18px; height: 18px; stroke-width: 2.4; }
  .bottomnav .nav-a { flex: none; flex-direction: row; align-items: center; gap: 11px; padding: 8px 10px; font-size: .9rem;
    font-weight: 550; color: color-mix(in srgb, var(--ink) 78%, var(--muted)); border-radius: 9px; transition: background .12s, color .12s; }
  .bottomnav .nav-a .ic { width: 19px; height: 19px; flex: none; opacity: .85; }
  .bottomnav .nav-a:hover { background: var(--hover); color: var(--ink); }
  .bottomnav .nav-a.on { background: var(--sel); color: var(--leaf); font-weight: 700; }
  .bottomnav .nav-a.on .ic { opacity: 1; }
  .bottomnav .nav-a .nav-n { position: static; margin-left: auto; }
  .nav-group { margin-top: 10px; }
  .nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; font-size: .68rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
    border-radius: 7px; user-select: none; }
  .nav-group > summary::-webkit-details-marker { display: none; }
  .nav-group > summary:hover { color: var(--ink); }
  .nav-group .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .nav-group:not([open]) .chev { transform: rotate(-90deg); }
  .bottomnav .nav-foot.desktop-only { margin-top: auto; padding-top: 14px; }
  .nav-foot .ws-slot { margin-top: 6px; }
  .ver-tag { padding: 10px 10px 0; }
  #app, .topbar-wrap, main { margin-left: var(--sidebar-w); }
  #app { max-width: 1120px; padding: 0 36px 48px; }
  .composer { left: var(--sidebar-w); }
  .topbar { margin: 0 -36px 22px; padding: 10px 36px; background: color-mix(in srgb, var(--topbar-bg) 94%, transparent);
    backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); }
  .topbar .brand { display: none; }
}
@media (min-width: 1400px) { #app { margin-left: calc(var(--sidebar-w) + max(0px, (100vw - var(--sidebar-w) - 1120px - 72px) / 2)); } }

/* ---- sheets: More, profile, theme ---- */
.sheet-veil { background: rgba(12, 6, 6, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s var(--ease); }
.sheet-veil.in, .sheet-veil:not(.pop-veil):has(.theme-opt), .sheet-veil:has(.person-row) { opacity: 1; }
.sheet { max-height: 88vh; overflow-y: auto; transform: translateY(24px); transition: transform .26s var(--ease);
  border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); }
.sheet-veil.in .sheet { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -6px auto 12px; }
.more-sheet h4 { margin: 18px 4px 8px; font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.more-a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; min-height: 78px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-size: .76rem; font-weight: 600; text-align: center; line-height: 1.25; position: relative; }
.more-a .ic { width: 24px; height: 24px; color: var(--leaf); }
.more-a.on { border-color: var(--leaf); background: var(--sel); }
.more-a .nav-n { top: 6px; left: auto; right: 8px; }
.pf-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 6px; }
.pf-head b { display: block; font-size: 1rem; }
.pf-head small { display: block; color: var(--muted); font-size: .8rem; }
.pf-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pf-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--porcelain); color: var(--ink); font: 600 .82rem/1.2 inherit; font-family: inherit;
  cursor: pointer; text-decoration: none; }
.pf-btn .ic { width: 18px; height: 18px; color: var(--leaf); }
.pf-btn:hover { background: var(--hover); }
.pf-out .ic { color: var(--berry); }
@media (min-width: 900px) {
  .pop-veil { align-items: flex-start; justify-content: flex-end; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pf-menu { margin: 62px 28px 0 0; width: 340px; border-radius: 16px; transform: translateY(-6px); border: 1px solid var(--line); padding: 16px; }
  .pf-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
  .pf-list .more-a { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 10px 12px; gap: 11px;
    background: none; border: 0; font-size: .9rem; }
  .pf-list .more-a:hover { background: var(--hover); }
  .pf-list .more-a .ic { width: 19px; height: 19px; }
  .pf-btns { grid-template-columns: 1fr; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .pf-btn { justify-content: flex-start; border: 0; padding: 10px 12px; font-size: .9rem; }
  .sheet:not(.pf-menu) { border-radius: 22px; margin-bottom: 4vh; }
  .sheet-veil:not(.pop-veil) { align-items: center; }
}
@media (max-width: 899px) { .pf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; } }

/* ---- sign-in personas ---- */
a.persona, .persona.card { transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
.persona.card:hover { border-color: var(--leaf); box-shadow: var(--shadow-lg); transform: translateY(-1px); }

/* scrollbars */
* { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }

/* v1.13 refinements: brand colour lives in the sidebar on desktop; the header stays light */
.topbar .brand .brand-mark { color: var(--btn-fg); }
html[lang="th"] .nav-group > summary, html[lang="th"] .more-sheet h4, html[lang="th"] h2,
html[lang="th"] .chip, html[lang="th"] .status, html[lang="th"] label { letter-spacing: 0; }
@media (max-width: 520px) { .topbar #themebtn { display: none; } }
@media (min-width: 900px) {
  .bottomnav { background: var(--topbar-bg); border-right: 1px solid color-mix(in srgb, var(--topbar-fg) 10%, var(--topbar-bg)); color: var(--topbar-fg); }
  .bottomnav .nav-brand.desktop-only { color: var(--topbar-fg); }
  .nav-brand small { color: color-mix(in srgb, var(--topbar-fg) 65%, transparent); }
  .bottomnav .nav-new.desktop-only { border: 1px solid color-mix(in srgb, var(--topbar-fg) 22%, transparent); }
  .bottomnav .nav-a { color: color-mix(in srgb, var(--topbar-fg) 80%, transparent); }
  .bottomnav .nav-a:hover { background: color-mix(in srgb, var(--topbar-fg) 9%, transparent); color: var(--topbar-fg); }
  .bottomnav .nav-a.on { background: color-mix(in srgb, var(--topbar-fg) 15%, transparent); color: var(--topbar-fg);
    box-shadow: inset 3px 0 0 var(--steep); }
  .nav-group > summary { color: color-mix(in srgb, var(--topbar-fg) 55%, transparent); }
  .nav-group > summary:hover { color: var(--topbar-fg); }
  .bottomnav .ws-head, .bottomnav .ver-tag { color: color-mix(in srgb, var(--topbar-fg) 55%, transparent); }
  .bottomnav .ws-row { border-top-color: color-mix(in srgb, var(--topbar-fg) 14%, transparent); }
  .bottomnav .ws-link { color: color-mix(in srgb, var(--topbar-fg) 85%, transparent); }
  .bottomnav .ws-link:hover { background: color-mix(in srgb, var(--topbar-fg) 9%, transparent); }
  .bottomnav { scrollbar-color: color-mix(in srgb, var(--topbar-fg) 25%, transparent) transparent; }
  .topbar { background: color-mix(in srgb, var(--cream) 82%, transparent); color: var(--ink);
    border-bottom: 1px solid var(--line); }
  .topbar .theme-btn { color: var(--ink); border-color: var(--line); }
  .topbar .theme-btn:hover, .topbar .bell:hover, .topbar .who:hover { background: var(--hover); }
  .topbar .bell { color: var(--ink); }
  .topbar .who-av { box-shadow: 0 0 0 2px var(--porcelain), 0 0 0 3.5px color-mix(in srgb, var(--btn-bg) 35%, transparent); }
}
@media (min-width: 1400px) { #app { margin-left: var(--sidebar-w); } }
@media (min-width: 900px) { .topbar .bell { border-color: var(--line); } }
html[data-theme="contrast"] .bottomnav .brand-mark { background: #fff; color: #000; }
html[data-theme="contrast"] .bottomnav .nav-new.desktop-only { background: #fff; color: #000; }

/* ================= v1.14: the chat dock ================= */
.chat-fab { display: none; }
@media (min-width: 900px) {
  .chat-fab { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px;
    border-radius: 50%; border: 0; cursor: pointer; color: var(--btn-fg); background: var(--btn-bg);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--btn-bg) 75%, transparent), 0 2px 6px rgba(0,0,0,.15); transition: transform .15s var(--ease); }
  .chat-fab:hover { transform: translateY(-2px); }
  .chat-fab .ic { width: 26px; height: 26px; }
  .chat-fab .nav-n { position: absolute; top: -2px; right: -2px; left: auto; }
  body.dock-on .chat-fab { display: none; }
}
.chat-dock { display: none; }
body.dock-on .chat-dock { display: flex; flex-direction: column; position: fixed; z-index: 70; background: var(--porcelain); color: var(--ink);
  inset: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: dockIn .24s var(--ease) both; }
@keyframes dockIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  body.dock-on .chat-dock { inset: auto 20px 20px auto; width: 400px; height: min(680px, calc(100vh - 40px)); border-radius: 18px;
    border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { body.dock-on .chat-dock { animation: none; } }
.dk-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--topbar-bg); color: var(--topbar-fg); }
.dk-head b { flex: 1; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ic { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.dk-ic:hover { background: color-mix(in srgb, var(--topbar-fg) 12%, transparent); }
.dk-ic .ic { width: 20px; height: 20px; }
.dk-body { flex: 1; overflow-y: auto; padding: 10px 12px 16px; overscroll-behavior: contain; }
.dk-label { font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 4px 6px; }
html[lang="th"] .dk-label { letter-spacing: 0; }
.dk-sep { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dk-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--leaf); font: 700 .78rem/1 inherit;
  font-family: inherit; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 4px 6px; border-radius: 8px; }
.dk-link .ic { width: 15px; height: 15px; }
.dk-link:hover { background: var(--hover); }
.dk-row, .dk-person { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 0; background: none; text-align: left;
  border-radius: 12px; color: inherit; font-family: inherit; cursor: pointer; }
.dk-row:hover, .dk-person:hover { background: var(--hover); }
.dk-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sel); color: var(--leaf);
  font-weight: 750; font-size: .78rem; }
.dk-av.sm { width: 34px; height: 34px; }
.dk-av .ic { width: 19px; height: 19px; }
.dk-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-rt b { font-size: .9rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-rt small { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ctx { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px 10px; margin-bottom: 6px; }
.dk-ctx-s { padding: 4px 10px 10px; }
.dk-ctxt { font-weight: 650; padding: 0 4px 6px; }
.dk-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 11px; border-radius: 12px; border: 0;
  background: var(--btn-bg); color: var(--btn-fg); font: 700 .88rem/1 inherit; font-family: inherit; cursor: pointer; }
.dk-cta .ic { width: 18px; height: 18px; }
.dk-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 18px 8px; }
.dk-sub { font-size: .76rem; color: var(--muted); padding: 6px 16px 0; }
.dk-rec { display: flex; align-items: center; gap: 6px; margin: 10px 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--sel);
  color: var(--leaf); text-decoration: none; font-size: .82rem; font-weight: 650; }
.dk-rec .ic { width: 16px; height: 16px; }
.dk-msgs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dk-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--porcelain); }
.dk-composer input { flex: 1; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; background: var(--cream); color: var(--ink); }
.dk-composer button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-fg); display: grid; place-items: center; cursor: pointer; }
.dk-composer button .ic { width: 20px; height: 20px; }
.dk-new textarea, .dk-new input[type=text], .dk-new input[type=search] { width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid var(--line); font: inherit; background: var(--porcelain); color: var(--ink); }
.dk-lbl { margin: 10px 4px 6px; }
.dk-person input { width: 18px; height: 18px; accent-color: var(--btn-bg); flex: none; }
.dk-person.on { background: var(--sel); }
.dk-count { color: var(--leaf); text-transform: none; letter-spacing: 0; }
.dk-dir { margin-top: 6px; }
.dk-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.dk-foot button.primary { margin: 0; }
.dk-skel { height: 48px; border-radius: 12px; margin: 6px 0; background: linear-gradient(90deg, var(--surface), var(--line), var(--surface));
  background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: 0 0; } }
.discuss-btn { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--leaf); background: transparent; color: var(--leaf); font: 700 .8rem/1 inherit; font-family: inherit; cursor: pointer;
  letter-spacing: 0; }
.discuss-btn .ic { width: 16px; height: 16px; }
.discuss-btn:hover { background: var(--hover); }
@media print { .chat-fab, .chat-dock, .discuss-btn { display: none !important; } }
.aud-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.aud-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--porcelain); color: var(--ink); font: 600 .8rem/1.2 inherit; font-family: inherit; cursor: pointer; }
.aud-chip small { color: var(--muted); font-weight: 500; }
.aud-chip:hover { border-color: var(--leaf); background: var(--hover); }