/* ============================================================
   ds-accounting app chrome.

   Shares the invoice document's palette and type pairing so the tool
   and the thing it produces read as one object. The invoice document
   itself carries its own CSS inline and does not use this file.

   Desktop only. 1280px minimum target, no mobile breakpoints.
   ============================================================ */

:root{
  --navy:#192838;
  --teal:#75adae;
  --paper:#ffffff;
  --ink2:#52606d;

  --teal-wash:#f1f7f7;
  --teal-wash-2:#e4efef;
  --hair:#d7e0e3;
  --hair-soft:#e8edef;
  --ground:#e9edee;

  --ok:#2f7d5f;
  --ok-wash:#e8f3ee;
  --warn:#a2670c;
  --warn-wash:#f6efe2;

  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --grotesk:'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

*{box-sizing:border-box;}
html{background:var(--ground);}
body{
  margin:0;
  min-width:1280px;
  background:var(--ground);
  color:var(--navy);
  font-family:var(--grotesk);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:40px;
  background:var(--navy);
  padding:0 40px;
  height:64px;
}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand-mark svg{display:block;width:132px;height:auto;}
/* The wordmark is navy on navy, so knock it out to paper in the bar. */
.brand-mark svg .cls-1{fill:#ffffff;}
.topbar nav{display:flex;gap:4px;}
.topbar nav a{
  color:rgba(255,255,255,.72);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.03em;
  padding:9px 16px;border-radius:3px;
}
.topbar nav a:hover{color:#fff;background:rgba(255,255,255,.09);}
.topbar nav a.active{color:var(--navy);background:var(--teal);}

.page{max-width:1400px;margin:0 auto;padding:40px 40px 96px;}
.page.narrow{max-width:900px;}

/* ---------- type ---------- */
.h1{
  font-family:var(--serif);
  font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  margin:0 0 8px;
}
.lede{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 24px;max-width:76ch;}
.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px;
}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:3px solid var(--navy);padding-bottom:14px;margin-bottom:24px;
}

/* ---------- panels ---------- */
.panel{
  background:var(--paper);
  border:1px solid var(--hair);
  padding:28px 32px;
  margin-bottom:24px;
}
.panel.narrow{max-width:760px;}
.panel h2{
  font-family:var(--serif);
  font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;
}
.panel h2 + .lede{margin-bottom:20px;}

/* ---------- totals strip ---------- */
.totals{display:flex;gap:0;border:1px solid var(--hair);background:var(--paper);margin-bottom:24px;}
.totals > div{
  flex:1 1 0;padding:22px 26px;border-right:1px solid var(--hair-soft);
}
.totals > div:last-child{border-right:0;}
.totals .k{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 8px;
}
.totals .v{
  font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0;
  font-variant-numeric:tabular-nums;
}
.totals .v .cur{font-size:14px;font-weight:600;color:var(--ink2);margin-right:6px;}
.totals .overdue .v{color:var(--warn);}
.totals .sub{font-size:11.5px;color:var(--ink2);margin:6px 0 0;}

/* ---------- controls ---------- */
.toolrow{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;
}
.toolrow .spacer{flex:1 1 auto;}
label.field{display:block;}
label.field > span{
  display:block;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 6px;
}
input[type=text],input[type=date],input[type=email],input[type=number],select,textarea{
  font-family:var(--grotesk);
  font-size:13.5px;color:var(--navy);
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:9px 11px;
  min-width:180px;
}
input[type=text]:focus,input[type=date]:focus,input[type=email]:focus,
input[type=number]:focus,select:focus,textarea:focus{
  outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal);
}
textarea{min-height:76px;resize:vertical;width:100%;line-height:1.5;}
input.num{text-align:right;font-variant-numeric:tabular-nums;min-width:0;}
input[readonly]{background:var(--teal-wash);color:var(--ink2);}
label.check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;}
label.check input{width:16px;height:16px;accent-color:var(--teal);}

.btn{
  display:inline-block;
  font-family:var(--grotesk);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:10px 18px;border-radius:3px;
  border:1px solid var(--navy);background:transparent;color:var(--navy);
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--navy);color:var(--paper);}
.btn.primary{background:var(--navy);color:var(--paper);}
.btn.primary:hover{background:#0f1c28;}
.btn.ghost{border-color:var(--hair);color:var(--ink2);}
.btn.ghost:hover{background:var(--hair-soft);color:var(--navy);}
.btn.danger{border-color:#c9a0a0;color:#9a3b3b;}
.btn.danger:hover{background:#9a3b3b;color:var(--paper);}
.btn.small{font-size:11.5px;padding:6px 11px;}

/* ---------- tables ---------- */
table.data{width:100%;border-collapse:collapse;background:var(--paper);}
table.data thead th{
  background:var(--navy);color:var(--paper);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-align:left;padding:12px 14px;
}
table.data tbody td{
  font-size:13.5px;padding:13px 14px;
  border-bottom:1px solid var(--hair-soft);vertical-align:middle;
}
table.data tbody tr:hover{background:var(--teal-wash);}
table.data .r{text-align:right;font-variant-numeric:tabular-nums;}
table.data .num{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em;}
table.data a.rowlink{color:var(--navy);text-decoration:none;font-weight:600;}
table.data a.rowlink:hover{text-decoration:underline;}
table.data td.muted{color:var(--ink2);}
.empty{
  background:var(--paper);border:1px dashed var(--hair);
  padding:48px;text-align:center;color:var(--ink2);font-size:14px;
}

table.data td.actions{white-space:nowrap;}
table.data td.actions form{display:inline;margin:0;}
table.data td.actions > *{margin-right:6px;}
/* Marking a payment received is the one action on this page worth reaching for,
   so it carries the accent rather than sitting in the ghost row with the rest. */
.btn.paid-btn{border-color:var(--ok);color:var(--ok);}
.btn.paid-btn:hover{background:var(--ok);color:var(--paper);}
.paid-on{display:block;font-size:11px;color:var(--ink2);margin-top:4px;
         font-variant-numeric:tabular-nums;}

/* ---------- status pills ---------- */
.pill{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid transparent;
}
.pill.draft{background:var(--hair-soft);color:var(--ink2);border-color:var(--hair);}
.pill.sent{background:var(--teal-wash-2);color:#2f6566;border-color:#bcd7d7;}
.pill.paid{background:var(--ok-wash);color:var(--ok);border-color:#bcdccc;}
.pill.overdue{background:var(--warn-wash);color:var(--warn);border-color:#e6d5b4;}
.pill.signed{background:var(--ok-wash);color:var(--ok);border-color:#bcdccc;}

.party-preview{
  margin:0;padding:12px 14px;background:var(--teal-wash);
  font-size:12.5px;line-height:1.6;color:var(--navy);
}

/* ---------- client contacts ---------- */
/* Wider than the other panels on this form: "Sheikh Mohammed bin Abdulla Al
   Thani, Co-founder and executive sponsor" does not fit in a 150px box. */
.panel.people{max-width:1040px;}
table.contacts-edit{width:100%;border-collapse:collapse;table-layout:fixed;}
table.contacts-edit th:nth-child(1),table.contacts-edit td:nth-child(1){width:34%;}
table.contacts-edit th:nth-child(2),table.contacts-edit td:nth-child(2){width:30%;}
table.contacts-edit th:nth-child(3),table.contacts-edit td:nth-child(3){width:26%;}
table.contacts-edit thead th{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);text-align:left;padding:0 10px 8px;border-bottom:2px solid var(--navy);
}
table.contacts-edit td{padding:7px 10px;border-bottom:1px solid var(--hair-soft);vertical-align:middle;}
table.contacts-edit td input[type=text]{width:100%;min-width:0;}
table.contacts-edit .c-sign{width:60px;text-align:center;}
table.contacts-edit .c-sign input{width:16px;height:16px;accent-color:var(--teal);}
table.contacts-edit .c-x{width:90px;}

/* ---------- contract editor ---------- */
/* Each clause is its own card because the repeated task is changing one term,
   not rewriting the document. */
.clause-card{
  border:1px solid var(--hair);background:var(--paper);
  padding:16px 18px;margin-bottom:12px;
}
.clause-card.working{opacity:.55;}
/* State lives on each card, not on the whole list. Dimming everything together
   is what made a failure look like an empty success. */
.clause-card[data-state="pending"]{border-left:3px solid var(--teal);}
.clause-card[data-state="pending"] .clause-body{
  background:repeating-linear-gradient(-45deg,var(--hair-soft),var(--hair-soft) 8px,
             var(--paper) 8px,var(--paper) 16px);
  color:var(--ink2);
}
.clause-card[data-state="empty"] .clause-body{background:var(--hair-soft);}
/* Red appears nowhere else on a card, so failures are unmistakable while
   scrolling past sixteen of them. */
.clause-card[data-state="failed"]{border-left:3px solid #9a3b3b;}
.clause-error{
  margin:8px 0 0;padding:9px 12px;font-size:12px;line-height:1.5;
  background:#fbf0f0;border-left:3px solid #9a3b3b;color:#9a3b3b;
}
.clause-error strong{display:block;margin-bottom:2px;}
.write-btn{border-color:var(--teal);color:#2f6566;}
.write-btn:hover{background:var(--teal);color:var(--navy);}
/* Only offer to write a clause that has none. */
.clause-card[data-state="written"] .write-btn,
.clause-card[data-state="pending"] .write-btn{display:none;}
.clause-card[data-state="failed"] .write-btn::after{content:" again";}

.draft-progress{
  position:fixed;right:24px;bottom:24px;z-index:40;
  background:var(--navy);color:var(--paper);
  padding:14px 18px;border-radius:4px;max-width:360px;
  box-shadow:0 6px 24px rgba(25,40,56,.28);
}
.draft-progress .dp-line{margin:0 0 10px;font-size:13px;line-height:1.45;}
.draft-progress .dp-line b{font-variant-numeric:tabular-nums;}
.draft-progress .dp-actions{display:flex;gap:8px;flex-wrap:wrap;}
.draft-progress .btn{border-color:rgba(255,255,255,.3);color:var(--paper);}
.draft-progress .btn:hover{background:rgba(255,255,255,.14);color:var(--paper);}
.draft-progress.has-failures{background:#7d2b2b;}
.brief-count{margin:6px 0 0;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums;}
.brief-count.warn{color:var(--warn);}
.brief-count.over{color:#9a3b3b;font-weight:600;}
.clause-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.clause-n{
  flex:0 0 26px;height:26px;border-radius:999px;background:var(--navy);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}
.clause-heading{
  flex:1 1 auto;min-width:0;
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--navy);
  border:1px solid transparent;background:transparent;padding:6px 8px;border-radius:3px;
}
.clause-heading:hover{border-color:var(--hair);}
.clause-heading:focus{background:var(--paper);border-color:var(--teal);}
.clause-body{
  width:100%;min-height:64px;resize:vertical;overflow:hidden;
  font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--navy);
  border:1px solid var(--hair);border-radius:3px;padding:10px 12px;
}
.src-pill{
  flex:0 0 auto;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--hair);
  color:var(--ink2);background:var(--hair-soft);
}
.src-pill.model{background:var(--teal-wash-2);color:#2f6566;border-color:#bcd7d7;}
.src-pill.edited{background:var(--warn-wash);color:var(--warn);border-color:#e6d5b4;}
.src-pill.manual{background:var(--ok-wash);color:var(--ok);border-color:#bcdccc;}
/* A section placed from a document the person pasted: their words, transcribed. */
.src-pill.pasted{background:#eef0f8;color:#3f4a8a;border-color:#c9cfe8;}
.clause-flag{
  margin:8px 0 0;padding:8px 12px;font-size:12px;
  background:var(--warn-wash);border-left:3px solid var(--warn);color:var(--warn);
}
.clause-actions{display:flex;align-items:center;gap:8px;margin-top:10px;}
.clause-actions .spacer{flex:1 1 auto;}
.redraft-input{
  flex:1 1 auto;min-width:0;max-width:520px;
  font-size:12.5px;padding:7px 10px;
}
.redraft-btn{border-color:var(--teal);color:#2f6566;}
.redraft-btn:hover{background:var(--teal);color:var(--navy);}
.draft-state{font-size:12.5px;color:var(--ink2);}
.draft-state.working{color:var(--warn);}
.draft-state.done{color:var(--ok);}
.draft-state.error{color:#9a3b3b;font-weight:600;}
.model-note{font-size:11.5px;color:var(--ink2);}
.model-note code{font-family:var(--mono);font-size:11px;}

/* ---------- editor ---------- */
.editor-grid{display:flex;gap:24px;align-items:flex-start;}
.editor-main{flex:1 1 auto;min-width:0;}
.editor-side{flex:0 0 300px;}
.fieldrow{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px;}
.fieldrow > label.field{flex:0 0 auto;}
.fieldrow > label.field.wide{flex:1 1 240px;}
.fieldrow > label.field.wide input{width:100%;}

table.items-edit{width:100%;border-collapse:collapse;}
table.items-edit thead th{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);text-align:left;padding:0 10px 8px;
  border-bottom:2px solid var(--navy);
}
table.items-edit th.r,table.items-edit td.r{text-align:right;}
table.items-edit td{padding:7px 10px;border-bottom:1px solid var(--hair-soft);vertical-align:middle;}
table.items-edit td input{width:100%;min-width:0;}
table.items-edit .c-desc{width:auto;}
table.items-edit .c-qty{width:110px;}
table.items-edit .c-unit{width:150px;}
table.items-edit .c-amt{width:150px;}
table.items-edit .c-x{width:44px;}
table.items-edit .amount{
  font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;
  display:block;text-align:right;padding-right:11px;
}
.items-total{
  display:flex;justify-content:flex-end;align-items:baseline;gap:24px;
  padding:16px 21px 0;
}
.items-total .k{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);
}
.items-total .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;}

.savestate{
  font-size:11.5px;color:var(--ink2);letter-spacing:.02em;
  min-height:16px;
}
.savestate.saving{color:var(--warn);}
.savestate.saved{color:var(--ok);}
.savestate.error{color:#9a3b3b;font-weight:600;}

/* ---------- settings ---------- */
.kv-grid{display:flex;flex-wrap:wrap;gap:18px;}
.kv-grid label.field{flex:1 1 320px;}
.kv-grid label.field input{width:100%;}
.corr-edit{
  border:1px solid var(--hair);background:var(--teal-wash);
  padding:16px 18px;margin-bottom:12px;
}
.corr-edit .fieldrow{margin-bottom:0;}
.corr-edit label.field.bank{flex:1 1 340px;}
.corr-edit label.field.bank input{width:100%;}
.notice{
  border-left:3px solid var(--teal);background:var(--teal-wash);
  padding:14px 18px;margin:0 0 22px;
  font-size:13px;line-height:1.55;color:var(--ink2);
}
.notice strong{color:var(--navy);}
.notice.warn{border-left-color:var(--warn);background:var(--warn-wash);}
.flash{
  background:var(--ok-wash);border:1px solid #bcdccc;color:var(--ok);
  padding:12px 18px;margin:0 0 22px;font-size:13px;font-weight:600;
}
.mono{font-family:var(--mono);letter-spacing:.045em;font-variant-numeric:tabular-nums;}
.next-number{
  font-family:var(--grotesk);
  font-size:26px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin:0;
}

/* ---------- change request editor ---------- */
/* Sections are cards of known kinds in print order. Only phases can be added,
   moved or deleted; the group header carries the document's section number. */
.cr-group{margin-bottom:26px;}
.cr-group-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--hair);}
.cr-group-hd h3{margin:0;font-family:var(--grotesk);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);}
.cr-group-hd .spacer{flex:1 1 auto;}
.cr-n{font-family:var(--grotesk);font-size:12px;font-weight:700;color:var(--teal);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.cr-group.is-product .cr-group-hd{border-bottom-style:dashed;}
/* An optional section with no text has no number: it is not in the print. */
.cr-n.is-np{color:var(--ink2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10px;}
.cr-group-note{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--ink2);}
.cr-group-note.fee-preview{font-family:var(--serif);font-size:12.5px;color:var(--navy);
  background:var(--teal-wash);border-left:3px solid var(--teal);padding:8px 12px;}
.cr-group-note.fee-preview strong{font-family:var(--grotesk);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}
.cr-not-printed{margin:6px 0 0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);}
/* The paste panel: a document in, the cards out. */
#paste-text{width:100%;font-family:var(--mono);font-size:12px;line-height:1.5;}
.paste-result{margin:12px 0 0;padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--navy);
  background:var(--teal-wash);border-left:3px solid var(--teal);}
.paste-result.has-flags,.paste-result.error{background:var(--warn-wash);border-left-color:var(--warn);}
#fee-note{width:100%;min-height:110px;font-family:var(--serif);font-size:12.5px;line-height:1.5;}
.fee-note-help code{font-family:var(--mono);font-size:11px;background:var(--hair-soft);padding:1px 4px;border-radius:3px;}
.cr-card[data-kind]:not([data-kind="phase"]) .clause-n{display:none;}
.cr-timing{
  flex:0 0 260px;min-width:0;font-size:12px;color:var(--ink2);
  border:1px solid transparent;background:transparent;padding:6px 8px;border-radius:3px;
}
.cr-timing:hover{border-color:var(--hair);}
.cr-timing:focus{background:var(--paper);border-color:var(--teal);color:var(--navy);}
/* Fee lines live in the 300px sidebar, so each one stacks. */
.cr-item{padding:10px 0;border-bottom:1px solid var(--hair-soft);}
.cr-item:first-child{padding-top:0;}
.cr-item-desc{width:100%;font-size:12.5px;margin-bottom:8px;}
.cr-item-nums{display:flex;gap:8px;align-items:flex-end;}
.cr-item-nums label{flex:1 1 0;min-width:0;display:block;}
.cr-item-nums label span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:4px;}
.cr-item-nums label input{width:100%;min-width:0;padding:6px 8px;font-size:12.5px;}
.cr-item-nums .btn{flex:0 0 auto;padding:6px 9px;}
.editor-side .items-total .v{font-size:18px;}
.issuer-edit{padding:18px 0;border-top:1px solid var(--hair);}
.issuer-edit:first-child{border-top:0;padding-top:0;}

/* ---------- NDAs and the signature ----------------------------------------
   Hand-written, like everything else here: no Tailwind, no build step. */

/* The preamble is read only on the editor: it is composed from the issuer and
   the client record, so it is shown as prose rather than as fields. */
.nda-preamble{font-family:var(--serif);font-size:12.5px;line-height:1.6;color:var(--navy);
  background:var(--teal-wash);border-left:3px solid var(--teal);padding:12px 14px;}
.nda-preamble p{margin:0 0 7px;}
.nda-preamble p:last-child{margin-bottom:0;}
.nda-preamble .mk{color:var(--teal);font-weight:700;}

/* A clause card carries no drafting state, so its number column is the printed
   clause number rather than a position. "--" means the clause is removed. */
.nda-card .clause-n{min-width:26px;text-align:right;}
.nda-card[data-removed="1"]{opacity:.6;}
.nda-card[data-removed="1"] .clause-body{background:var(--hair-soft);}
.nda-card[data-source="template"] .src-pill{background:var(--hair-soft);color:var(--ink2);}

/* The three governing law options, on the form and in the editor sidebar. */
.law-choices{display:flex;flex-direction:column;gap:10px;}
.law-choices label.check{align-items:flex-start;font-size:12.5px;line-height:1.5;}
.law-choices label.check input{margin-top:2px;flex:0 0 auto;}
.law-choices strong{font-weight:700;}

/* Settings > Signature: the preview beside its own upload form. */
.sig-settings{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;}
.sig-preview{flex:0 0 260px;min-height:120px;display:flex;align-items:center;justify-content:center;
  padding:14px;border:1px solid var(--hair);background:var(--paper);}
.sig-preview img{max-width:100%;max-height:150px;display:block;}
.sig-forms{flex:1 1 320px;min-width:0;}
.sig-forms input[type="file"]{font-size:12.5px;}

/* ---------- who is signed in ----------
   Sits at the right end of the top bar. The role is printed next to the
   address on purpose: "why can I not see Settings" is answered by looking up,
   not by asking somebody. */
.whoami{margin-left:auto;display:flex;align-items:center;gap:12px;}
.whoami form{margin:0;}
.whoami-role{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--teal);padding:4px 9px;border-radius:999px;
}
.whoami-email{font-size:12.5px;color:#b9c6ce;}
.whoami-out{
  font-family:var(--grotesk);font-size:11.5px;font-weight:600;
  background:transparent;border:1px solid rgba(255,255,255,.28);color:#dfe7ea;
  padding:6px 12px;border-radius:3px;cursor:pointer;
}
.whoami-out:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ---------- the sign-in gate ----------
   The one page in the app with no top bar and no navigation, so it carries
   its own centring instead of .page. */
body.gate{
  min-width:0;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:40px;
}
.gate-card{
  background:var(--paper);
  border:1px solid var(--hair);
  padding:48px 52px 44px;
  width:560px;max-width:100%;
}
.gate-mark{background:var(--navy);padding:18px 22px;margin:-48px -52px 32px;}
.gate-mark svg{display:block;width:132px;height:auto;}
.gate-mark svg .cls-1{fill:#ffffff;}
.gate-card .h1{margin:0 0 24px;}
.gate-note{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0 0 20px;}
.gate-note strong{color:var(--navy);}
.gate-error{
  font-size:13px;line-height:1.55;color:#9a3b3b;
  background:#fbf3f3;border:1px solid #e6cfcf;padding:12px 14px;margin:0 0 20px;
}
.gate-google{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--grotesk);font-size:13.5px;font-weight:600;
  text-decoration:none;color:var(--navy);
  background:var(--paper);border:1px solid var(--hair);
  padding:12px 20px;border-radius:3px;
}
.gate-google:hover{border-color:var(--navy);background:var(--teal-wash);}
.gate-fine{font-size:12px;line-height:1.6;color:var(--ink2);margin:20px 0 0;}
.gate-card form{margin-top:24px;}

/* ---------- the People page ---------- */
.you{
  display:inline-block;margin-left:8px;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);background:var(--hair-soft);border-radius:999px;padding:3px 8px;
}
.you.invited{background:var(--warn-wash);color:var(--warn);}
.rolebox{display:flex;gap:6px;align-items:center;margin:0;}
.rolebox select{min-width:120px;padding:6px 9px;font-size:12.5px;}
table.data.matrix tbody td{font-size:13px;}
table.data.matrix tbody td.r{font-weight:600;color:var(--ok);}

/* The second door on the sign-in page: closed by default so the Google button
   stays the obvious thing, open when it is the only way in. */
.gate-code{margin-top:28px;border-top:1px solid var(--hair-soft);padding-top:18px;}
.gate-code summary{
  font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;
  list-style:none;display:inline-flex;align-items:center;gap:7px;
}
.gate-code summary::-webkit-details-marker{display:none;}
.gate-code summary::before{content:"+";font-weight:700;color:var(--teal);}
.gate-code[open] summary::before{content:"-";}
.gate-code summary:hover{color:var(--navy);}
.gate-code form{display:flex;gap:10px;align-items:flex-end;margin:16px 0 0;flex-wrap:wrap;}
.gate-code input[type=text]{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;}
.gate-code .gate-fine{margin-top:12px;}
.gate-code code{font-family:var(--mono);font-size:11px;background:var(--hair-soft);padding:1px 5px;}

/* "Nothing was emailed": the block that hands over the words to send, because
   inviting somebody in this app notifies them in no way at all. */
.panel.handoff{border-left:3px solid var(--warn);}
.handoff-text{
  width:100%;font-family:var(--grotesk);font-size:13.5px;line-height:1.55;
  background:var(--teal-wash);border:1px solid var(--hair);padding:12px 14px;
  resize:vertical;margin-bottom:12px;
}