/* What hangar's pages add to the mockup's shared look: Personnel rows and panels, chips, the sign-in card. */
.who, .note { color:var(--muted); font-size:14px; margin:0 }
.board > .note { padding:14px 16px }
.muted { color:var(--muted) }
.hacts { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
a.btn { display:inline-flex; align-items:center; text-decoration:none }

table.staff td { vertical-align:top }
tr.person .name { color:var(--ink); text-decoration:none }
tr.person.open { background:var(--bg) }
.pos { color:var(--muted); font-size:13px }
.lic, .you, .kind, .st, .flag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:2px 8px; margin:2px 4px 0 0; background:var(--pale); color:var(--th-ink) }
.you { background:var(--blue); color:#FFFFFF }
.flag { background:var(--st-yel); color:var(--st-yel-ink) }
.st.pending { background:var(--st-yel); color:var(--st-yel-ink) }
.st.approved { background:var(--st-grn); color:var(--st-grn-ink) }
.st.denied { background:var(--st-red); color:var(--st-red-ink) }

.pdetail { display:grid; gap:16px; padding:8px 0 }
.pgrid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }
.pcol { display:grid; gap:8px; align-content:start; border:1px solid var(--line); border-radius:12px; padding:12px; margin:0; min-width:0 }
.pcol legend, .pcol h3 { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink); margin:0; padding:0 4px }
.pfoot { display:flex; gap:10px; justify-content:flex-end; grid-column:1 / -1 }
.pform { display:grid; gap:14px; padding:16px }
.days { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; font-size:11px; font-weight:700 }
.days .in { padding:0 4px }
.offs { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.offs li { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.offs form, .rehire { display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center }
.reqform { display:grid; gap:8px }
.seg a { display:inline-flex; align-items:center; padding:0 14px; height:36px; text-decoration:none; color:var(--link);
  font-size:12.5px; font-weight:700; text-transform:uppercase }
.seg a.on { background:var(--blue); color:#FFFFFF }

body.signin { display:grid; place-items:center; min-height:100vh; padding:16px }
.sicard { width:min(420px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; gap:14px }
.sicard h1 { margin:0 } .sicard .lede { margin:0 }
.sicard .stack { display:grid; gap:8px }
.sicard input:not([type=submit]) { height:44px; font:inherit; font-size:16px; border:2px solid var(--pale); border-radius:10px; padding:0 12px;
  background:var(--field); color:var(--ink) }
.sicard input.pin { font-size:24px; letter-spacing:.3em; text-align:center }
.sicard label { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink) }
.silogo { font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue) }
.flash { margin:0; padding:10px 12px; border-radius:10px; font-weight:600 }
.flash.alert { background:var(--st-red); color:var(--st-red-ink) } .flash.notice { background:var(--st-grn); color:var(--st-grn-ink) }
.small { font-size:13px; margin:0 }

.shopf { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); padding:16px; border:0; margin:0 }
.shopf .wide { grid-column:1 / -1 }
.bar2, .bfoot { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:12px 16px; flex-wrap:wrap }
.row2 { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) }
.code { font-size:24px; letter-spacing:.2em }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
table.rates .in { max-width:220px }
.models { display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0, 1fr)); padding:16px }
@media (max-width:860px) { .models { grid-template-columns:1fr } }
.make { display:grid; gap:6px; align-content:start } .make h3 { margin:0 }
.acbtn { display:grid; gap:2px; padding:8px 10px; border:2px solid var(--pale); border-radius:10px; text-decoration:none; color:var(--ink) }
.acbtn.on { border-color:var(--blue) } .msum { font-size:12.5px; color:var(--muted) }
.addmodel { display:flex; gap:6px; flex-wrap:wrap }
.mpanel { margin:0 16px 16px; padding:16px; border:2px solid var(--blue); border-radius:14px; display:grid; gap:12px }
.mpanel h3 { display:flex; justify-content:space-between; margin:0 }
.lrows { display:grid }
.lrow { display:grid; grid-template-columns:minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(260px, 2fr) 44px; gap:12px; align-items:center;
  padding:10px 16px; border-bottom:1px solid var(--line) }
.lrow fieldset { border:0; margin:0; padding:0; display:grid; gap:4px; min-width:0 }
.lrow .applyrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.lhead { background:var(--th-bg); color:var(--th-ink); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase }
@media (max-width:760px) { .lrow { grid-template-columns:1fr } .lhead { display:none } }

table.jobs td { vertical-align:top }
table.jobs tr.red td { background:#F7CACA; color:#7A1D1D } table.jobs tr.yel td { background:#FBEA9E; color:#5E4A00 }
table.jobs tr.org td { background:#FFD69A; color:#6B3D00 } table.jobs tr.grn td { background:#C4E7C8; color:#1C5427 }
table.jobs tr.held td { background-image:repeating-linear-gradient(135deg, rgba(85,101,127,.18) 0 6px, transparent 6px 14px) }
table.jobs .big { font-size:28px; font-weight:700 }
.tailtile { display:inline-block; margin:4px 0; padding:6px 12px; border-radius:10px; background:var(--blue); color:#FFFFFF; font-weight:700; letter-spacing:.06em }
.bar { display:flex; gap:3px; margin:6px 0 } .bar i { width:16px; height:8px; border-radius:3px; background:rgba(14,30,58,.15) } .bar i.on { background:var(--blue) }
.legend { display:flex; gap:6px; flex-wrap:wrap } .key { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase }
.key.red { background:#F7CACA; color:#7A1D1D } .key.yel { background:#FBEA9E; color:#5E4A00 } .key.org { background:#FFD69A; color:#6B3D00 }
.key.grn { background:#C4E7C8; color:#1C5427 } .key.held { background:repeating-linear-gradient(135deg, #C9D8EE 0 4px, #FBEA9E 4px 8px); color:#0B2D6B }
.soon { display:inline-block; padding:6px 10px; border-radius:8px; border:2px dashed currentColor; font-size:11px; font-weight:700; opacity:.6 }
.note.foot { padding:12px 16px; font-size:12.5px }
.search .in { min-width:260px }
.holdform summary { list-style:none; cursor:pointer; margin-top:6px } .holdform[open] { background:var(--surface); padding:8px; border-radius:10px }
dl.last { margin:0 } dl.last dt { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted) } dl.last dd { margin:0 }
.lookup { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:16px }
.lookupmsg { padding:0 16px 16px }
.owner { font-size:20px }
.services { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) }
.svccard { display:grid; gap:8px; align-content:start; border:2px solid var(--pale); border-radius:12px; padding:12px }
.svccard:has(input[type=checkbox]:checked) { border-color:var(--blue) }
.counts { display:flex; gap:10px; flex-wrap:wrap; padding:16px } .count { padding:6px 10px; border-radius:10px; background:var(--pale); color:var(--th-ink); font-size:13px }
.count.zero { opacity:.45 }
.month { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; padding:8px }
.dow { font-size:11px; font-weight:700; letter-spacing:.1em; text-align:center; color:var(--muted) }
.cell { min-height:110px; border:1px solid var(--line); border-radius:10px; padding:6px; display:grid; gap:4px; align-content:start; background:var(--surface); min-width:0 }
.cell.we { background:var(--bg) } .cell.out { opacity:.55 } .cell.today { border-color:var(--blue) } .cell.sel { box-shadow:inset 0 0 0 2px var(--blue) }
.cell.short { border-color:#B3261E }
.dayhead { display:flex; justify-content:space-between; text-decoration:none; color:var(--ink) }
.labor { font-size:11px; color:var(--muted) } .labor.roll { color:#6B3D00; font-weight:700 }
.chip { display:block; font-size:11px; padding:3px 6px; border-radius:8px; background:var(--pale); color:var(--th-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chip.hold { background-image:repeating-linear-gradient(135deg, rgba(85,101,127,.25) 0 4px, transparent 4px 9px) } .chip.roll { outline:2px dashed #F0A53C }
.chip .code { float:right; font-weight:700 }
.off { display:block; font-size:10.5px; padding:2px 6px; border-radius:8px; background:var(--st-grn); color:var(--st-grn-ink) } .off.pending { background:var(--st-yel); color:var(--st-yel-ink) }
.dwarn { margin:12px 16px }
@media (max-width:760px) { .month { grid-template-columns:1fr } .dow, .cell.we { display:none } }