/* Iconic Built — Build Workflow.
   Dark, brand-aligned to iconicbuilt.co: black + bone + brand gold (#d29d15).
   Status colors (green / orange / red) are kept DISTINCT from the gold accent,
   which is reserved for brand chrome (logo, primary buttons, links, active).
   Inter (UI) + Archivo (display/numbers) approximate the brand's Neue Haas
   Grotesk + Termina. Type and tap targets are sized up for tablet use on the
   shop floor. Numbers use tabular figures so columns line up. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* surfaces (warm-neutral near-black, layered) */
  --bg:#0b0b0b; --panel:#161616; --panel2:#1f1f1f; --panel3:#2b2b2b;
  --line:#2c2c2c; --line2:#3c3c3c;
  /* text (warm near-white) */
  --ink:#f4f2ec; --dim:#b0aca3; --faint:#7c7870;
  /* brand */
  --gold:#d29d15; --gold-bright:#edbb3e; --gold-tint:rgba(210,157,21,.14);
  /* status (bar_color() returns var(--green/amber/red)) */
  --green:#46b85a; --amber:#f5832a; --red:#e5484d;
  --radius:8px; --radius-sm:5px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-disp:'Archivo','Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:17px;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.5;min-height:100vh;padding-bottom:48px;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-bright);}
.mono{font-family:var(--font-disp);font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Header / nav */
header{position:sticky;top:0;z-index:50;background:#0d0d0d;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo{height:24px;width:auto;display:block;}
.brand-app{font-family:var(--font-disp);font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);padding-left:14px;border-left:1px solid var(--line2);}
.topnav{display:flex;align-items:center;gap:18px;}
.topnav a{color:var(--dim);font-size:14px;font-weight:500;}
.topnav a:hover{color:var(--ink);}
.who-name{color:var(--faint);font-size:13px;}

.wrap{max-width:1200px;margin:0 auto;padding:26px 22px;}

/* Buttons */
.btn{font-family:var(--font-disp);font-weight:600;letter-spacing:.3px;font-size:15px;padding:12px 18px;min-height:46px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink);cursor:pointer;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.12s;}
.btn:hover{border-color:var(--gold);}
.btn:active{transform:translateY(1px);}
.btn.amber{background:var(--gold);color:#1a1305;border-color:var(--gold);}
.btn.amber:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
.btn.ghost{background:transparent;}
.btn.sm{font-size:13px;padding:9px 13px;min-height:38px;}
.btn.danger:hover{border-color:var(--red);color:var(--red);}
.btn:disabled{opacity:.35;cursor:default;}
.inline{display:inline;}

/* Overview — grid of build cards */
.rail-label{font-family:var(--font-disp);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:12px;}
.rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;}
.buildcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.15s;}
.buildcard:hover{border-color:var(--gold);transform:translateY(-2px);}
.bc-pic{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#242424,#121212);overflow:hidden;}
.bc-pic img{width:100%;height:100%;object-fit:cover;}
.bc-pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-size:12px;letter-spacing:1px;text-transform:uppercase;text-align:center;}
.bc-flag{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;font-family:var(--font-disp);font-weight:700;
  font-size:11px;letter-spacing:.5px;padding:3px 8px;border-radius:3px;text-transform:uppercase;}
.bc-body{padding:14px 16px 16px;}
.bc-num{font-family:var(--font-disp);font-weight:800;font-size:24px;letter-spacing:.5px;color:var(--ink);}
.bc-name{font-size:14px;color:var(--dim);margin-top:2px;min-height:18px;}
.bc-bar{height:10px;background:#000;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:12px 0 8px;}
.bc-bar i{display:block;height:100%;border-radius:6px;}
.bc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.bc-meta .h{font-family:var(--font-disp);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;}
.bc-meta .d{color:var(--faint);font-size:12px;white-space:nowrap;}
.addbuild{display:flex;align-items:center;justify-content:center;min-height:232px;border:1px dashed var(--line2);
  border-radius:var(--radius);color:var(--faint);font-family:var(--font-disp);font-weight:600;letter-spacing:1px;
  text-transform:uppercase;font-size:14px;transition:.12s;}
.addbuild:hover{border-color:var(--gold);color:var(--gold);}

/* Completed builds — collapsed <details> section at the bottom of the overview */
.completed-block{margin-top:34px;border-top:1px solid var(--line);padding-top:8px;}
.completed-summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;padding:14px 2px;
  font-family:var(--font-disp);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:600;}
.completed-summary::-webkit-details-marker{display:none;}
.completed-summary:hover{color:var(--dim);}
.cs-count{font-variant-numeric:tabular-nums;background:var(--panel2);border:1px solid var(--line2);color:var(--dim);
  border-radius:10px;padding:1px 9px;font-size:12px;letter-spacing:.5px;}
.cs-chevron{color:var(--faint);transition:transform .15s;}
details[open]>.completed-summary .cs-chevron{transform:rotate(180deg);}
.completed-rail{margin-top:6px;}
.buildcard.is-complete{opacity:.62;}
.buildcard.is-complete:hover{opacity:1;border-color:var(--green);}
.buildcard.is-complete .bc-pic img{filter:grayscale(.35);}
.bc-done{position:absolute;top:8px;left:8px;background:var(--green);color:#08210d;font-family:var(--font-disp);font-weight:700;
  font-size:11px;letter-spacing:.5px;padding:3px 8px;border-radius:3px;text-transform:uppercase;}
.build-complete-tag{display:inline-block;margin-top:8px;color:var(--green);background:rgba(70,184,90,.14);
  font-family:var(--font-disp);font-weight:700;font-size:12px;letter-spacing:.5px;padding:4px 10px;border-radius:4px;}

/* Back link */
.backbtn{display:inline-block;font-family:var(--font-disp);color:var(--faint);font-size:13px;letter-spacing:1px;
  text-transform:uppercase;font-weight:600;margin-bottom:16px;}
.backbtn:hover{color:var(--gold);}

/* Build header */
.buildhead{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:20px;}
.buildhead .left{display:flex;align-items:center;gap:18px;}
.build-thumb{width:140px;height:100px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line2);flex:0 0 auto;}
.buildhead .left .bnum{font-family:var(--font-disp);font-weight:800;font-size:38px;letter-spacing:.5px;line-height:1;}
.buildhead .left .bname{font-size:17px;color:var(--dim);margin-top:6px;}
.buildhead .stats{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.stat .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:600;}
.stat .val{font-family:var(--font-disp);font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px;line-height:1;}
.stat .val.small-val{font-size:18px;}
.stat .val small{font-size:15px;color:var(--faint);font-weight:600;}
.targetbar{min-width:240px;}
.targetbar .tb{height:12px;background:#000;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-top:8px;}
.targetbar .tb i{display:block;height:100%;border-radius:7px;}
.targetbar .tlabel{font-family:var(--font-disp);font-size:13px;font-weight:600;margin-top:7px;font-variant-numeric:tabular-nums;}
.buildhead-actions{display:flex;gap:10px;align-items:center;}

.stages-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 12px;}

/* Stage list */
.stages{display:flex;flex-direction:column;gap:10px;}
.stagecard{display:flex;align-items:stretch;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);transition:.12s;}
.stagecard:hover{border-color:var(--gold);transform:translateX(2px);}
.sc-num{flex:0 0 56px;display:flex;align-items:center;justify-content:center;background:var(--panel2);
  font-family:var(--font-disp);font-weight:800;font-size:18px;color:var(--faint);border-right:1px solid var(--line);}
.stagecard.done .sc-num{background:rgba(70,184,90,.14);color:var(--green);}
.stagecard.active .sc-num{background:var(--gold-tint);color:var(--gold);}
.sc-main{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;}
.sc-title{font-family:var(--font-disp);font-size:18px;font-weight:600;}
.sc-desc{color:var(--faint);font-weight:400;font-family:var(--font-body);font-size:14px;}
.sc-sub{font-size:13px;color:var(--faint);margin-top:3px;}
.sc-right{display:flex;align-items:center;gap:16px;}
.sc-hrs{font-family:var(--font-disp);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;}
.sc-flag{font-family:var(--font-disp);font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;text-transform:uppercase;}
.flag-over{background:rgba(229,72,77,.16);color:var(--red);}
.sc-status{font-family:var(--font-disp);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:4px;font-weight:700;}
.st-ns{background:var(--panel3);color:var(--dim);}
.st-ip{background:var(--gold-tint);color:var(--gold);}
.st-dn{background:rgba(70,184,90,.16);color:var(--green);}
.sc-arrow{color:var(--faint);font-size:14px;}

/* Stage detail */
.stagedetailhead{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:8px;}
.stagedetailhead .eyebrow{font-family:var(--font-disp);font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--gold);}
.stagedetailhead h2{font-family:var(--font-disp);font-size:30px;font-weight:700;margin-top:4px;line-height:1.05;}
.stagedetailhead .buildref{font-size:14px;color:var(--faint);margin-top:6px;}
.stage-desc{color:var(--dim);margin-top:12px;max-width:74ch;line-height:1.6;white-space:pre-wrap;}
.stagedetailhead .tothrs{font-family:var(--font-disp);font-size:30px;font-weight:800;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums;}
.stagedetailhead .tothrs small{display:block;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--faint);}

.statusrow{display:flex;gap:10px;margin:16px 0 24px;flex-wrap:wrap;}
.statusrow .sbtn{font-family:var(--font-disp);font-weight:600;font-size:13px;letter-spacing:.5px;padding:12px 18px;min-height:46px;
  border:1px solid var(--line2);background:transparent;color:var(--dim);cursor:pointer;border-radius:var(--radius-sm);transition:.12s;}
.statusrow .sbtn:hover{color:var(--ink);}
.statusrow .sbtn.on-ns{background:var(--panel3);border-color:var(--line2);color:var(--ink);}
.statusrow .sbtn.on-ip{background:var(--gold-tint);border-color:var(--gold);color:var(--gold);}
.statusrow .sbtn.on-dn{background:rgba(70,184,90,.16);border-color:var(--green);color:var(--green);}

/* Segments (collapsible <details>) */
.subsec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;}
.subsec.over{border-color:rgba(229,72,77,.5);}
.subsec.seg-done{border-color:rgba(70,184,90,.45);}
.subhead{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--panel2);cursor:pointer;list-style:none;}
.subhead::-webkit-details-marker{display:none;}
.subhead:hover{background:var(--panel3);}
details[open]>.subhead{border-bottom:1px solid var(--line);}
.subsec.seg-done .subhead{background:rgba(70,184,90,.08);}
.subhead .sn{font-family:var(--font-disp);font-size:17px;font-weight:600;flex:0 0 auto;}
.seg-donepill{flex:0 0 auto;font-family:var(--font-disp);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--green);
  background:rgba(70,184,90,.16);padding:3px 9px;border-radius:3px;}
.seg-preview{flex:0 1 auto;min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font-size:14px;}
.subhead .seg{display:flex;align-items:center;flex:1;min-width:60px;}
.subhead .segbar{flex:1;max-width:220px;height:10px;background:#000;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.subhead .segbar i{display:block;height:100%;border-radius:6px;}
.subhead .sh{font-family:var(--font-disp);font-size:15px;font-weight:700;white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.seg-chevron{flex:0 0 auto;color:var(--faint);transition:transform .15s;}
details[open] .seg-chevron{transform:rotate(180deg);}
.seg-actionsbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);}
.seg-tgt{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:8px;}
.tgtedit{font-family:var(--font-disp);width:72px;padding:9px 10px;font-size:14px;}
.seg-desc-edit{display:flex;flex-direction:column;gap:8px;padding:14px 18px 0;}
.seg-desc-edit button{align-self:flex-start;}
.seg-desc{color:var(--dim);padding:14px 18px 0;line-height:1.6;white-space:pre-wrap;}

/* Clock-in row + entries */
.clockrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:16px 18px;background:var(--panel);}
.field-sm{display:flex;flex-direction:column;gap:5px;}
.field-sm label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:600;}
.clockrow .note-field{flex:1;min-width:160px;}
.clockrow .note-field input{width:100%;}
.entries{padding:4px 18px 16px;}
.entry{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;}
.entry:last-child{border-bottom:none;}
.entry .date{font-family:var(--font-disp);font-size:13px;color:var(--faint);min-width:46px;font-variant-numeric:tabular-nums;}
.entry .who{font-weight:600;min-width:100px;}
.entry .times{font-family:var(--font-disp);font-size:14px;color:var(--dim);flex:0 0 auto;display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;}
.entry .times input{padding:7px 8px;font-size:13px;width:104px;}
.entry .to{color:var(--faint);}
.entry .ehrs{font-family:var(--font-disp);font-weight:800;color:var(--gold);min-width:66px;text-align:right;font-variant-numeric:tabular-nums;}
.entry .enote{flex:1;min-width:100px;font-family:var(--font-body);padding:7px 9px;font-size:13px;}
.entry .ex{background:none;border:none;color:var(--faint);cursor:pointer;font-size:16px;padding:0 6px;}
.entry .ex:hover{color:var(--red);}
.noentries{color:var(--faint);font-size:14px;padding:10px 0;}
.addsub-form{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.addsub-form input{flex:1;min-width:240px;}

/* Inputs */
input[type=text],input[type=email],input[type=password],input[type=time],input[type=date],input[type=number]{
  font-family:var(--font-body);background:#000;border:1px solid var(--line2);color:var(--ink);
  padding:12px 12px;border-radius:var(--radius-sm);font-size:16px;}
input:focus{outline:none;border-color:var(--gold);}
textarea{font-family:var(--font-body);background:#000;border:1px solid var(--line2);color:var(--ink);
  padding:11px 12px;border-radius:var(--radius-sm);font-size:15px;width:100%;resize:vertical;line-height:1.5;}
textarea:focus{outline:none;border-color:var(--gold);}

/* Forms / auth */
.formtitle{font-family:var(--font-disp);font-size:26px;font-weight:700;margin-bottom:18px;}
.cardform{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:480px;}
.authbox{max-width:440px;margin:40px auto;}
.authbox h2{font-family:var(--font-disp);font-size:28px;font-weight:700;margin-bottom:18px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-bottom:7px;font-weight:600;}
.field input{width:100%;}
.modalfoot{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;}
.muted{color:var(--faint);font-size:14px;}
.bootstrap-note{margin-top:18px;text-align:center;}

/* Alerts */
.alert{padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:15px;border:1px solid transparent;}
.alert-error{background:rgba(229,72,77,.12);color:#ff9b8e;border-color:rgba(229,72,77,.3);}
.alert-success{background:rgba(70,184,90,.12);color:#8fe0a0;border-color:rgba(70,184,90,.3);}

/* Password show/hide */
.pw-wrap{display:flex;align-items:stretch;}
.pw-wrap input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.pw-toggle{flex:0 0 auto;width:48px;display:flex;align-items:center;justify-content:center;background:var(--panel3);
  border:1px solid var(--line2);border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink);cursor:pointer;padding:0;}
.pw-toggle:hover{background:var(--line2);}
.pw-toggle.on{color:var(--gold);}
.pw-toggle svg{display:block;}

/* Admin users */
.usertable{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.usertable th,.usertable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px;}
.usertable th{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:600;}
.usertable tr:last-child td{border-bottom:none;}
.usertable td form.inline{margin-right:8px;}
.pill{font-family:var(--font-disp);font-size:12px;font-weight:700;padding:3px 10px;border-radius:3px;}
.pill-on{background:rgba(70,184,90,.16);color:var(--green);}
.pill-off{background:var(--panel3);color:var(--faint);}
.add-user-title{margin-top:28px;}
.temp-pw{font-family:var(--font-disp);font-weight:700;letter-spacing:1px;color:var(--gold);
  background:#000;border:1px solid var(--line2);padding:3px 10px;border-radius:4px;display:inline-block;}

/* Manage stages */
.manage-note{margin-bottom:18px;}
.stage-manage{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.sm-row{display:flex;align-items:flex-start;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.sm-pos{flex:0 0 auto;font-family:var(--font-disp);color:var(--faint);font-weight:800;font-size:16px;padding-top:9px;}
.sm-edit{flex:1;display:flex;flex-direction:column;gap:8px;margin:0;}
.sm-edit input{width:100%;}
.sm-edit button{align-self:flex-start;}
.sm-segs{flex:0 0 auto;font-size:13px;white-space:nowrap;padding-top:11px;}
.sm-actions{flex:0 0 auto;display:flex;gap:8px;align-items:center;}
.sm-actions form{margin:0;}

/* Misc */
.empty{text-align:center;padding:54px 20px;color:var(--faint);}
.empty p{margin-bottom:16px;font-size:16px;}
footer{text-align:center;color:var(--faint);font-size:12px;letter-spacing:1px;padding:26px;}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---- Phones / small tablets ---- */
@media(max-width:600px){
  html{font-size:16px;}
  header{padding:10px 14px;gap:8px;}
  .topnav{gap:14px;}
  .who-name{display:none;}
  .wrap{padding:18px 14px;}
  .brand-app{display:none;}

  .rail{grid-template-columns:1fr 1fr;gap:12px;}

  /* Build header stacks; image leads, gauge spans full width */
  .buildhead{flex-direction:column;}
  .buildhead .left{flex-direction:column;align-items:flex-start;width:100%;}
  .build-thumb{width:100%;height:180px;}
  .buildhead .left .bnum{font-size:32px;}
  .buildhead .stats{gap:18px;width:100%;}
  .targetbar{min-width:0;width:100%;}

  /* Stage rows: flag/hours/status drop below the title */
  .sc-main{flex-wrap:wrap;gap:8px 12px;}
  .sc-right{width:100%;justify-content:flex-start;}

  /* Segment head: drop the preview (full text is inside), bar on its own line */
  .subhead{flex-wrap:wrap;}
  .seg-preview{display:none;}
  .subhead .sn{flex:1;}
  .subhead .seg{order:9;flex:1 0 100%;}
  .subhead .segbar{max-width:none;}

  /* Logging form stacks full-width */
  .clockrow{flex-direction:column;align-items:stretch;}
  .field-sm input,.clockrow .note-field input{width:100%;}

  /* Entries reflow: line1 date/who/hours/✕, line2 times, line3 note */
  .entry{flex-wrap:wrap;gap:8px 10px;}
  .entry .date{order:1;}
  .entry .who{order:2;flex:1;min-width:0;}
  .entry .ehrs{order:3;min-width:0;}
  .entry .ex{order:4;font-size:20px;padding:0 8px;}
  .entry .times{order:5;flex:1 0 100%;}
  .entry .times input{width:auto;flex:1;}
  .entry .enote{order:6;flex:1 0 100%;min-width:0;}

  .addsub-form input{min-width:0;}
  .sm-row{flex-wrap:wrap;}
}
@media(max-width:480px){.rail{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}