/* =========================================================================
   PlumbLine Daily Logs — web
   PlumbLine Design System v2, as Project Tracker's web app uses it, with the
   Daily Logs app's own tag colours (Theme.swift: plBlueLight / plBlueOn).
   ========================================================================= */

:root{
  color-scheme:light;
  --brand:#14527D;
  --brand-strong:#0F3F62;
  --accent:#DC7A14;
  --brand-tint:#E8EFF6;
  --accent-tint:#FBEFDF;
  --bg:#F7F4EE;
  --surface:#FFFFFF;
  --surface-2:#FCFAF6;
  --line:#E6E8EB;
  --line-strong:#D8DCE1;
  --ink:#1C242E;
  --ink-soft:#5A6678;
  --ink-faint:#7A8A98;
  --ok:#2E9E63;     --ok-bg:#E4F3EA;
  --warn:#B45309;   --warn-bg:#FBEFDF;
  --danger:#D64545; --danger-bg:#FBECEC;
  --tag-bg:#EAF2F7; --tag-on:#14527D;
  --radius:18px;
  --radius-sm:14px;
  --shadow:0 1px 2px rgba(20,30,50,.04), 0 3px 10px rgba(20,30,50,.05);
  --shadow-lift:0 10px 30px rgba(20,30,50,.12);
  --row-hover:#F2F3F5;
  --font:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num:ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
}
/* Dark: the computer's setting (Auto), unless Settings chose Light or Dark.
   index.html sets data-theme before the page draws. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#4E9BD1;
  --brand-tint:#1D2C3C;
  --accent-tint:#2A2110;
  --bg:#16191D;
  --surface:#1E2228;
  --surface-2:#232830;
  --line:#2C3239;
  --line-strong:#3B485A;
  --ink:#E9EEF3;
  --ink-soft:#A8B4C2;
  --ink-faint:#7F8C9B;
  --ok:#4ADE80;     --ok-bg:#122A1D;
  --warn:#E8A055;   --warn-bg:#3A2A14;
  --danger:#F87171; --danger-bg:#2C1616;
  --tag-bg:#17283A; --tag-on:#7FB3DA;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 10px 30px rgba(0,0,0,.5);
  --row-hover:#212B36;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --brand:#4E9BD1;
    --brand-tint:#1D2C3C;
    --accent-tint:#2A2110;
    --bg:#16191D;
    --surface:#1E2228;
    --surface-2:#232830;
    --line:#2C3239;
    --line-strong:#3B485A;
    --ink:#E9EEF3;
    --ink-soft:#A8B4C2;
    --ink-faint:#7F8C9B;
    --ok:#4ADE80;     --ok-bg:#122A1D;
    --warn:#E8A055;   --warn-bg:#3A2A14;
    --danger:#F87171; --danger-bg:#2C1616;
    --tag-bg:#17283A; --tag-on:#7FB3DA;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:0 10px 30px rgba(0,0,0,.5);
    --row-hover:#212B36;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:var(--brand)}
img{display:block}
.boot{padding:80px 20px;text-align:center;color:var(--ink-faint)}

/* ---------- App bar + brand lockup ------------------------------------- */
.appbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.appbar-inner{max-width:1180px;margin:0 auto;padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));display:flex;align-items:center;gap:14px}
.pl-lockup{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.pl-lockup svg{height:38px;width:19px;flex:none}
.pl-word{font-weight:700;font-size:19px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.pl-word em{font-style:normal;color:var(--accent)}
.pl-sub{margin-top:5px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-faint);line-height:1}
.appbar .spacer{flex:1}
.who{display:flex;flex-direction:column;align-items:flex-end;min-width:0;flex:0 1 auto;line-height:1.2}
.who .org{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;min-width:0}
.who .me{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.sync{font-size:12px;color:var(--ink-faint);white-space:nowrap}
.sync.bad{color:var(--danger)}
.appbar .btn{white-space:nowrap;flex:none}
@media (max-width:640px){
  .appbar-inner{gap:10px}
  .who .me{display:none}
  .appbar .spacer{display:none}
  .who{flex:1 1 0}
  .who .org{max-width:100%}
  .sync:not(.bad){display:none}
  .sync.bad{position:absolute;left:0;right:0;top:100%;background:var(--danger-bg);text-align:center;padding:4px 16px;white-space:normal}
  .appbar-inner{position:relative}
}

/* ---------- Layout ------------------------------------------------------ */
main{max-width:1180px;margin:0 auto;padding:22px max(16px, env(safe-area-inset-right)) 60px max(16px, env(safe-area-inset-left))}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;margin-bottom:12px}
.crumb:hover{text-decoration:underline}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:26px;line-height:1.15}
.page-head .sub{color:var(--ink-soft);font-size:14px;margin-top:4px}
.section-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--ink-faint);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.section-label .right{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
.muted{color:var(--ink-faint)}
.soft{color:var(--ink-soft)}
.empty{padding:28px 20px;text-align:center;color:var(--ink-faint);border:1px dashed var(--line-strong);border-radius:var(--radius);background:transparent}

/* ---------- Buttons / controls ----------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);transition:transform .12s ease, background-color .12s ease, border-color .12s ease}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(220,122,20,.26)}
.btn.primary:hover{background:#C96C0F;border-color:#C96C0F;color:#fff}
.btn.small{padding:7px 12px;font-size:13px;border-radius:999px}
.btn.block{width:100%;justify-content:center;height:50px;font-size:16px;border-radius:var(--radius)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.seg button.active{background:var(--brand);color:#fff}

/* ---------- Tags -------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;font-size:11.5px;font-weight:600;padding:3px 9px;background:var(--tag-bg);color:var(--tag-on);white-space:nowrap}
.tag.private{background:var(--accent-tint);color:var(--warn)}
.tag.status-delayed,.tag.status-on-hold{background:var(--warn-bg);color:var(--warn)}
.tag.status-complete,.tag.status-ahead-of-schedule{background:var(--ok-bg);color:var(--ok)}

/* ---------- Job cards --------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.job-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;text-align:left;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 16px 22px;background:var(--surface);box-shadow:var(--shadow);transition:box-shadow .12s ease}
.job-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);opacity:.9}
.job-card.archived::before{background:var(--ink-faint)}
.job-card:hover{box-shadow:var(--shadow-lift)}
.job-card h3{font-size:17px;line-height:1.25}
.job-card .meta{font-size:13px;color:var(--ink-soft)}
.job-card .stats{margin-top:auto;font-size:12.5px;color:var(--ink-faint);display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Cards / rows ----------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.stack{display:flex;flex-direction:column;gap:16px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr)}}
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.row:first-child{border-top:none}
.row:hover{background:var(--row-hover)}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row .date{font-weight:600;font-size:14.5px}
.row .area{font-size:13px;color:var(--ink-soft)}
.row .summary{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .by{font-size:11.5px;color:var(--ink-faint)}
.row .temp{font-family:var(--num);font-weight:600;color:var(--ink-soft);font-size:14px;white-space:nowrap}
.chev{color:var(--ink-faint);flex:none}
/* A job's log rows: the link, with the row's ⋯ (PDF, email) beside it rather
   than inside it. The list lets the ⋯ menu spill out of it, so the end rows
   round their own corners. */
.list.log-list{overflow:visible}
.log-row{display:flex;align-items:center;border-top:1px solid var(--line)}
.log-row:first-child{border-top:none;border-radius:var(--radius) var(--radius) 0 0}
.log-row:last-child{border-radius:0 0 var(--radius) var(--radius)}
.log-row:only-child{border-radius:var(--radius)}
.log-row:hover{background:var(--row-hover)}
.log-row .row{flex:1;min-width:0;border-top:none;padding-right:8px}
.log-row .row:hover{background:none}
.row-menu{flex:none;padding-right:12px}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
dl.kv dt{color:var(--ink-faint)}
dl.kv dd{margin:0;overflow-wrap:anywhere}
.prose{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}

/* ---------- Log page --------------------------------------------------- */
.weather{display:flex;align-items:center;gap:14px}
.weather .t{font-family:var(--num);font-size:28px;font-weight:700;line-height:1}
.weather .l{font-weight:600}
.weather .x{font-size:13px;color:var(--ink-soft)}
.weather .w-src{font-size:11px;color:var(--ink-soft)}
.pct{font-family:var(--num);font-weight:700;color:var(--brand)}
.bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:6px}
.bar > span{display:block;height:100%;background:var(--brand);border-radius:999px}
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tasks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.tasks .box{flex:none;width:20px;height:20px;padding:0;border-radius:5px;border:2px solid var(--line-strong);background:transparent;margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;line-height:1}
.tasks .text{flex:1;min-width:0;overflow-wrap:anywhere}
.tasks .x{flex:none;border:none;background:none;color:var(--ink-faint);font-size:18px;line-height:1;padding:0 4px}
.tasks .x:hover{color:var(--danger)}
.tasks li.done .box{background:var(--ok);border-color:var(--ok)}
.tasks li.done .text{color:var(--ink-faint);text-decoration:line-through}
.delivery + .delivery{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}

/* ---------- Photos ----------------------------------------------------- */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.photos.small{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));margin-top:10px}
.thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--row-hover);border:none;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .tag{position:absolute;left:6px;bottom:6px}
.thumb .missing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-faint);padding:6px;text-align:center}

.viewer{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.viewer img{max-width:100vw;max-height:100vh;object-fit:contain}
.viewer .bar-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:max(14px, env(safe-area-inset-top)) 16px 14px;color:#fff;font-size:14px}
.viewer .bar-top .spacer{flex:1}
.viewer .vbtn{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;width:42px;height:42px;font-size:20px;display:flex;align-items:center;justify-content:center}
.viewer .vbtn:hover{background:rgba(255,255,255,.26)}
.viewer .nav{position:absolute;top:50%;transform:translateY(-50%)}
.viewer .nav.prev{left:12px}
.viewer .nav.next{right:12px}

/* ---------- Sign-in / notices ------------------------------------------ */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.signin{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lift);padding:30px 28px;display:flex;flex-direction:column;gap:18px;text-align:center}
.signin .pl-lockup{justify-content:center}
.signin p{margin:0;color:var(--ink-soft);font-size:14px}
.notice{border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;background:var(--danger-bg);color:var(--danger);text-align:left}
.notice.ok{background:var(--ok-bg);color:var(--ok)}

/* ---------- Editing ----------------------------------------------------- */
.field{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .12s ease, box-shadow .12s ease}
textarea.field{resize:vertical;min-height:44px;field-sizing:content;line-height:1.45}
select.field{appearance:auto}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,82,125,.14)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid.one{grid-template-columns:1fr}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.form-grid,.form-grid.three{grid-template-columns:1fr}}
.form-grid label,.form-grid > label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.label-row .muted{font-weight:500}
.range{width:100%;accent-color:var(--brand);margin-top:6px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.add-row{display:flex;gap:8px;margin-top:10px}
.add-photos{display:inline-flex;flex-wrap:wrap;gap:8px}
.add-row .field{flex:1}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip-btn{border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}
.chip-btn:hover{border-color:var(--brand);background:var(--brand-tint)}
.tag.removable{padding-right:4px}
.tag.removable button{border:none;background:none;color:inherit;font-size:14px;line-height:1;padding:0 4px;opacity:.7}
.tag.removable button:hover{opacity:1}
.link-btn{border:none;background:none;padding:0;margin-top:12px;color:var(--brand);font-size:13px;font-weight:600}
.small{font-size:12.5px}
.warn{color:var(--warn);font-weight:600}
.w-icon{font-size:30px}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:var(--line)}
.btn.danger:hover{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.btn.danger-fill{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-fill:hover{filter:brightness(.95);color:#fff;background:var(--danger)}
.danger-zone{padding:4px 2px}
.danger-zone p{margin:0 0 8px}
.save-state{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.save-state.error,.save-state.gone{color:var(--danger)}
.delivery-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.delivery-title{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.job-card.new{align-items:center;justify-content:center;color:var(--brand);font-weight:700;border-style:dashed;border-color:var(--line-strong);background:transparent;box-shadow:none;min-height:110px}
.job-card.new::before{display:none}
.page-head h1 .tag{vertical-align:middle;margin-left:6px}

/* ---------- Dialogs and messages -------------------------------------- */
.modal-back{position:fixed;inset:0;z-index:200;background:rgba(10,14,20,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lift);padding:22px 22px 18px;color:var(--ink)}
.modal h2{font-size:18px;margin-bottom:8px}
.modal p{margin:0 0 14px;color:var(--ink-soft);font-size:14.5px}
.modal .notice{margin-bottom:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}
.toasts{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;width:min(520px, calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--bg);border-radius:14px;padding:11px 16px;font-size:14px;box-shadow:var(--shadow-lift)}
.viewer .vbtn.wide{width:auto;padding:0 14px;font-size:14px}
.viewer .vbtn:disabled{opacity:.5}

/* ---------- Comments ---------------------------------------------------- */
.cbadge{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
.cbadge.unread{color:var(--accent);font-weight:700;position:relative;padding-right:9px}
.cbadge.unread::after{content:"";position:absolute;right:0;top:1px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.thread{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:12px}
.thread li{border-left:3px solid var(--brand);padding:2px 0 2px 12px}
.thread li.c-text_sent,.thread li.c-text_received{border-left-color:var(--accent)}
.c-head{display:flex;align-items:baseline;gap:8px;font-size:13px}
.c-icon{color:var(--brand);font-size:12px}
.c-text_sent .c-icon,.c-text_received .c-icon{color:var(--accent)}
.c-who{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-when{margin-left:auto;color:var(--ink-faint);font-size:11.5px;white-space:nowrap}
.c-head .x{border:none;background:none;color:var(--ink-faint);font-size:17px;line-height:1;padding:0 2px}
.c-head .x:hover{color:var(--danger)}
.c-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;margin-top:2px}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer .field{flex:1}
.record-text{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.stack-label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}

/* ---------- Reminders and My tasks -------------------------------------- */
.rem-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.card .rem-row:first-of-type{border-top:none;padding-top:0}
.list .rem-row{padding:12px 16px}
.list .rem-row:first-child{border-top:none}
.rem-row .check{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--line-strong);background:transparent;color:#fff;font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.rem-row.done .check{background:var(--brand);border-color:var(--brand)}
.rem-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.rem-main:hover .rem-title{color:var(--brand)}
.rem-title{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.rem-row.done .rem-title{text-decoration:line-through;color:var(--ink-faint)}
.rem-details{font-size:12.5px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rem-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-faint)}
.due.overdue{color:var(--accent);font-weight:700}
.check-label{display:flex;align-items:center;gap:8px;font-size:14.5px}
.narrow{max-width:760px}
.tasks-section + .tasks-section{margin-top:22px}
.tasks-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;flex:none}
.tasks-link:hover,.tasks-link.active{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.tasks-link .count{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
@media (max-width:640px){.tasks-link .label{display:none}.tasks-link{padding:7px 9px}}
.undo-bar{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);border-radius:14px;padding:9px 10px 9px 16px;box-shadow:var(--shadow-lift);width:min(520px, calc(100vw - 32px));font-size:14px}
.undo-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rem-main .by{font-size:11.5px;color:var(--ink-faint)}

/* ---------- Checklists -------------------------------------------------- */
:root{--cat-hvac:#0F766E;--cat-framing:#8A5A2B;--cat-punch:var(--danger);--cat-final:var(--ok)}
:root[data-theme="dark"]{--cat-hvac:#2DD4BF;--cat-framing:#D6A06A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cat-hvac:#2DD4BF;--cat-framing:#D6A06A}}
.tag.cat-plumbing{background:var(--tag-bg);color:var(--tag-on)}
.tag.cat-hvac{background:color-mix(in srgb, var(--cat-hvac) 14%, transparent);color:var(--cat-hvac)}
.tag.cat-framing{background:color-mix(in srgb, var(--cat-framing) 14%, transparent);color:var(--cat-framing)}
.tag.cat-electrical{background:var(--accent-tint);color:var(--warn)}
.tag.cat-final{background:var(--ok-bg);color:var(--ok)}
.tag.cat-punch{background:var(--danger-bg);color:var(--danger)}
.tag.cat-general{background:var(--row-hover);color:var(--ink-soft)}
.cl-row{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.card .cl-row:first-of-type{border-top:none;padding-top:0}
.cl-row:hover .cl-title{color:var(--brand)}
.cl-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cl-title{font-weight:600;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.cl-count{font-family:var(--num);font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.cl-count.complete{color:var(--ok)}
.cl-progress{display:flex;align-items:center;gap:8px}
.cl-progress .bar{flex:1;margin-top:0}
.cl-progress .pct{font-size:11.5px;width:34px;text-align:right;color:var(--ink-faint)}
.bar > span.complete{background:var(--ok)}
.bar > span.cat-bar-hvac{background:var(--cat-hvac)}
.bar > span.cat-bar-framing{background:var(--cat-framing)}
.bar > span.cat-bar-electrical{background:var(--accent)}
.bar > span.cat-bar-final{background:var(--ok)}
.bar > span.cat-bar-punch{background:var(--danger)}
.bar > span.cat-bar-general{background:var(--ink-faint)}
.cl-summary{display:flex;flex-direction:column;gap:8px}
.cl-summary-top{display:flex;justify-content:space-between;align-items:center}
.big-pct{font-family:var(--num);font-size:26px;font-weight:700;color:var(--ink)}
.big-pct.complete{color:var(--ok)}
.tpl-list{display:flex;flex-direction:column;gap:6px}
.tpl{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.tpl.selected{border-color:var(--brand);background:var(--brand-tint)}
.tpl-pick{flex:1;display:flex;align-items:center;gap:10px;border:none;background:none;text-align:left;padding:9px 12px;min-width:0}
.tpl-icon{font-size:18px;flex:none}
.tpl-text{display:flex;flex-direction:column;min-width:0}
.tpl-title{font-weight:600;font-size:14.5px}
.tpl-check{margin-left:auto;color:var(--brand);font-weight:700}
.tpl .x{border:none;background:none;color:var(--ink-faint);font-size:18px;padding:0 12px}
.tpl .x:hover{color:var(--danger)}
.items{list-style:none;margin:0;padding:0}
.item{border-top:1px solid var(--line);padding:9px 0}
.item:first-child{border-top:none;padding-top:0}
.item-line{display:flex;align-items:flex-start;gap:8px}
.item-check{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;border:2px solid var(--line-strong);background:transparent;color:#fff;font-size:13px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.item.done .item-check{background:var(--ok);border-color:var(--ok)}
.item.na .item-check{background:var(--ink-faint);border-color:var(--ink-faint)}
.item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border:none;background:none;padding:2px 0;text-align:left;font-size:14.5px}
.item.done .item-text .t,.item.na .item-text .t{text-decoration:line-through;color:var(--ink-faint)}
.na-label{font-size:11.5px;font-weight:600;color:var(--ink-faint)}
.item-preview{font-size:12.5px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-photos{font-size:12px;color:var(--brand);white-space:nowrap;margin-top:3px}
.na-btn{padding:4px 10px;font-size:12px}
.chev-btn{border:none;background:none;color:var(--ink-faint);font-size:14px;padding:4px 6px}
.item-more{margin:8px 0 2px 32px;display:flex;flex-direction:column;gap:8px}
.item-notes{display:flex;flex-direction:column;gap:4px}
.cl-summary .cl-progress .pct{display:none}

/* ---------- Time clock and payroll -------------------------------------- */
.my-clock{position:relative;margin-bottom:18px;max-width:760px}
.my-clock::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.my-clock.on::before{background:var(--ok)}
.mc-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.mc-state{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ok)}
.my-clock.off .mc-state{color:var(--ink-faint)}
.mc-job{font-size:18px;font-weight:700}
.my-clock .open-entry{border:none;padding:0;margin:0}
.mc-crew{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.mc-crew .count{margin-left:auto;background:var(--tag-bg);color:var(--tag-on);border-radius:999px;padding:1px 9px;font-size:12px}
.mc-crew:hover{color:var(--brand)}
.job-pick,.pick-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:14.5px}
.pick-row:hover{border-color:var(--brand);background:var(--brand-tint)}
.open-entry{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.card .open-entry:first-of-type{border-top:none;padding-top:0}
.oe-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.oe-name{font-weight:600;font-size:15px}
.oe-clock{display:flex;flex-direction:column;align-items:flex-end}
.hms{font-family:var(--num);font-size:22px;font-weight:700;color:var(--ok)}
.hms.paused{color:var(--ink-faint)}
.loc{font-size:12px;font-weight:600}
.loc.ok,.ok-text{color:var(--ok)}
.loc.bad{color:var(--danger)}
.loc.warn{color:var(--warn)}
.kv-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0}
.num.big{font-size:20px;color:var(--brand)}
.admin-links{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 14px}
.export-btns{display:inline-flex;flex-wrap:wrap;gap:8px}
button.row{width:100%;border:none;background:none;text-align:left;font:inherit;color:inherit}
.pay-worker + .pay-worker{border-top:1px solid var(--line)}
.pay-worker .pay-row{border-top:none}
.pay-shifts{background:var(--surface-2)}
.pay-shifts .row{padding-left:30px}

/* ---------- Menus ------------------------------------------------------- */
.menu{position:relative;display:inline-block}
.menu-items{position:absolute;top:calc(100% + 6px);z-index:60;min-width:230px;max-width:min(320px, calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:6px;display:flex;flex-direction:column}
.menu-items.right{right:0}
.menu-items.left{left:0}
.menu-items.wide{position:fixed;left:16px;right:16px;max-width:none}
.menu-items button{display:flex;align-items:center;gap:8px;text-align:left;border:none;background:none;border-radius:9px;padding:9px 10px;font-size:14px;font-weight:500;color:var(--ink)}
.menu-items button:hover:not(:disabled){background:var(--row-hover)}
.menu-items button.danger{color:var(--danger)}
.menu-items button:disabled{opacity:.5;cursor:default}
.menu-items .check{width:14px;flex:none;color:var(--brand);font-weight:700}
.menu-items hr{border:none;border-top:1px solid var(--line);margin:5px 4px}
.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:999px;width:34px;height:34px;font-size:18px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-tint)}

/* ---------- People ------------------------------------------------------ */
.people{display:flex;flex-direction:column}
.person{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.person:first-child{border-top:none;padding-top:2px}
.person.removed .avatar,.person.removed .person-main{opacity:.55}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;background:var(--row-hover);color:var(--ink-faint)}
.avatar.admin{background:var(--tag-bg);color:var(--tag-on)}
.avatar.invite{background:var(--accent-tint);color:var(--accent)}
.person-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.person-main .name{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.person-main .role{font-size:12.5px;color:var(--ink-faint)}
.you{font-size:11.5px;font-weight:600;color:var(--brand);margin-left:4px}
.tag.pending{background:var(--accent-tint);color:var(--warn)}
@media (max-width:480px){.person .tag.pending{display:none}}
.invite-actions{display:flex;gap:8px;flex:none}
@media (max-width:480px){.person.invite-row{flex-wrap:wrap}.invite-row .invite-actions{flex-basis:100%;justify-content:flex-end}}

/* ---------- Email to client, Settings ---------------------------------- */
.pick-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.pick{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:14.5px;cursor:pointer}
.pick input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.pick .addr{flex:1;min-width:0;overflow-wrap:anywhere}
.modal .section-label{margin-bottom:6px}
.modal p.small{font-size:12.5px;color:var(--ink-faint);margin-top:8px}
.modal .seg{margin-bottom:2px}
.about{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0 8px}

/* ---------- Phones and touch screens ------------------------------------ */
/* A fingertip needs about 44 px (Apple) to 48 px (Android); a mouse doesn't.
   On a touch screen, small controls get a taller hit area (an ::after that
   reaches past the drawn shape where the look should stay), and form text is
   16 px, below which an iPhone zooms the page into a field it's typing in. */
@media (pointer:coarse){
  .field,select.field,textarea.field{font-size:16px}
  .btn{min-height:44px}
  .btn.small{min-height:40px;padding:8px 14px}
  .seg button{min-height:40px}
  .crumb{padding:10px 0;margin:-10px 0 2px}
  .chip-btn{min-height:36px;padding:7px 12px;font-size:13.5px}
  .link-btn{padding:10px 0;margin-top:2px}
  .icon-btn{width:40px;height:40px}
  .chev-btn{min-width:40px;min-height:40px}
  .tag.removable button{min-width:36px;min-height:32px;font-size:18px}
  .tasks .x,.c-head .x,.tpl .x{min-width:40px;min-height:40px}
  .rem-row .check,.item-check,.tasks .box{position:relative}
  .rem-row .check::after,.item-check::after,.tasks .box::after{content:"";position:absolute;inset:-10px}
  input[type=checkbox]{width:22px;height:22px}
  .pick{padding:10px 2px}
  .pick input{width:22px;height:22px}
  .range{height:32px}
  .mc-crew{min-height:44px}
  .menu-items button{padding:12px;font-size:15px}
  .viewer .vbtn{width:48px;height:48px}
}

/* On a phone, a form's Cancel and Save sit at the bottom of the screen, under
   the thumb, instead of at the top of a long page. */
@media (max-width:640px){
  .modal-actions{flex-wrap:wrap}
  .head-actions.form-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;flex-wrap:nowrap;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
  .head-actions.form-actions .btn{flex:1;justify-content:center;min-height:46px}
  main:has(.form-actions){padding-bottom:110px}
  body:has(.form-actions) .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Date and time fields fill their column. iPhone Safari gives them a width of
   their own, wider than a phone's column, and centres the date in it; the
   look-and-feel reset is iPhone and iPad only (-webkit-touch-callout is
   theirs), where it's what lets the field take the column's width. */
input[type=date].field,input[type=time].field,input[type=datetime-local].field{min-width:0;max-width:100%;display:block}
@supports (-webkit-touch-callout:none){
  input[type=date].field,input[type=time].field,input[type=datetime-local].field{-webkit-appearance:none;appearance:none;min-height:46px;text-align:left}
  .field::-webkit-date-and-time-value{text-align:left}
}