:root {
    --ink: #18242f;
    --muted: #667684;
    --line: #d8e0e6;
    --surface: #ffffff;
    --surface-2: #f5f7f8;
    --accent: #245b82;
    --accent-2: #173d59;
    --good: #1f6b45;
    --warn: #8a5b14;
    --bad: #8c3434;
    --shadow: 0 8px 24px rgba(20, 42, 58, .08);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #eef2f4; color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .8rem clamp(.8rem, 3vw, 2rem); background: #172a39; color: white; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.topbar a { color: white; }
.topbar nav { display: flex; gap: .9rem; font-size: .92rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none !important; }
.brand-mark { display: inline-grid; place-items: center; width: 2.55rem; height: 2.1rem; border: 1px solid rgba(255,255,255,.38); border-radius: .45rem; font-weight: 800; letter-spacing: .04em; }
.brand-copy { font-weight: 650; }
.shell { width: min(1280px, calc(100% - 1.4rem)); margin: 1.2rem auto 3rem; }
.footer { padding: 1.2rem; text-align: center; color: var(--muted); font-size: .8rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.1rem; }
.page-head h1 { margin: 0; font-size: clamp(1.45rem, 4vw, 2.1rem); }
.page-head p { margin: .35rem 0 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .85rem; }
.project-card h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.meta { color: var(--muted); font-size: .87rem; }
.badge { display: inline-flex; align-items: center; padding: .23rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 650; background: #e9f1f7; color: #244b67; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.55rem; padding: .58rem .85rem; border: 1px solid var(--line); border-radius: .5rem; background: white; color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; text-decoration: none !important; }
.btn:hover { background: #f5f8fa; }
.btn.primary { color: white; background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.danger { color: var(--bad); border-color: #e3bcbc; }
form.stack { display: grid; gap: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
label { display: grid; gap: .28rem; font-size: .88rem; font-weight: 650; }
input, select, textarea { width: 100%; min-height: 2.55rem; padding: .55rem .65rem; border: 1px solid #bfcbd3; border-radius: .45rem; background: white; color: var(--ink); font: inherit; }
textarea { min-height: 6rem; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin: 1.15rem 0 .55rem; }
.section-title h2 { margin: 0; font-size: 1.1rem; }
.flash { margin-bottom: .85rem; padding: .75rem .9rem; border-radius: .5rem; background: #e7f4ec; border: 1px solid #b9dec8; color: #245d3d; }
.notice { padding: .75rem .85rem; border-left: 4px solid var(--accent); background: #edf4f8; border-radius: .3rem; color: #315468; }
.area-list { display: grid; gap: .5rem; }
.area-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(110px,.35fr) minmax(150px,.6fr); gap: .6rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .5rem; background: white; }
.area-row .indent { padding-left: 1rem; }
.matrix-wrap { overflow: auto; border: 1px solid var(--line); border-radius: .65rem; background: white; box-shadow: var(--shadow); max-height: 70vh; }
table.matrix { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .82rem; }
.matrix th, .matrix td { padding: .5rem .55rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; min-width: 118px; }
.matrix th { position: sticky; top: 0; z-index: 4; background: #203a4e; color: white; font-weight: 700; }
.matrix .area-head, .matrix .area-cell { position: sticky; left: 0; min-width: 165px; text-align: left; }
.matrix .area-head { z-index: 6; }
.matrix .area-cell { z-index: 3; background: #f8fafb; font-weight: 700; }
.matrix .weight { display: block; margin-top: .15rem; color: var(--muted); font-weight: 500; font-size: .72rem; }
.state { display: inline-flex; align-items: center; justify-content: center; padding: .22rem .43rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; }
.state-complete { background: #dcefe4; color: var(--good); }
.state-ready { background: #e4eff7; color: #245c81; }
.state-notready, .state-planned { background: #edf0f2; color: #65727b; }
.state-inprogress { background: #fff0cc; color: var(--warn); }
.matrix-check { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .7rem; font-weight: 500; color: var(--muted); }
.matrix-check input { width: 1.05rem; min-height: 1.05rem; }
.empty { padding: 1.4rem; text-align: center; color: var(--muted); }
.inline-form { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
.inline-form label { min-width: 150px; flex: 1; }
.small { font-size: .82rem; color: var(--muted); }
@media (max-width: 720px) {
    .brand-copy { display: none; }
    .topbar nav { gap: .6rem; font-size: .84rem; }
    .shell { width: min(100% - .8rem, 1280px); margin-top: .7rem; }
    .page-head { display: grid; }
    .form-grid { grid-template-columns: 1fr; }
    .area-row { grid-template-columns: 1fr 90px; }
    .area-row > :last-child { grid-column: 1 / -1; }
    .card { padding: .8rem; border-radius: .6rem; }
}

/* Field knowledge and account pilot */
.auth-card { max-width: 520px; }
.nav-form { display: inline; margin: 0; }
.nav-form button { font: inherit; background: none; border: none; color: white; cursor: pointer; padding: 0; }
.knowledge-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1rem; }
.knowledge-tabs a { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .45rem; background: white; font-weight: 650; }
.knowledge-tabs a.active { background: var(--accent); color: white; border-color: var(--accent); }
.knowledge-entry { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.knowledge-entry:last-child { border-bottom: 0; }
.knowledge-entry p { white-space: pre-wrap; overflow-wrap: anywhere; }
.knowledge-chip { display: inline-block; padding: .25rem .5rem; background: #eef3f6; border-radius: .4rem; font-size: .76rem; }
.knowledge-two-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: .85rem; }
.help { color: var(--muted); font-size: .84rem; }
@media(max-width: 850px) { .knowledge-two-col { grid-template-columns: 1fr; } .topbar nav { flex-wrap: wrap; } }

.knowledge-media { margin: .55rem 0; }
.knowledge-media img, .knowledge-media video { display:block; max-width:100%; max-height:320px; border-radius:.5rem; }
.knowledge-media audio { max-width:100%; }

.ticket-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:1rem;align-items:start}
.ticket-layout>section,.ticket-layout>aside{display:grid;gap:1rem}
.ticket-link{display:grid;gap:.2rem;text-decoration:none}
.ticket-link small{font-size:.68rem;color:var(--muted)}
.checklist{display:grid;gap:.55rem}
.checklist label{display:flex;gap:.55rem;align-items:flex-start}
.coverage-dot{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;font-weight:800}
.coverage-dot.complete{background:#e8f5ec}.coverage-dot.missing{background:#f3f3f3;color:var(--muted)}
.coverage-table th:not(:first-child),.coverage-table td:not(:first-child){text-align:center}
@media(max-width:900px){.ticket-layout{grid-template-columns:1fr}}


/* Field shift & coordination */
.shift-shell{display:grid;gap:1rem;max-width:1100px;margin:0 auto}
.shift-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.55fr);gap:1rem;align-items:end;padding:1.1rem;border-radius:1rem;background:#172a39;color:white;box-shadow:var(--shadow)}
.shift-hero h1{margin:.15rem 0;font-size:clamp(1.9rem,7vw,3rem)}
.shift-hero p{margin:.2rem 0;color:#d8e4eb}
.shift-hero input{background:#fff}
.shift-quick{display:grid;gap:.55rem}
.eyebrow{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#7e94a5}
.shift-hero .eyebrow{color:#9fc1d8}
.shift-card{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow)}
.shift-card h2{margin:.15rem 0 0;font-size:1.12rem}
.shift-card h3{margin:.45rem 0 .2rem}
.shift-card.current{border-top:4px solid var(--accent)}
.shift-big{min-height:3rem;font-size:1rem}
.shift-current-copy{display:grid;text-align:right;font-size:.88rem}
.shift-current-copy span{color:var(--muted)}
.shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.shift-choice-row{display:flex;flex-wrap:wrap;gap:.45rem}
.shift-choice-row label{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.55rem;background:#f8fafb}
.shift-choice-row input{width:1rem;min-height:1rem}
.field-request{padding:.85rem 0;border-top:1px solid var(--line)}
.field-request:first-of-type{border-top:0}
.request-answer{margin-top:.7rem;padding:.7rem;background:var(--surface-2);border-radius:.55rem}
.thread-card{padding:.75rem 0;border-top:1px solid var(--line)}
.thread-card:first-of-type{border-top:0}
.thread-head{display:flex;justify-content:space-between;gap:.5rem;align-items:center;margin-bottom:.45rem}
.field-message{padding:.55rem .65rem;margin:.35rem 0;background:#f5f7f8;border-radius:.5rem}
.field-message>span{float:right;color:var(--muted);font-size:.76rem}
.field-message p{margin:.2rem 0;white-space:pre-wrap}
.field-message.needs-response{border-left:4px solid var(--warn)}
.message-compose{display:grid;grid-template-columns:1fr auto auto;gap:.45rem;align-items:center;margin-top:.55rem}
.compact-check{display:flex;align-items:center;gap:.3rem;white-space:nowrap;font-size:.78rem}
.compact-check input{width:1rem;min-height:1rem}
.location-card{border-style:dashed}
@media(max-width:780px){
    .shift-hero,.shift-grid{grid-template-columns:1fr}
    .shift-hero{align-items:stretch}
    .shift-current-copy{text-align:left;margin-top:.4rem}
    .message-compose{grid-template-columns:1fr auto}
    .message-compose .compact-check{grid-column:1/-1}
    .topbar{align-items:flex-start}
}

/* Manager jobsite pin / circular geofence preview; third-party tiles load on request. */
.jobsite-editor{min-width:0}.jobsite-map{height:340px;min-height:280px;border:1px solid #a7bac7;border-radius:12px;overflow:hidden;margin:12px 0}.jobsite-map[hidden]{display:none}.jobsite-editor input[type=range]{width:100%;accent-color:#167c9a}.jobsite-editor .actions{display:flex;gap:.65rem;flex-wrap:wrap}.jobsite-editor [role=status]{min-height:1.4em}@media(max-width:640px){.jobsite-map{height:300px}.jobsite-editor .actions>.btn{width:100%}}


/* Project Operations: compact, auto-refreshing, accessible status+color view. */
.live-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.live-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.8rem;margin:1rem 0}
.live-stat-grid .card{display:flex;flex-direction:column;gap:.3rem}
.live-stat-grid strong{font-size:1.7rem;font-variant-numeric:tabular-nums}
.live-stat-grid small,.live-stat-grid span{font-size:.86rem;color:#5a6879}
.live-layout{display:grid;grid-template-columns:minmax(250px,2fr) minmax(380px,3fr);gap:1rem;align-items:start}
.live-phazes{max-height:650px;overflow:auto}
.live-phaze{--status:#8193a9;padding:.75rem;margin:.45rem 0;border-left:4px solid var(--status);border-radius:7px;background:#f4f7fa;display:grid;grid-template-columns:1fr auto;gap:.35rem}
.live-phaze small{color:#516175;display:block}.live-phaze strong{overflow-wrap:anywhere}
.live-progress{grid-column:1 / -1;background:#dbe3e9;border-radius:20px;height:7px;overflow:hidden}
.live-progress i{display:block;height:100%;background:var(--status)}
.status-unscoped,.status-planned{--status:#8193a9}
.status-ready{--status:#14968c}.status-inprogress{--status:#2870c9}
.status-awaitingqc{--status:#7857ba}.status-blocked{--status:#c43c44}
.status-paused{--status:#c28420}.status-complete{--status:#248457}
.live-feed{max-height:710px;overflow:auto;border-top:1px solid #dce4ec;margin-top:.8rem}
.live-entry{padding:.8rem .1rem;border-bottom:1px solid #e3e7ed;overflow-wrap:anywhere}
.live-entry-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.35rem;color:#637184;font-size:.8rem}
.live-entry-head time{font-variant-numeric:tabular-nums}
.live-event-kind{font-weight:650;color:#215f80}
.live-entry p{white-space:pre-wrap;margin:.4rem 0}
.live-entry details{margin:.5rem 0;padding:.5rem;background:#eef3f8;border-radius:7px}
.live-entry summary{cursor:pointer}
.live-entry pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem}
.live-feed-panel{min-width:0}

/* Optional typed Phaze Composer. Type color describes kind, status text remains explicit. */
.composer-layout{display:grid;grid-template-columns:minmax(320px,3fr) minmax(270px,2fr);gap:1rem;align-items:start}
.composer-tree-panel{min-width:0}
.composer-tools{display:grid;gap:1rem}
.composer-legend{display:flex;flex-wrap:wrap;gap:.35rem;margin:.8rem 0}
.composer-tree{list-style:none;margin:.5rem 0;padding:0;max-height:780px;overflow:auto}
.composer-node{--type:#7b8798;--type-bg:#f0f3f7;margin:.32rem 0 .32rem calc(var(--depth,0)*1.05rem);border:1px solid #d9e0e8;border-left:5px solid var(--type);border-radius:8px;background:var(--type-bg);min-width:0}
.composer-node[hidden]{display:none}
.composer-node-line{display:flex;gap:.3rem;align-items:center;min-height:43px}
.composer-select{appearance:none;border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:.4rem;flex:1;min-width:0;padding:.55rem .1rem;cursor:pointer;color:inherit;flex-wrap:wrap}
.composer-select strong{overflow-wrap:anywhere}
.composer-select small{margin-left:auto;color:#516175}
.composer-toggle,.composer-add-child{background:transparent;border:0;color:inherit;min-width:30px;min-height:34px;cursor:pointer;font-size:1.1rem}
.composer-spacer{width:30px;flex:none}
.phaze-chip{display:inline-flex;align-items:center;border-radius:6px;padding:.16rem .42rem;font-size:.72rem;background:var(--type-bg);color:var(--type);font-weight:700}
.composer-node .phaze-chip{background:#fff}
.composer-node.selected{outline:2px solid #235c95;outline-offset:1px}
.composer-node.dragging{opacity:.5}
.composer-node.drop-target{outline:3px dashed #2983bf;outline-offset:2px}
.type-projectroot,.type-building,.type-floor,.type-area{--type:#476783;--type-bg:#edf5fc}
.type-component,.type-scope{--type:#9b6e2c;--type-bg:#fff7e7}
.type-executablework{--type:#168c83;--type-bg:#e6f7f3}
.type-enablingwork,.type-materialresource{--type:#a0649d;--type-bg:#f8edf8}
.type-inspectionqc,.type-decisionapproval{--type:#7b56b5;--type-bg:#f4edfb}
.type-externalinterface{--type:#506f79;--type-bg:#edf5f6}
@media(max-width:900px){.live-layout,.composer-layout{grid-template-columns:1fr}}
@media(max-width:640px){.composer-node{margin-left:calc(var(--depth,0)*.55rem)}.composer-select small{margin-left:0}.live-feed{max-height:none}}

/* Progressive field guidance and assigned per-site to-do cards. */
.field-guide details{margin-top:.6rem}.field-guide ol{padding-left:1.35rem}.field-guide li{margin:.3rem 0}
.assigned-site{margin:.8rem 0;padding:.65rem;border:1px solid #dce4eb;border-radius:9px}
.assigned-site h3{margin:.1rem 0 .7rem}.assigned-task{padding:.7rem 0;border-top:1px solid #e1e8ee}
.assigned-task:first-of-type{border-top:0}.assigned-task .actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.assigned-task .actions form{margin:0}