/* Plain Accounts visual contract v2 (docs/design/PLAIN-DESIGN-HANDOVER-v2.md, Appendix A).
   Loaded after every other app stylesheet. Tokens live in :root, so the accent, sidebar and font
   can be changed here in one place. Older layers are restyled through their existing class names;
   element ids and JS behaviour are unchanged. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  --bg:#F7F8FA; --surface:#fff; --ring:rgba(16,24,40,.08); --line:#E9ECF1; --line-2:#DDE2EA;
  --ink:#0B1220; --text:#1A2333; --muted:#566275; --faint:#667085;
  --accent:#2F5BFF; --accent-2:#1E43D6; --accent-tint:#EEF2FF; --accent-ring:rgba(47,91,255,.28);
  --good:#0B7A53; --good-tint:#E8F6EF; --warn:#9A5007; --warn-tint:#FFF4E0; --bad:#C23B3B; --bad-tint:#FDECEC;
  --sh1:0 1px 2px rgba(16,24,40,.05),0 0 0 1px var(--ring); --sh2:0 12px 32px -8px rgba(16,24,40,.14),0 0 0 1px var(--ring);
  --font-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Older layers read these names; point them at the v2 palette. */
  --paper:var(--bg); --radius:12px; --shadow:var(--sh1); --azure:var(--accent);
  --pa-ink:var(--ink); --pa-blue:var(--accent); --pa-blue-deep:var(--accent-2); --pa-paper:var(--bg); --pa-line:var(--line); --pa-muted:var(--muted);
}

/* Type: Inter everywhere (older layers named DM Sans and Manrope), tabular figures. */
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1,"ss01" 1}
body *:not(code):not(pre):not(kbd):not(samp){font-family:var(--font-ui)!important}
.ico{width:17px;height:17px;flex:none;display:block}

/* The connection bar only appears when something is wrong. */
.demo-ribbon{position:fixed;top:auto;bottom:16px;left:50%;right:auto;transform:translateX(-50%);z-index:300;height:auto;max-width:calc(100vw - 32px);padding:6px 14px;border-radius:999px;background:var(--warn-tint);color:#6B4107;box-shadow:0 0 0 1px #F1D9A8,var(--sh2);font-size:13px;font-weight:550;letter-spacing:0;text-transform:none;white-space:normal;text-align:center}
.demo-ribbon:has(#connectionState:empty){display:none}

/* Shell */
.app{grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.sidebar{top:0;height:100dvh;max-height:100dvh;background:#FBFBFD;border:0;border-right:1px solid var(--line);box-shadow:none;color:var(--text);padding:14px 12px 12px}
.brand-row{padding:2px 6px 12px;border-bottom:0}
.brand-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(145deg,var(--accent),var(--accent-2));overflow:hidden}
.brand-mark i,.brand-mark i+i{background:#fff;opacity:.92}
.brand-mark i+i{opacity:.6}
.brand-copy b{color:var(--ink);font-size:17px;font-weight:700;letter-spacing:-.02em}
.brand-copy small{color:var(--muted);font-size:12px;font-weight:500}
.business-card{margin-top:0;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:8px;background:#fff;border:0;border-radius:10px;box-shadow:var(--sh1);color:var(--ink)}
.business-card b{display:block;font-size:13px;font-weight:620;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.business-card small{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.business-avatar{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.business-avatar.mini{width:28px;height:28px;background:var(--accent-tint);color:var(--accent-2);box-shadow:none}
.business-card .chevron{color:var(--faint)}
.business-card .chevron .ico{width:15px;height:15px}
.business-menu{top:96px;left:12px;right:12px;border:0;border-radius:10px;box-shadow:var(--sh2)}
.business-menu b{font-size:13px;color:var(--ink)}.business-menu small{font-size:12px;color:var(--faint)}
.business-menu .workspace-choice.current{background:var(--accent-tint)}

.nav-list{margin-top:8px}
.nav-home{margin-bottom:2px}
.nav-group{border:0;padding-top:0;margin-top:0}
.nav-group summary{padding:14px 10px 5px;color:var(--faint);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.nav-group summary i{display:grid;color:var(--faint)}
.nav-group summary i .ico{width:13px;height:13px}
.nav-item{height:34px;margin:1px 0;padding:0 10px;gap:10px;grid-template-columns:17px minmax(0,1fr) auto;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:520;box-shadow:none;transform:none}
.nav-item:hover{background:#F1F3F7;color:var(--ink);transform:none}
.nav-item.active{background:var(--accent-tint);color:var(--accent-2);font-weight:620;box-shadow:none}
.nav-icon,.nav-item.active .nav-icon{color:inherit;font-size:inherit;display:grid;place-items:center}
.nav-count,.nav-count.coral,.nav-count.calm{min-width:0;height:auto;padding:1px 7px;border-radius:9px;background:#EDF0F5;color:var(--muted);font-size:12px;font-weight:600}
.nav-item.active .nav-count,.nav-item.active .nav-count.calm{background:#fff;color:var(--accent-2)}
.nav-dot{background:var(--accent);box-shadow:none}
.sidebar-foot{border-top:0;padding-top:8px}
.help-card{margin:0;padding:10px;gap:10px;background:#fff;border:0;border-radius:10px;box-shadow:var(--sh1);color:var(--ink)}
.help-card>span:first-child{width:28px;height:28px;border-radius:50%;background:var(--accent-tint);color:var(--accent-2);flex:none}
.help-card>span:first-child .ico{width:16px;height:16px}
.help-card b{font-size:13px;font-weight:620;color:var(--ink)}
.help-card small{font-size:12px;color:var(--muted)}

.main-shell{background:var(--bg)}
.topbar{top:0;height:56px;padding:0 28px;background:rgba(255,255,255,.8);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.crumb{font-size:12.5px;color:var(--faint)}
.crumb b{color:var(--line-2)}
.crumb strong{color:var(--ink);font-weight:600}
.topbar-actions{gap:10px}
.global-search{width:320px;height:36px;gap:8px;padding:0 10px;background:#fff;border:0;border-radius:9px;box-shadow:var(--sh1);color:var(--faint)}
.global-search span{display:grid;color:var(--faint)}
.global-search span .ico{width:16px;height:16px}
.global-search b{font-size:13px;font-weight:400;color:var(--faint)}
.global-search kbd{font:500 11px var(--font-ui);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;background:var(--bg);color:var(--muted);box-shadow:none}
.global-search:hover{background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.icon-btn{width:34px;height:34px;border:0;border-radius:9px;background:#fff;box-shadow:var(--sh1);color:var(--muted)}
.notification-btn .ico{width:17px;height:17px}
.profile>span:first-child{width:32px;height:32px;background:#14213D;color:#fff;font-size:12px;font-weight:600}
.profile-copy b{font-size:13px;font-weight:600;color:var(--ink)}
.profile-copy small{font-size:12px;color:var(--muted)}
.topbar-create .ico{width:15px;height:15px}
/* The top bar's Create button replaces the one on Today, so each screen keeps one primary action. */
.command-intro #quickCreateButton{display:none}

/* Page header */
.page-head{margin-bottom:18px}
.page-head h1{font-size:26px;font-weight:650;letter-spacing:-.022em;color:var(--ink);margin:0 0 4px}
.page-head p:not(.eyebrow){font-size:13.5px;color:var(--muted)}
.eyebrow,main .eyebrow,.modal .eyebrow{font-size:12.5px!important;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint);margin-bottom:6px}
.eyebrow.light{color:var(--faint)}

/* Cards */
.surface,.table-card,.bills-card,.reconcile-wrap,.access-card,.review-queue,.audit-timeline{border-color:transparent;border-radius:12px;box-shadow:var(--sh1)}
.panel-head h2{font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.panel-head h3{font-size:15px;font-weight:620;letter-spacing:-.01em;color:var(--ink)}

/* Buttons: one primary per screen; the primary is the only gradient in the app. */
.btn{border-radius:9px;padding:7px 14px;font-size:13.5px;font-weight:580;line-height:1.35;transition:background-color .15s,box-shadow .15s;transform:none}
.btn:hover{transform:none}
.btn.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(180deg,#3B67FF,#2750F0);color:#fff;border:0;box-shadow:0 1px 2px rgba(30,67,214,.4),inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(30,67,214,.9)}
.btn.primary:hover{background:linear-gradient(180deg,#2F5BFF,#1E43D6)}
.btn.secondary,.btn.light,.period-btn{background:#fff;color:var(--ink);border-color:transparent;box-shadow:var(--sh1)}
.btn.secondary:hover,.btn.light:hover,.period-btn:hover{background:#FAFBFD}
.btn.danger{background:#fff;color:var(--bad);border-color:transparent;box-shadow:0 0 0 1px rgba(194,59,59,.35)}
.btn.danger:hover{background:var(--bad-tint)}
.text-btn{color:var(--accent-2);font-size:13px;font-weight:600}
.btn:focus-visible,.text-btn:focus-visible,.nav-item:focus-visible,.icon-btn:focus-visible,.global-search:focus-visible,.business-card:focus-visible,.help-card:focus-visible,.profile:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* Status chips: one shared set (Draft, Awaiting approval, Awaiting payment, Overdue, Paid). */
.status{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:2px 9px 2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;background:#EEF0F4;color:#4B5666}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status.paid,.status.ready,.status.complete,.status.done{background:var(--good-tint);color:var(--good)}
.status.awaiting,.status.adviser{background:var(--accent-tint);color:var(--accent-2)}
.status.overdue{background:var(--bad-tint);color:var(--bad)}
.status.due,.status.attention,.status.warning{background:var(--warn-tint);color:var(--warn)}
.status.draft{background:#EEF0F4;color:#4B5666}
.books-status-card .status.attention{background:var(--warn-tint);color:var(--warn)}

/* Banner (books status today; same pattern for any attention banner). */
.books-status-banner{gap:10px;align-items:center;margin:0 0 16px;padding:10px 14px;border:0;border-radius:10px;background:var(--warn-tint);box-shadow:0 0 0 1px #F1D9A8;color:#6B4107}
.books-status-banner strong{font-size:13px;font-weight:650;color:#6B4107}
.books-status-banner span{font-size:13px;color:#6B4107}
.books-status-banner .books-status-mark{width:22px;height:22px;background:var(--warn);color:#fff;font-size:13px}

/* Lists and tables */
.table-row{font-size:13.5px;border-bottom-color:#F0F2F6}
.table-row strong{font-size:13.5px}
.table-row.header,.bill-head{background:#fff;color:var(--faint);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;border-bottom-color:var(--line)}
.table-row:not(.header):hover{background:#FAFBFD}
.data-table th{font-size:12px;font-weight:600;color:var(--faint);text-transform:none;letter-spacing:0}
.data-table td{font-size:13.5px}

/* Forms */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-color:var(--line-2);border-radius:9px;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)}

/* Segmented controls and tabs */
.shell-switch,.segmented{background:#EEF0F4;border-radius:9px;padding:3px;gap:2px}
.shell-switch button,.segmented button{border-radius:7px;font-size:13px;font-weight:560;color:var(--muted)}
.shell-switch button.active,.segmented button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.1)}

/* Dialogs */
.modal-backdrop{background:rgba(11,18,32,.45)}
.modal{border-radius:16px!important;box-shadow:var(--sh2)!important}
.modal h2{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.modal-intro,.approval-modal>p{font-size:13.5px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Narrow screens keep the slide-in navigation (the bottom bar is the mobile pass, handover phase 8). */
@media(max-width:1100px){.global-search{width:240px}}
@media(max-width:900px){
  .sidebar{top:0;height:100dvh;max-height:100dvh}
  .sidebar-close{color:var(--ink);background:#fff;box-shadow:var(--sh1);border:0}
  .topbar{padding:0 14px}
  .global-search{width:36px;padding:0;justify-content:center}
  .global-search b,.global-search kbd{display:none}
  .topbar-create span{display:none}
  .topbar-create{padding:7px 10px}
}