/* Doe River Gorge — merged brand palette (Oct 2026). Official hex values only. */
@font-face{font-family:Oswald;src:url(fonts/Oswald-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Kanit;src:url(fonts/Kanit-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Kanit;src:url(fonts/Kanit-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Kanit;src:url(fonts/Kanit-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
:root{
  --forest:#005841; --slate:#3E6B7A; --gorge:#009470; --river:#1F7396; --rust:#A65A28;
  --sun:#FFD240; --whitewater:#F4F1EA; --sand:#D8CBB0; --stone:#6E6A62; --ink:#1F2A2E; --white:#FFFFFF;
  --line:#D8CBB0; --radius:10px; --side:248px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Kanit,system-ui,sans-serif;font-size:15px;line-height:1.45;color:var(--ink);background:var(--whitewater)}
h1,h2,h3{font-family:Oswald,Kanit,sans-serif;font-weight:600;letter-spacing:.01em;margin:0;color:var(--forest)}
h1{font-size:28px;text-transform:uppercase}
h2{font-size:20px;text-transform:uppercase}
h3{font-size:16px;text-transform:uppercase;color:var(--ink)}
a{color:var(--river)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--river);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--stone)}
.small{font-size:13px}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);background:var(--forest);color:var(--white);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:30;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.15);text-decoration:none;color:var(--white)}
.brand img{width:54px;height:auto;background:var(--white);border-radius:50%;padding:2px}
.brand b{font-family:Oswald;font-weight:600;font-size:19px;line-height:1.05;letter-spacing:.02em;display:block}
.brand span{font-size:13px;color:var(--sun);display:block;margin-top:2px}
.nav{padding:10px 8px;flex:1}
.nav .sec{font-family:Oswald;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--forest) 9%,#fff);opacity:.85;margin:16px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;padding:9px 10px;border-radius:8px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.1)}
.nav a.on{background:var(--white);color:var(--forest)}
.nav a .dot{width:10px;height:10px;border-radius:3px;background:var(--sun);flex:none}
.nav a.on .dot{background:var(--gorge)}
.nav .role{margin-left:auto;font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.me{padding:12px 16px;border-top:1px solid rgba(255,255,255,.15);font-size:14px}
.me button{background:none;border:1px solid rgba(255,255,255,.5);color:var(--white);border-radius:6px;padding:4px 10px;margin-top:6px;cursor:pointer}
.main{margin-left:var(--side);flex:1;min-width:0;padding:22px 28px 60px}
.topbar{display:none}
.scrim{display:none}

/* ---- page header ---- */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:14px}
.phead .sub{color:var(--stone);font-size:14px;margin-top:2px}
.phead .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:6px 0 14px;overflow-x:auto}
.tabs a{padding:8px 14px;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs a.on{border-color:var(--forest);color:var(--forest);font-weight:600}
.tabs a .n{display:inline-block;background:var(--sand);color:var(--ink);border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}

/* ---- buttons / inputs ---- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--forest);background:var(--white);color:var(--forest);border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:500;text-decoration:none;min-height:38px}
.btn:hover{background:color-mix(in srgb,var(--forest) 9%,#fff)}
.btn.primary{background:var(--forest);color:var(--white)}
.btn.primary:hover{background:color-mix(in srgb,var(--forest) 82%,#000)}
.btn.cta{background:var(--rust);border-color:var(--rust);color:var(--white)}
.btn.cta:hover{background:color-mix(in srgb,var(--rust) 82%,#000)}
.btn.danger{border-color:var(--rust);color:var(--rust)}
.btn.sm{padding:3px 10px;min-height:30px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{border:1px solid color-mix(in srgb,var(--stone) 55%,#fff);background:var(--white);border-radius:7px;padding:7px 9px;min-height:38px;max-width:100%}
textarea{width:100%;min-height:90px;resize:vertical}
label{font-weight:500;font-size:14px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.row>.field{flex:1 1 160px}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{width:18px;height:18px;accent-color:var(--forest)}

/* ---- filters ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px}
.filters label{font-size:13px;color:var(--stone);display:flex;flex-direction:column;gap:2px}
.filters select,.filters input{min-height:34px;padding:4px 8px}

/* ---- board table ---- */
.group{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;border-left:6px solid var(--gorge)}
.group.sched{border-left-color:var(--river)}
.group.done{border-left-color:var(--forest)}
.gtitle{display:flex;align-items:center;gap:10px;padding:10px 14px;font-family:Oswald;font-weight:600;color:var(--forest);text-transform:uppercase;font-size:16px;border-bottom:1px solid var(--line)}
.gtitle .count{font-family:Kanit;font-weight:400;color:var(--stone);text-transform:none;font-size:14px}
.tablewrap{overflow-x:auto}
table.grid{border-collapse:collapse;width:100%;min-width:760px}
.grid th{background:color-mix(in srgb,var(--whitewater) 55%,#fff);text-align:left;font-weight:600;font-size:13px;color:var(--ink);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.grid td{padding:6px 10px;border-bottom:1px solid color-mix(in srgb,var(--sand) 45%,#fff);vertical-align:middle}
.grid tr:hover td{background:color-mix(in srgb,var(--whitewater) 40%,#fff)}
.grid td.name{min-width:220px}
.tname{background:none;border:0;padding:4px 0;text-align:left;cursor:pointer;font-weight:500;color:var(--ink);font-size:15px}
.tname:hover{color:var(--river);text-decoration:underline}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:12px;border-radius:5px;padding:0 6px;background:color-mix(in srgb,var(--slate) 12%,#fff);color:var(--slate)}
.tag.rep{background:color-mix(in srgb,var(--gorge) 12%,#fff);color:var(--forest)}
.tag.over{background:color-mix(in srgb,var(--rust) 12%,#fff);color:color-mix(in srgb,var(--rust) 75%,#000);font-weight:600}
.grid td input,.grid td select{min-height:34px;padding:3px 6px;font-size:14px}
.grid td input[type=date]{width:138px}
.grid td input[type=number]{width:100px}
.grid td input[type=text]{width:150px}
.addrow td{background:color-mix(in srgb,var(--whitewater) 40%,#fff)}
.grid .addrow input[type=text]{width:100%;max-width:420px}
.empty{padding:26px;text-align:center;color:var(--stone)}

/* ---- pills: status + priority (WCAG AA contrast checked) ---- */
select.pill,.pill{appearance:none;-webkit-appearance:none;border:0;border-radius:6px;font-weight:600;font-size:14px;text-align:center;text-align-last:center;padding:6px 10px;min-width:132px;cursor:pointer;display:inline-block}
.pill.static{cursor:default}
.s-not-started{background:var(--stone);color:var(--white)}
.s-working-on-it{background:var(--sun);color:var(--ink)}
.s-done{background:var(--forest);color:var(--white)}
.p-low{background:var(--sand);color:var(--ink)}
.p-medium{background:var(--slate);color:var(--white)}
.p-high{background:var(--rust);color:var(--white)}
.p-critical{background:var(--ink);color:var(--white)}
select.pill option{background:var(--white);color:var(--ink)}
.pri{min-width:100px}

/* ---- people ---- */
.people{display:flex;align-items:center;gap:3px;flex-wrap:wrap;background:none;border:1px dashed transparent;border-radius:8px;padding:2px 4px;cursor:pointer;min-height:34px}
.people:hover{border-color:color-mix(in srgb,var(--stone) 55%,#fff)}
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--white);background:var(--river);border:2px solid var(--white);flex:none}
.av.c1{background:var(--forest)}.av.c2{background:var(--rust)}.av.c3{background:var(--slate)}.av.c4{background:var(--ink)}.av.c0{background:var(--river)}
.unassigned{font-size:13px;color:var(--stone);font-style:italic}
.chip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--forest) 7%,#fff);border-radius:14px;padding:2px 10px 2px 3px;font-size:13px;margin:2px}
.chip .av{width:22px;height:22px;font-size:10px;border:0}
.pop{position:absolute;z-index:60;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(31,42,46,.2);padding:8px;min-width:220px}
.pop label{display:flex;gap:8px;align-items:center;padding:6px;border-radius:6px;font-weight:400;cursor:pointer}
.pop label:hover{background:var(--whitewater)}

/* ---- drawer / modal ---- */
.overlay{position:fixed;inset:0;background:rgba(31,42,46,.45);z-index:50;display:flex;justify-content:flex-end}
.drawer{background:var(--white);width:min(620px,100%);height:100%;overflow-y:auto;padding:20px 22px 40px;box-shadow:-10px 0 30px rgba(0,0,0,.2)}
.overlay.center{justify-content:center;align-items:center;padding:16px}
.modal{background:var(--white);border-radius:12px;width:min(760px,100%);max-height:92vh;overflow:auto;padding:20px 22px}
.dhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.dhead h2{flex:1}
.x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--stone);padding:2px 8px}
.section{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.files{list-style:none;padding:0;margin:8px 0}
.files li{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid color-mix(in srgb,var(--sand) 45%,#fff);border-radius:8px;margin-bottom:6px;flex-wrap:wrap}
.files .thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;background:var(--whitewater)}
.files .fn{flex:1;min-width:140px;word-break:break-word}
.scope{font-size:12px;border-radius:5px;padding:1px 7px;font-weight:600}
.scope.series{background:color-mix(in srgb,var(--gorge) 12%,#fff);color:var(--forest)}
.scope.task{background:color-mix(in srgb,var(--slate) 12%,#fff);color:var(--slate)}
.hist{list-style:none;padding:0;margin:6px 0;font-size:14px}
.hist li{padding:6px 0;border-bottom:1px dashed color-mix(in srgb,var(--sand) 45%,#fff)}
.preview-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.preview-img{max-width:100%;max-height:75vh;display:block;margin:auto}
.scopebox{background:color-mix(in srgb,var(--forest) 5%,#fff);border:1px solid color-mix(in srgb,var(--forest) 20%,#fff);border-radius:8px;padding:10px;margin:10px 0}
.err{color:var(--rust);font-weight:500;min-height:1.2em}

/* ---- reports ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.big{font-family:Oswald;font-size:40px;color:var(--forest);line-height:1}
.bar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:14px}
.bar .lbl{width:140px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;background:var(--whitewater);border-radius:5px;height:14px;overflow:hidden}
.bar .fill{height:100%;background:var(--gorge)}
.bar .fill.d{background:var(--river)}
.bar b{width:28px;text-align:right}

/* ---- login ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--forest)}
.login .box{background:var(--white);border-radius:14px;width:min(420px,100%);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login .logo{background:var(--forest);padding:16px 18px 0}
.login .logo img{width:100%;display:block}
.login form{padding:20px 24px 26px}
.login input{width:100%}
.login .check input{width:18px;flex:0 0 18px}
.login .check{font-size:13px;line-height:1.4}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:10px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;max-width:90vw}
#toast.show{opacity:1}
#toast.bad{background:var(--rust)}

/* ---- admin ---- */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--sand) 45%,#fff)}
.list li .grow{flex:1;min-width:140px}
.badge{font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-radius:5px;padding:1px 6px;background:var(--sand);color:var(--ink);font-weight:600}
.badge.admin{background:var(--forest);color:var(--white)}
.badge.mgr{background:var(--river);color:var(--white)}
.badge.off{background:var(--stone);color:var(--white)}
.colrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid color-mix(in srgb,var(--sand) 45%,#fff);border-radius:8px;margin-bottom:6px}
.colrow input[type=text]{flex:1;min-width:140px}
.colrow .type{font-size:12px;color:var(--stone);width:70px}

/* ---- mobile ---- */
@media (max-width: 860px){
  .side{transform:translateX(-100%);transition:transform .2s}
  .shell.open .side{transform:none}
  .shell.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25}
  .main{margin-left:0;padding:0 12px 60px}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--forest);color:var(--white);margin:0 -12px 14px;padding:8px 12px}
  .topbar button{background:none;border:0;color:var(--white);font-size:26px;cursor:pointer;padding:2px 6px}
  .topbar img{width:36px;background:var(--white);border-radius:50%}
  .topbar b{font-family:Oswald;font-size:18px;letter-spacing:.03em}
  h1{font-size:23px}
  .admin-grid{grid-template-columns:1fr}
  /* tables become stacked cards */
  table.grid.cards{min-width:0}
  .grid.cards thead{display:none}
  .grid.cards tr{display:block;border-bottom:1px solid var(--line);padding:8px 10px}
  .grid.cards td{display:flex;align-items:center;gap:10px;border:0;padding:4px 0}
  .grid.cards td::before{content:attr(data-label);flex:0 0 96px;font-size:13px;color:var(--stone);font-weight:500}
  .grid.cards td.name::before{display:none}
  .grid.cards td.name{min-width:0}
  .grid.cards td.name .tname{font-size:16px;font-weight:600}
  .grid.cards tr.addrow td::before{display:none}
  .filters label{flex:1 1 40%}
  .filters select,.filters input{width:100%}
  .drawer{padding:16px}
}