/* Portal — the DesignEdge drawing sheet, the same idiom as the Site Survey home
   screen (../Onsite Drawing tool/src/styles.css §home screen): navy field, a
   drafting grid under a lamp at the top left, gold sheet border, serif hero,
   full-width tiles. Public on purpose: the login page needs it. */
:root{
 --ink:#0f1419;--ink-2:#2a3340;--ink-3:#5a6573;--ink-4:#8c95a0;
 --paper:#f7f4ed;--paper-2:#efe9dc;--line:#d8d2c4;--line-2:#b8b1a1;
 --navy:#102a43;--navy-2:#1a3a5c;--gold:#b08a3e;--gold-2:#d4ac5a;
 --red:#a13d3d;
 --mute:#96a2b0;--mute-2:#8b96a4;--mute-3:#6d7887;
 --rule:rgba(212,172,90,.34);--rule-2:rgba(212,172,90,.13);
 --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --serif:'IBM Plex Serif',Georgia,serif;
 --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--sans);font-size:13.5px;line-height:1.5;
  color:var(--paper);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 90% at 22% 0%,#1d3f63 0%,rgba(29,63,99,0) 60%),
    linear-gradient(160deg,#12222f 0%,#0f1419 55%,#0b0e12 100%);
  background-attachment:fixed}
/* the drafting grid: fine 26px squares, heavier 130px bays, fading away from the lamp */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(176,138,62,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,138,62,.09) 1px,transparent 1px),
    linear-gradient(rgba(176,138,62,.17) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,138,62,.17) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  -webkit-mask-image:radial-gradient(120% 100% at 25% 8%,#000 0%,rgba(0,0,0,.25) 68%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 25% 8%,#000 0%,rgba(0,0,0,.25) 68%,transparent 100%)}

/* ---------- the sheet ---------- */
.sheet{position:relative;z-index:1;min-height:100vh;display:flex;padding:max(14px,2vh) max(14px,2vw)}
.sheet-in{position:relative;flex:1;display:flex;flex-direction:column;gap:clamp(18px,3.4vh,34px);
  border:1px solid var(--rule);padding:clamp(20px,4vw,46px)}
.sheet-in::after{content:"";position:absolute;inset:6px;border:1px solid var(--rule-2);pointer-events:none}

/* brand lockup: white mark, rule, gold serif — as the kit defines it */
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand img{height:clamp(28px,3.6vw,36px);width:auto;display:block;opacity:.95}
.brand .mk{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,23px);color:var(--gold-2)}
.brand .ln{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--mute-2);border-left:1px solid rgba(212,172,90,.3);padding-left:12px}
.brand .lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand .btn-ghost{margin-left:auto}
.brand .btn-ghost + form,.brand form{margin:0}
.brand > form:last-child{margin-left:auto}
.brand .btn-ghost ~ form{margin-left:0}
a.btn-ghost{text-decoration:none;display:inline-block}
.btn-ghost{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);background:transparent;border:1px solid rgba(247,244,237,.16);
  padding:8px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.btn-ghost:hover{color:var(--gold-2);border-color:rgba(212,172,90,.5)}

/* ---------- hero ---------- */
.hero .eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--gold)}
.hero h1{margin:0;font-family:var(--serif);font-weight:600;line-height:1.03;letter-spacing:-.015em;
  color:var(--paper);font-size:clamp(30px,5.4vw,50px)}
.hero h1::after{content:"";display:block;width:74px;height:2px;background:var(--gold);margin-top:18px}
.hero .lede{margin:16px 0 0;max-width:52ch;color:var(--mute);font-size:14px;line-height:1.65}

/* ---------- tool groups ---------- */
.group{display:flex;flex-direction:column;gap:9px}
.group + .group{margin-top:clamp(14px,2.4vh,26px)}
.group-h{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;
  border-bottom:1px solid rgba(247,244,237,.1)}
.group-h b{font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold-2)}
.group-h i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--mute-3)}

/* tile — one row, fixed height, whatever the label length. The icon takes the slot
   the survey's home screen gives a step number: these tools are not a sequence, so
   a number would assert an order that does not exist. */
.tile{display:flex;align-items:center;gap:16px;width:100%;text-decoration:none;color:var(--paper);
  background:rgba(247,244,237,.035);border:1px solid rgba(247,244,237,.12);
  border-left:3px solid transparent;padding:13px 16px;min-height:74px;
  transition:background .15s,border-color .15s,transform .15s}
.tile:hover{background:rgba(247,244,237,.08);border-left-color:var(--gold);transform:translateX(3px)}
.tile:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.tile .ico{flex:none;width:34px;height:34px;color:var(--gold-2);opacity:.85}
.tile:hover .ico{opacity:1}
.tile .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile .tx b{font-size:14.5px;font-weight:600;line-height:1.25}
/* one line each, always — a wrapping label is what made the tiles different heights */
.tile .tx i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--gold);
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tx p{margin:0;font-size:12.5px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ar{margin-left:auto;flex:none;color:var(--gold);font-size:17px;opacity:.5;padding-left:8px}
.tile:hover .ar{opacity:1}

/* ---------- title block: the sheet's own record, with real values ---------- */
.tblock{margin:auto 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid rgba(212,172,90,.26)}
.tblock div{padding:9px 13px;border-right:1px solid rgba(212,172,90,.16);min-width:0}
.tblock div:last-child{border-right:0}
.tblock dt{margin:0 0 3px;font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mute-3)}
.tblock dd{margin:0;font-family:var(--mono);font-size:11px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis}
.tblock dd.hi{color:var(--gold-2)}
.note{margin:12px 0 0;font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--mute-3);max-width:70ch}
.note a{color:var(--mute-2)}

/* ---------- sign in ---------- */
.signin{margin:auto;width:100%;max-width:340px;padding:clamp(20px,4vh,40px) 0}
.signin form{border:1px solid rgba(247,244,237,.12);background:rgba(247,244,237,.035);padding:22px 20px 20px}
.signin .cap{margin:0 0 16px;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold)}
.signin label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mute-2);margin:0 0 6px}
.signin input{width:100%;padding:9px 10px;margin:0 0 15px;color:var(--paper);
  background:rgba(15,20,25,.5);border:1px solid rgba(247,244,237,.16);
  font-family:var(--sans);font-size:14px}
.signin input:focus{outline:none;border-color:var(--gold);background:rgba(15,20,25,.72)}
.signin button{width:100%;padding:11px;border:1px solid var(--gold);background:rgba(212,172,90,.14);
  color:var(--gold-2);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:background .15s}
.signin button:hover{background:rgba(212,172,90,.26)}
.err{margin:0 0 14px;padding:8px 11px;font-size:12px;color:#e6a5a5;
  background:rgba(161,61,61,.16);border:1px solid rgba(161,61,61,.5)}

/* ---------- flashes: say what happened, in the interface's voice ---------- */
.flashes{display:flex;flex-direction:column;gap:6px}
.flash{margin:0;padding:9px 13px;font-size:13px;border:1px solid}
.flash.ok{color:#a8cbb2;border-color:rgba(53,109,74,.55);background:rgba(53,109,74,.14)}
.flash.err{color:#e6a5a5;border-color:rgba(161,61,61,.55);background:rgba(161,61,61,.14)}

/* ---------- people table ---------- */
table.ppl{width:100%;border-collapse:collapse;background:rgba(247,244,237,.035);
  border:1px solid rgba(247,244,237,.12)}
table.ppl th,table.ppl td{padding:10px 13px;text-align:left;vertical-align:middle;
  border-bottom:1px solid rgba(247,244,237,.09)}
table.ppl tbody tr:last-child td{border-bottom:0}
table.ppl th{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mute-3);font-weight:600;background:rgba(15,20,25,.35)}
table.ppl td b{font-size:14px}
table.ppl .mono{font-family:var(--mono);font-size:11.5px}
table.ppl .dim{color:var(--mute-3)}
table.ppl .r{text-align:right}
table.ppl .you{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(212,172,90,.45);padding:1px 6px;margin-left:6px}
table.ppl form{display:inline-flex;gap:6px;align-items:center;margin:0}
td.acts{white-space:nowrap;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
td.acts input{width:130px;padding:6px 8px;background:rgba(15,20,25,.5);color:var(--paper);
  border:1px solid rgba(247,244,237,.16);font-family:var(--sans);font-size:12.5px}
td.acts input:focus{outline:none;border-color:var(--gold)}
.btn-ghost.danger:hover{color:#e6a5a5;border-color:rgba(161,61,61,.6)}
.pill-btn{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;cursor:pointer;background:transparent;
  color:var(--mute-2);border:1px solid rgba(247,244,237,.2)}
.pill-btn.on{color:var(--gold-2);border-color:rgba(212,172,90,.5);background:rgba(212,172,90,.12)}
.pill-btn:hover{border-color:var(--gold)}

/* add-someone row */
.addrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  background:rgba(247,244,237,.035);border:1px solid rgba(247,244,237,.12);padding:14px 16px}
.addrow label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--mute-2)}
.addrow input[type=text],.addrow input[type=password],.addrow input:not([type]){
  padding:8px 10px;background:rgba(15,20,25,.5);color:var(--paper);
  border:1px solid rgba(247,244,237,.16);font-family:var(--sans);font-size:14px;min-width:190px}
.addrow input:focus{outline:none;border-color:var(--gold)}
.addrow label.chk{flex-direction:row;align-items:center;gap:8px;text-transform:none;
  letter-spacing:.02em;font-family:var(--sans);font-size:13px;color:var(--mute);padding-bottom:9px}
.addrow input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;min-width:0}
.addrow button{padding:9px 20px;border:1px solid var(--gold);background:rgba(212,172,90,.14);
  color:var(--gold-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer}
.addrow button:hover{background:rgba(212,172,90,.26)}

@media (max-width:720px){
  table.ppl thead{display:none}
  table.ppl tr{display:block;border-bottom:1px solid rgba(247,244,237,.12);padding:6px 0}
  table.ppl td{display:block;border:0;padding:5px 13px}
  td.acts{justify-content:flex-start}
}

/* ---------- one orchestrated entrance, then nothing moves ---------- */
.rise{opacity:0;transform:translateY(10px);animation:rise .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .tile{transition:none}
  .tile:hover{transform:none}
}
@media (max-width:560px){
  .sheet{padding:8px}
  .sheet-in{padding:18px 14px}
  .tile{gap:12px;padding:12px 13px}
  .tile .ico{width:28px;height:28px}
}