/* ==========================================================================
   CompanyRegister — design system
   Built to ui-mockup.html. The palette below is the mockup's, unchanged.

   Colour discipline: --red is for urgency only (overdue, the attention
   strip, destructive actions). --accent (teal) is the brand: active nav,
   primary actions, the paper preview's bar, focus underlines.

   Tokens first, then the shell, then components. Every class the page
   templates use is defined here, so the look changes in one file.
   ========================================================================== */

:root {
  --slate:   #16244a;
  --slate-2: #20315e;
  --bg:      #f6f7f8;
  --card:    #ffffff;
  --ink:     #1b2a4a;
  --muted:   #64748b;
  --line:    #e5e8eb;
  --red:     #c0392b;
  --accent:  #14a098;
  --green:   #1a7f4e;
  --amber:   #b45309;
  --radius:  14px;

  /* Tints derived from the above, for pills and soft panels. */
  --red-bg:    #fbe9ea;
  --amber-bg:  #fef3e2;
  --green-bg:  #e6f4ec;
  --grey-bg:   #eef1f4;
  --accent-bg: #eaf7f5;

  --shadow-sm: 0 1px 2px rgba(28, 39, 50, .05);
  --shadow:    0 8px 24px rgba(28, 39, 50, .09);
  --shadow-lg: 0 16px 40px rgba(28, 39, 50, .14);

  --sidebar-w: 232px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px;
                 border-radius: 6px; }

/* ==========================================================================
   Shell
   ========================================================================== */

.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr;
         min-height: 100vh; }
/* Grid items default to min-width:auto, so one wide table would stretch the
   whole document instead of scrolling inside its own panel. */
.shell > * { min-width: 0; }

aside {
  background: var(--slate); color: #cbd5e1;
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 22px; color: #fff; font-weight: 700; font-size: 15px;
}
.brand:hover { color: #fff; }
.brand .mark, .brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent); display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 800;
}

.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  font-weight: 500; color: #cbd5e1; transition: background .15s, color .15s;
}
.navlink svg { width: 17px; height: 17px; flex: none;
               stroke: currentColor; fill: none; stroke-width: 1.8; }
.navlink:hover { background: var(--slate-2); color: #fff; }
.navlink.on { background: var(--slate-2); color: #fff;
              box-shadow: inset 3px 0 0 var(--accent); }
.nav-sec { font-size: 11px; color: #718196; padding: 16px 10px 6px;
           letter-spacing: .04em; }
aside .foot { margin-top: auto; padding: 10px; font-size: 12px;
              color: #718196; }
aside .foot a { color: #94a3b8; }
aside .foot a:hover { color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */

.main { display: flex; flex-direction: column; min-width: 0; }

header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.search {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; color: var(--muted); cursor: pointer;
  font: inherit; text-align: left;
}
.search:hover { border-color: #cfd6dd; color: var(--ink); }
.kbd {
  margin-left: auto; font-size: 11px; border: 1px solid var(--line);
  background: #fff; border-radius: 5px; padding: 1px 6px; color: var(--muted);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; margin-left: auto;
}

.content { padding: 28px; max-width: 1180px; width: 100%; margin: 0 auto; }

h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
h3 { font-size: 15px; font-weight: 600; }
.sub, .empty { color: var(--muted); margin-top: 3px; }
.empty a { color: var(--muted); text-decoration: underline;
           text-underline-offset: 3px; }
.empty a:hover { color: var(--accent); }
h1 + .sub, h1 + .empty { margin-bottom: 22px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn, button, .btnlink {
  border: none; cursor: pointer; font: inherit; font-weight: 600;
  border-radius: 10px; padding: 9px 16px; transition: filter .15s;
  background: var(--slate); color: #fff; display: inline-block;
  text-align: center;
}
.btn:hover, button:hover, .btnlink:hover { filter: brightness(1.12);
                                            color: #fff; }
.btn.primary { background: var(--slate); color: #fff; }
/* The mockup calls this `.red` but paints it teal — it is the brand action,
   not a warning. Both names work; `.accent` is the honest one. */
.btn.accent, .btn.red { background: var(--accent); color: #fff; }
.btn.ghost, button.small, button.ghost {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-weight: 600;
}
.btn.ghost:hover, button.small:hover, button.ghost:hover {
  background: var(--bg); color: var(--ink); filter: none;
  border-color: #cfd6dd;
}
button.small { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn.danger, button.danger { background: var(--red); color: #fff;
                             border: none; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed;
                                 filter: none; }

/* ==========================================================================
   Needs attention
   ========================================================================== */

.attn {
  margin: 22px 0; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--red); border-radius: var(--radius);
  overflow: hidden;
}
.attn-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.attn-row:last-child { border-bottom: none; }
.attn-row .when { font-weight: 600; color: var(--red); min-width: 84px; }
.attn-row .what { flex: 1; min-width: 180px; font-weight: 500; }
.attn-row .co { color: var(--muted); }
.attn-row form { display: inline; }

/* ==========================================================================
   Pills
   ========================================================================== */

.pill {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--grey-bg); color: var(--muted); white-space: nowrap;
  display: inline-block;
}
/* Status slugs arrive lower-case ("issued", "in-review"); free text like
   "12 days late" is already written properly and must be left alone. */
.pill:first-letter { text-transform: uppercase; }
.pill.overdue, .pill-overdue, .pill-outstanding, .pill-rejected,
.pill-void { background: var(--red-bg); color: var(--red); }
.pill.due, .pill-due, .pill-draft, .pill-generated, .pill-in-review,
.pill-pending { background: var(--amber-bg); color: var(--amber); }
.pill.paid, .pill-paid, .pill-approved, .pill-accepted, .pill-complete,
.pill-completed, .pill-filed { background: var(--green-bg);
                               color: var(--green); }
.pill.draft, .pill-superseded, .pill-declined, .pill-withdrawn,
.pill-archived { background: var(--grey-bg); color: var(--muted); }
.pill-issued, .pill-sent, .pill-received { background: var(--accent-bg);
                                           color: var(--accent); }
.pill-void { text-decoration: line-through; }

/* ==========================================================================
   Action cards
   ========================================================================== */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        margin-top: 18px; }
.action {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; cursor: pointer;
  transition: transform .15s, box-shadow .15s; display: block;
  color: var(--ink);
}
.action:hover { transform: translateY(-2px); box-shadow: var(--shadow);
                color: var(--ink); }
.action .ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg);
  display: grid; place-items: center; margin-bottom: 12px;
}
.action .ic svg { width: 19px; height: 19px; stroke: var(--ink); fill: none;
                  stroke-width: 1.8; }
.action.hot .ic { background: var(--accent); }
.action.hot .ic svg { stroke: #fff; }
.action h3 { font-size: 15px; font-weight: 600; }
.action p { color: var(--muted); margin-top: 4px; font-size: 13px;
            line-height: 1.45; }

/* ==========================================================================
   Wizards, steps and the live paper preview
   ========================================================================== */

.wiz { display: grid; grid-template-columns: 1fr 420px; gap: 22px;
       margin-top: 20px; align-items: start; }
.steps { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 140px; padding: 9px 12px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-weight: 500; font-size: 13px;
}
.step.done { color: var(--green); }
.step.now { border-color: var(--slate); color: var(--ink); font-weight: 600;
            box-shadow: inset 0 -3px 0 var(--accent); }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 18px;
}
.panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.panel.alert { border-left: 4px solid var(--red); }
.panel.alert > h2 { color: var(--red); }

.f { margin-bottom: 14px; }
.f label { display: block; font-size: 12.5px; font-weight: 500;
           color: var(--muted); margin-bottom: 5px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; font-weight: 500; display: block; color: var(--ink);
  background: #fff;
}
.chip:hover { border-color: #cfd6dd; color: var(--ink); }
.chip.on { border-color: var(--slate); background: var(--bg);
           box-shadow: inset 0 0 0 1px var(--slate); }
.chip small { display: block; color: var(--muted); font-weight: 400;
              margin-top: 2px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }

.wiz-foot { display: flex; justify-content: space-between; margin-top: 18px;
            gap: 10px; }

.paper-wrap { position: sticky; top: 84px; }
.paper-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.paper {
  background: #fff; border: 2px solid var(--ink); border-radius: 2px;
  box-shadow: var(--shadow-lg); font-family: var(--serif); overflow: hidden;
}
.paper .bar { height: 6px; background: var(--accent); }
.paper .ph { padding: 16px 18px 12px; border-bottom: 2px solid var(--ink); }
.paper .ph .t { font-weight: 700; font-size: 15px; }
.paper .ph .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.paper .ph img { max-height: 34px; max-width: 150px; margin-bottom: 8px;
                 display: block; }
.prow { display: grid; grid-template-columns: 120px 1fr;
        border-bottom: 1px solid var(--line); font-size: 12.5px; }
.prow:last-child { border-bottom: none; }
.prow .pk { padding: 8px 12px; color: var(--muted);
            border-right: 1px solid var(--line); font-family: var(--font);
            font-size: 10.5px; }
.prow .pv { padding: 8px 12px; font-weight: 600; min-width: 0;
            overflow-wrap: anywhere; }
.pv.hl { background: var(--accent-bg); }
.paper .pfoot { padding: 9px 12px; font-size: 10.5px; color: var(--muted);
                font-family: var(--font); border-top: 1px solid var(--line); }

.pack { margin-top: 14px; background: var(--card);
        border: 1px solid var(--line); border-radius: var(--radius);
        padding: 14px 16px; }
.pack h4 { font-size: 12.5px; color: var(--muted); font-weight: 500;
           margin-bottom: 8px; }
.pack .doc { display: flex; align-items: center; gap: 9px; padding: 6px 0;
             font-weight: 500; font-size: 13px; }
.pack .doc svg { width: 15px; height: 15px; stroke: var(--accent);
                 fill: none; stroke-width: 1.8; flex: none; }

/* ==========================================================================
   Company header, tabs, document events
   ========================================================================== */

.cohead { display: flex; align-items: center; gap: 14px; margin-bottom: 6px;
          flex-wrap: wrap; }
.cohead .comark {
  width: 96px; height: 96px; border-radius: 12px; background: var(--slate);
  color: #fff; display: grid; place-items: center; font-weight: 700;
  font-size: 26px; flex: none; overflow: hidden; border: 1px solid var(--line);
}
.cohead .comark img { width: 100%; height: 100%; object-fit: contain;
                      background: #fff; padding: 8px; box-sizing: border-box; }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line);
        margin: 18px 0 0; overflow-x: auto; }
.tab { padding: 10px 2px; color: var(--muted); cursor: pointer;
       font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 600;
          box-shadow: inset 0 -2px 0 var(--accent); }

.event { margin-top: 20px; }
.event .ehead { display: flex; align-items: baseline; gap: 10px;
                margin-bottom: 8px; flex-wrap: wrap; }
.event .ehead .ed { font-weight: 600; }
.event .ehead .et { color: var(--muted); }

.doct {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); border-collapse: separate; border-spacing: 0;
  overflow: hidden;
}
.doct td { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.doct tr:last-child td { border-bottom: none; }
.doct .dn { font-weight: 500; }
.doct .da { text-align: right; white-space: nowrap; }
.link { color: var(--ink); font-weight: 600; text-decoration: underline;
        text-underline-offset: 3px; cursor: pointer; background: none;
        border: none; font: inherit; padding: 0; border-radius: 0; }
.link:hover { color: var(--accent); filter: none; }
.link + .link { margin-left: 14px; color: var(--muted); }

/* ==========================================================================
   Tables (the general kind, used across the register pages)
   ========================================================================== */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line);
     vertical-align: top; }
tr:last-child td { border-bottom: none; }
th:last-child, td:last-child { padding-right: 0; }
.panel > table tr:hover td { background: var(--bg); }
td a { font-weight: 500; }
td a:hover { text-decoration: underline; text-underline-offset: 2px; }

.due { white-space: nowrap; font-variant-numeric: tabular-nums;
       color: var(--muted); }
.late { color: var(--red); font-weight: 600; }
.dim { color: var(--muted); }
tr.dim td { color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 white-space: nowrap; }

/* ==========================================================================
   Forms
   ========================================================================== */

input, select, textarea, .f input, .f select, .f textarea {
  width: 100%; font: inherit; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--slate); outline-offset: 1px; border-color: #fff;
}
textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
select {
  appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--accent);
  vertical-align: middle;
}
input[type="file"] { padding: 8px 10px; background: var(--bg); }
input[type="date"], input[type="time"] { min-width: 150px; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg); color: var(--muted);
}

form.inline { display: inline-block; }
form.inline + form.inline { margin-left: 6px; }

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid-form .wide { grid-column: 1 / -1; }
.grid-form label { display: flex; flex-direction: column; gap: 5px;
                   font-size: 12.5px; font-weight: 500; color: var(--muted); }
.grid-form button { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.grid-form h2 { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 16px;
                border-top: 1px solid var(--line); }
.grid-form h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
            margin-top: 12px; }
.row-form input, .row-form select { width: auto; min-width: 150px; }
.row-form label.inlab input, .row-form label.inlab select { min-width: 0; }

label.check { flex-direction: row !important; align-items: center; gap: 8px;
              color: var(--ink); font-size: 13.5px; font-weight: 500; }
label.check input { width: auto; }
label.inlab { display: inline-flex; align-items: center; gap: 7px;
              font-size: 12.5px; font-weight: 500; color: var(--muted);
              white-space: nowrap; }
label.inlab input { width: auto; }

.checkgrid { display: grid;
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 8px 20px; margin-bottom: 16px; }
.checkgrid label.check { font-size: 13px; }

table.lines { margin-top: 10px; }
table.lines th { padding-bottom: 6px; }
table.lines td { padding: 5px 8px 5px 0; vertical-align: top;
                 border-bottom: none; }
table.lines tr:hover td { background: none; }
table.lines textarea, table.lines input, table.lines select { width: 100%; }
table.lines textarea { min-height: 40px; margin-top: 5px; }

/* ==========================================================================
   Stats, flashes, misc
   ========================================================================== */

.statrow { display: grid;
           grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           gap: 14px; }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 15px 17px;
        border-radius: var(--radius); background: var(--bg);
        border: 1px solid var(--line); }
.stat-k { font-size: 11px; font-weight: 600; letter-spacing: .05em;
          text-transform: uppercase; color: var(--muted); }
.stat-v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
          font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-v.late { color: var(--red); }
.stat-note { font-size: 12px; color: var(--muted); }
a.statlink { color: inherit; transition: box-shadow .15s, transform .15s; }
a.statlink:hover { background: var(--card); box-shadow: var(--shadow-sm);
                   transform: translateY(-1px); color: inherit;
                   border-color: #cfd6dd; }

.flash { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px;
         font-size: 14px; background: var(--accent-bg); color: #0d766f;
         border: 1px solid #b9e3df; }
.ok-flash { background: var(--green-bg); color: var(--green);
            border-color: #bfe0cd; }
.bad-flash { background: var(--red-bg); color: var(--red);
             border-color: #f2cfd1; }
.error { color: var(--red); font-size: 14px; margin-bottom: 12px; }
.ok { color: var(--green); font-weight: 600; }
.bad { color: var(--red); font-weight: 600; }

.warnlist { margin: 0 0 0 18px; font-size: 14px; }
.warnlist li { margin-bottom: 7px; }
.needlist { margin: 0 0 0 18px; }
.needlist li { margin-bottom: 10px; }
.worklist { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.worklist li a { display: block; padding: 10px 12px; border-radius: 9px;
                 font-size: 14px; color: var(--muted);
                 border: 1px solid transparent; }
.worklist li a:hover { background: var(--bg); color: var(--ink);
                       border-color: var(--line); }
.worklist strong { color: var(--ink); font-weight: 600; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
        align-items: start; }
.cols > .panel { margin-bottom: 0; }

code { font-family: var(--mono); font-size: 12.5px; background: var(--grey-bg);
       color: var(--ink); padding: 2px 6px; border-radius: 5px; }
.val { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap;
       color: var(--ink); }
.linkbox { width: 100%; min-width: 280px; font-size: 12px;
           font-family: var(--mono); background: var(--bg); }
.digest { border-top: 1px solid var(--line); padding: 14px 0; }
.digest pre { font-family: var(--mono); font-size: 12.5px;
              white-space: pre-wrap; background: var(--bg);
              border: 1px solid var(--line); border-radius: 10px;
              padding: 14px 16px; margin-top: 10px; line-height: 1.55; }

/* ==========================================================================
   Command palette (⌘K)
   ========================================================================== */

.palette-back {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: none; z-index: 100; padding: 12vh 16px 16px;
  backdrop-filter: blur(2px);
}
.palette-back.on { display: block; }
.palette {
  max-width: 560px; margin: 0 auto; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; border: 1px solid var(--line);
}
.palette input {
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 16px 18px; font-size: 15px;
}
.palette input:focus { outline: none; }
.palette-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; cursor: pointer; color: var(--ink);
}
.palette-item .pkind { margin-left: auto; font-size: 11px;
                       color: var(--muted); text-transform: uppercase;
                       letter-spacing: .04em; }
.palette-item.sel, .palette-item:hover { background: var(--bg);
                                         color: var(--ink); }
.palette-empty { padding: 20px; color: var(--muted); text-align: center; }
.palette-foot { border-top: 1px solid var(--line); padding: 8px 14px;
                font-size: 11.5px; color: var(--muted); }

/* The + New menu */
.newwrap { position: relative; }
.newmenu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 232px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
  display: none; z-index: 30;
}
.newmenu.on { display: block; }
.newmenu a { display: block; padding: 9px 12px; border-radius: 8px;
             font-weight: 500; color: var(--ink); }
.newmenu a:hover { background: var(--bg); color: var(--ink); }
.newmenu .sep { height: 1px; background: var(--line); margin: 5px 8px; }

/* ==========================================================================
   Login and the public upload page
   ========================================================================== */

.login-body { display: grid; place-items: center; min-height: 100vh;
              background: radial-gradient(900px 460px at 50% -8%, #fff 0%,
                                          var(--bg) 62%);
              padding: 24px; }
.login-card, .upload-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 34px 36px 32px; width: min(400px, 100%);
}
.upload-card { width: min(600px, 100%); margin: 48px auto; }
.login-card .brand, .upload-card .brand { padding: 0 0 22px; color: var(--ink); }
.login-card h1, .upload-card h1 { font-size: 20px; margin-bottom: 4px; }
.login-card .lead, .upload-card .lead { color: var(--muted); font-size: 13.5px;
                                        margin-bottom: 22px; }
.login-card form, .upload-form { display: flex; flex-direction: column;
                                 gap: 15px; }
.login-card label, .upload-form label { display: flex; flex-direction: column;
                                        gap: 5px; font-size: 12.5px;
                                        font-weight: 500; color: var(--muted); }
.login-card button { width: 100%; padding: 11px; font-size: 15px; }
.upload-card h2 { margin-top: 26px; }
.upload-form button { align-self: flex-start; padding: 10px 20px; }

/* Branding tiles on the settings page */
.brandgrid { display: grid;
             grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
             gap: 14px; }
.brandcard { border: 1px solid var(--line); border-radius: var(--radius);
             padding: 16px; background: var(--bg); }
.brandcard.missing { border-style: dashed; }
.brandcard .logobox { height: 56px; display: grid; place-items: center;
                      background: #fff; border: 1px solid var(--line);
                      border-radius: 10px; margin-bottom: 12px;
                      overflow: hidden; }
.brandcard .logobox img { max-height: 44px; max-width: 90%;
                          object-fit: contain; }
.brandcard .logobox .none { color: #94a3b8; font-size: 12px; }
.brandcard .cname { font-weight: 600; }
.brandcard .path { font-family: var(--mono); font-size: 11px;
                   color: var(--muted); margin-top: 4px;
                   overflow-wrap: anywhere; }
.swatches { display: flex; gap: 6px; margin-top: 10px; }
.swatch { width: 20px; height: 20px; border-radius: 6px;
          border: 1px solid rgba(0, 0, 0, .12); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .wiz { grid-template-columns: 1fr; }
  .paper-wrap { position: static; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  aside { position: static; height: auto; flex-direction: row;
          flex-wrap: wrap; align-items: center; gap: 6px;
          padding: 12px 14px; }
  .brand { padding: 0 10px 0 0; }
  /* `display: contents` dissolves the group box so each link wraps on its
     own instead of the whole group being one unbreakable item. */
  .navgroup { display: contents; }
  .nav-sec, aside .foot { display: none; }
  .grid { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  header { padding: 12px 16px; }
  .content { padding: 18px 16px 60px; }
  .search { font-size: 13px; }
}

@media (max-width: 640px) {
  .grid-form, .f2, .f3, .choice { grid-template-columns: 1fr; }
  h1 { font-size: 19px; }
  .panel { padding: 16px; }
  .attn-row { gap: 8px; }
  .attn-row .when { min-width: 0; }
  .kbd { display: none; }
}

/* One wide table scrolls inside its own panel rather than widening the page. */
@media (max-width: 720px) {
  .panel > table, .panel > form > table, .doct {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .panel { overflow: hidden; }
  .statrow { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media print {
  aside, header, .row-form, form.inline, button, .btn, .palette-back,
  .mock-nav { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  .panel, .doct { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   Phone: a bottom tab bar instead of the sidebar
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 700px) {
  /* The sidebar's horizontal strip is redundant once there is a tab bar. */
  aside { display: none; }
  .shell { grid-template-columns: 1fr; }

  header {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .search { max-width: none; }
  .content { padding: 16px 14px calc(78px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--slate);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(15, 23, 42, .18);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; border-radius: 10px; background: none; border: none;
    color: #94a3b8; font: inherit; font-size: 10.5px; font-weight: 600;
    cursor: pointer; box-shadow: none;
  }
  .tabbar a:hover, .tabbar button:hover { filter: none; color: #cbd5e1; }
  .tabbar svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
                stroke-width: 1.8; }
  .tabbar a.on { color: #fff; background: var(--slate-2); }

  /* Touch targets and thumb reach */
  .btn, button { padding: 11px 16px; }
  button.small { padding: 8px 12px; }
  input, select, textarea { padding: 11px 12px; font-size: 16px; }
  .tab { padding: 12px 2px; }
  .attn-row { padding: 14px 16px; }
  .wiz-foot { position: sticky; bottom: 0; background: var(--card);
              padding: 12px 0 4px; margin-top: 14px; }
  .palette-back { padding: 8vh 10px 10px; }
}

/* Standalone (installed) gets a little more room at the top. */
@media (display-mode: standalone) {
  header { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* ==========================================================================
   v1.1 subapps — KPI row, tags, timeline, budget bar, rooms, phone frame
   Built to new-subapps-mockup.html, mapped onto the existing palette.
   ========================================================================== */

.kpi { display: flex; gap: 26px; margin-bottom: 18px; flex-wrap: wrap; }
.kpi div b { display: block; font-size: 22px; font-weight: 700;
             font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi div b.late { color: var(--red); }
.kpi div span { color: var(--muted); font-size: 12.5px; }

/* Inline status tags. `.pill` is the rounded badge; `.tag` is the squarer
   one the subapp tables use beside a date. */
.tag { display: inline-block; border-radius: 4px; padding: 2px 7px;
       font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag.due { background: var(--amber-bg); color: var(--amber); }
.tag.late { background: var(--red-bg); color: var(--red); }
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.info { background: var(--accent-bg); color: var(--accent); }

.timeline { list-style: none; padding: 0; margin: 0;
            border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li { padding: 0 0 12px 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 5px;
                       width: 10px; height: 10px; border-radius: 50%;
                       background: var(--accent); border: 2px solid #fff; }
.timeline li.next::before { background: var(--amber); }
.timeline li.late::before { background: var(--red); }
.timeline li time { display: block; font-size: 12px; color: var(--muted); }

.bar { height: 8px; background: var(--grey-bg); border-radius: 4px;
       overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.over { background: var(--amber); }

.rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
         margin: 10px 0; }
.room { aspect-ratio: 1; border-radius: 6px; background: var(--grey-bg);
        display: flex; align-items: flex-end; padding: 6px; font-size: 11.5px;
        color: var(--muted); }
.room.done { background: var(--accent-bg); color: var(--accent); }

.snag { display: flex; justify-content: space-between; gap: 10px;
        padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.snag:last-child { border-bottom: 0; }
.note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* The brief preview, drawn as the message it will actually send. */
.phone { width: 300px; margin: 0 auto; background: #0B141A; border-radius: 28px;
         padding: 14px 10px; color: #E9EDEF; }
.phone .hdr { font-size: 12px; color: #8696A0; padding: 4px 10px 10px;
              display: flex; justify-content: space-between; }
.msg { background: #1F2C34; border-radius: 10px; padding: 10px 12px;
       font-size: 12.5px; white-space: pre-line; line-height: 1.5; }
.msg b { color: #fff; }
.msg a { color: #7FD8D2; text-decoration: none; }
.msg .t { display: block; text-align: right; color: #8696A0;
          font-size: 10.5px; margin-top: 4px; }

/* Read-only value display, for wizard summaries. */
.field { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
         background: #fff; }
.preview { background: var(--surface-2); border: 1px solid var(--line);
           border-radius: 10px; padding: 18px 20px; font-size: 13px;
           line-height: 1.55; }
.preview h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
      align-items: start; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
      align-items: start; }
.g21 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px;
       align-items: start; }
.g12 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px;
       align-items: start; }
.g2 > .panel, .g3 > .panel, .g21 > .panel, .g12 > .panel { margin-bottom: 0; }

.btn.ghost.on { border-color: var(--slate); background: var(--surface-3);
                color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

@media (max-width: 900px) {
  .g2, .g3, .g21, .g12 { grid-template-columns: 1fr; }
  .kpi { gap: 18px; }
}