/* TaskClaimsLab: SAR Duty's look.
 * Colours, type, and components follow SAR Duty (github.com/gshaw/sarduty, MIT License,
 * Copyright (c) 2026 gshaw). Start static/css/app.css from this file.
 * Fonts: IBM Plex Sans and IBM Plex Mono (SIL Open Font License), from Google Fonts or self-hosted.
 */
:root {
  --nav: #13243a;          /* site bar */
  --accent: #ffb81c;       /* site bar's bottom edge, avatar, focus */
  --primary: #1d4f91;      /* current nav item, selected tile, radios */
  --link: #1d70b8;
  --link-hover: #003078;
  --text: #0b0c0c;
  --muted: #505a5f;
  --border: #b1b4b6;
  --border-subtle: #dedfe0;
  --surface-alt: #f3f2f1;  /* buttons, tiles, table head */
  --row-alt: #f8f8f7;
  --selected: #dbe7f5;
  --success: #00703c;      /* go buttons, done steps */
  --danger: #c2301a;
  --incident: #2453a6;
}
body{margin:0}
a{color:#1d70b8}a:hover{color:#003078}
.sd{font-family:"IBM Plex Sans",system-ui,sans-serif;color:#0b0c0c;background:#ffffff;font-size:16px;line-height:24px}
.bar{background:#13243a;color:#ffffff;border-bottom:4px solid #ffb81c}
.bar-in{display:flex;align-items:center;gap:12px;padding:0 16px;height:56px;max-width:1280px;margin:0 auto;box-sizing:border-box}
.brand{font-weight:700;font-size:20px;color:#ffffff;text-decoration:none}
.brand span{color:#ffb81c}
.team{color:#ffffff;font-weight:600}
.slash{color:#8a96a3}
.avatar{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#ffb81c;color:#13243a;font-weight:700;font-size:13px;display:grid;place-items:center}
.wrap{display:flex;flex-wrap:wrap;gap:32px;max-width:1280px;margin:0 auto;padding:16px 16px 48px;box-sizing:border-box}
.nav{flex:1 1 180px;max-width:200px;display:flex;flex-direction:column}
.nav-g{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid #dedfe0}
.nav a{display:block;padding:6px 12px;color:#0b0c0c;text-decoration:none;border-left:4px solid transparent}
.nav a[aria-current]{font-weight:700;border-left-color:#1d4f91}
.main{flex:999 1 560px;min-width:0}
.t{font-size:32px;line-height:40px;margin:0 0 16px;font-weight:700}
.st{font-size:24px;line-height:32px;margin:0;font-weight:700}
.crumbs{display:flex;gap:8px;font-size:14px;color:#505a5f;margin:0 0 8px;padding:0;list-style:none}
.lead{font-size:19px;line-height:28px;color:#505a5f;margin:0 0 24px;max-width:40rem}
.lbl{display:block;font-weight:700;margin:0 0 4px}
.hint{display:block;color:#505a5f;font-size:14px;line-height:20px}
.field{margin:0 0 24px;border:0;padding:0}
.inp{box-sizing:border-box;width:100%;font:inherit;border:2px solid #0b0c0c;padding:6px 8px;background:#ffffff;color:#0b0c0c}
.radio{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.radio input{width:22px;height:22px;margin:2px 0 0;accent-color:#1d4f91;flex:none}
.btn{font:inherit;font-weight:600;border:0;padding:8px 16px;background:#f3f2f1;color:#0b0c0c;box-shadow:0 2px 0 #b1b4b6;cursor:pointer;text-decoration:none;display:inline-block;min-height:44px;box-sizing:border-box}
.go{background:#00703c;color:#ffffff;box-shadow:0 2px 0 #002d18}
.no{background:#c2301a;color:#ffffff;box-shadow:0 2px 0 #6b1a0e}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:0 8px;line-height:20px;background:#f3f2f1;color:#0b0c0c}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.tbox{overflow-x:auto}
.tb{border-collapse:collapse;width:100%;font-size:15px}
.tb th{text-align:left;border-bottom:2px solid #0b0c0c;padding:8px;white-space:nowrap}
.tb td{border-bottom:1px solid #dedfe0;padding:8px;vertical-align:top}
.tb tbody tr:nth-child(even) td{background:#f8f8f7}
.r{text-align:right}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.tile{flex:1 1 104px;padding:8px 12px;background:#f3f2f1;text-decoration:none;color:#0b0c0c;border-bottom:4px solid transparent;font-size:14px}
.tile b{display:block;font-size:24px;line-height:32px}
.tile[aria-current]{background:#dbe7f5;border-bottom-color:#1d4f91}
.dl{margin:0}.dl dt{font-weight:700;font-size:14px;color:#505a5f;padding-top:12px}.dl dd{margin:0;padding-bottom:12px;border-bottom:1px solid #dedfe0}
.drop{border:2px dashed #b1b4b6;padding:20px;text-align:center;color:#505a5f;font-size:14px}
.file{display:flex;gap:12px;align-items:center;margin:0 0 12px;text-align:left}
.thumb{width:64px;height:48px;background:#2453a6;flex:none}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;border-bottom:1px solid #b1b4b6}
.tabs a{padding:8px 14px;background:#f3f2f1;color:#0b0c0c;text-decoration:none;font-weight:600}
.tabs a[aria-current]{background:#dbe7f5;box-shadow:inset 0 -4px 0 #1d4f91}
.switch{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:12px 0}
.tog{width:52px;height:30px;border-radius:15px;background:#1d4f91;flex:none;position:relative;border:0;padding:0}
.tog span{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#ffffff}
.tog.off{background:#b1b4b6}.tog.off span{right:auto;left:4px}
.att{list-style:none;margin:0;padding:0}
.att li.has-act{display:flex;align-items:center;gap:8px;border-bottom:1px solid #dedfe0}
.att li.has-act a{flex:1;min-width:0;border-bottom:0}
.att li.has-act form{flex:none;padding-right:8px}
.att li a{display:flex;gap:12px;padding:12px 8px;border-bottom:1px solid #dedfe0;text-decoration:none;color:#0b0c0c}
.dot{width:10px;height:10px;border-radius:50%;background:#1d70b8;margin-top:7px;flex:none}
.dot.warn{background:#ffb81c}
.card{border:1px solid #dedfe0;padding:16px}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:10px;margin:0 0 10px}
.n{width:22px;height:22px;border-radius:50%;border:2px solid #b1b4b6;color:#505a5f;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;box-sizing:border-box}
.n.now{background:#1d4f91;border-color:#1d4f91;color:#ffffff}
.n.done{background:#00703c;border-color:#00703c;color:#ffffff}
.warnbox{border:4px solid #ffb81c;padding:16px;margin:0 0 24px}
.okbox{border:4px solid #00703c;padding:16px;margin:0 0 24px}

/* ---- TaskClaimsLab additions ---- */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.0ceb759015a6.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-600.e78568807d10.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url("../fonts/ibm-plex-sans-700.f9b6356e32a9.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.4cc7b4398540.woff2") format("woff2")}

/* Focus: amber, 3 px, never removed */
:focus-visible{outline:3px solid var(--accent);outline-offset:0}
.inp:focus{outline:3px solid var(--accent);outline-offset:0;box-shadow:inset 0 0 0 2px var(--text)}
.bar a:focus-visible{outline-color:var(--accent);background:var(--accent);color:var(--nav)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--accent);color:var(--nav);padding:8px 12px;z-index:10}

/* Site bar */
.team-short,.menu{display:none}
.nav .nav-g:last-child{border-bottom:0}
.nav form{margin:0}
.nav button.link{display:block;width:100%;text-align:left;padding:6px 12px;border:0;border-left:4px solid transparent;background:none;font:inherit;color:var(--text);cursor:pointer;text-decoration:underline}
.page-head{display:flex;gap:16px;align-items:center;margin:0 0 16px}
.page-head .t{margin:0}
.team-mark{width:72px;height:72px;background:var(--selected);color:var(--primary);font-weight:700;font-size:24px;display:grid;place-items:center;flex:none}
.meta{color:var(--muted);margin:4px 0 0}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.inp{min-height:44px}
.form{max-width:40rem}
.lbl + .hint{margin:0 0 8px}
.err{display:block;color:var(--danger);font-weight:700;margin:0 0 8px}
.field.has-err{border-left:4px solid var(--danger);padding-left:12px}
.field.has-err .inp{border-color:var(--danger)}
.msgs{list-style:none;margin:0 0 24px;padding:0}
.msgs li{margin:0 0 8px}
.msgs .error{border-color:var(--danger)}
.empty{color:var(--muted)}
.btn:focus-visible{outline:3px solid var(--accent);box-shadow:0 2px 0 var(--text)}
.inline{display:inline;margin:0}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--link);text-decoration:underline;cursor:pointer;min-height:44px}

/* Phones: short team name, Menu opens the side navigation */
@media (max-width:640px){
  .brand,.slash,.team-long{display:none}
  .team-short{display:inline}
  .bar-in{justify-content:space-between}
  .avatar{margin-left:0}
  .menu{display:flex;gap:8px;align-items:center;min-height:44px;color:#ffffff;font-weight:600;text-decoration:none}
  .menu svg{width:22px;height:22px}
  .wrap{display:block;padding-top:8px}
  .nav{display:none;max-width:none}
  .nav:target{display:flex;border-bottom:2px solid var(--border-subtle);margin:0 0 16px}
  .t{font-size:27px;line-height:32px}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st{margin-top:32px;margin-bottom:16px}
.card .st{margin-top:0}

/* ---- Milestone 1: claims ---- */
.js .js-only{display:block}
.js-only{display:none}
[hidden]{display:none !important}
.radio label{cursor:pointer}
.radio .hint{margin-top:2px}
fieldset.field{min-width:0}
legend.lbl{padding:0}
.pair{display:flex;gap:16px;flex-wrap:wrap}
.pair .field{flex:1 1 140px}
.cost .inp{max-width:18rem}
.lbl-small{font-size:14px;margin-top:16px}
textarea.inp{min-height:120px;resize:vertical}
.quote-link{margin:0 0 8px}
.drop.over,.drop.has-file{border-color:var(--primary)}
.drop-icon{width:28px;height:28px;color:var(--muted)}
.drop-text{margin:4px 0 12px;color:var(--text);font-size:16px}
.drop input[type=file]{max-width:100%}
.previews .file{margin:0 0 12px}
img.thumb{object-fit:cover;background:var(--surface-alt)}
.thumb-file{width:48px;height:56px;border:2px solid var(--border);flex:none;position:relative;background:#fff}
.thumb-file::after{content:"";position:absolute;right:-2px;top:-2px;border-width:0 12px 12px 0;border-style:solid;border-color:var(--surface-alt) #fff}
.quote-count{margin-top:12px}
.crumbs li{list-style:none}
.crumbs a{color:var(--text)}

/* A claim */
.claim{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,2fr);gap:24px;align-items:start}
.claim-photo{background:var(--surface-alt);padding:16px}
.claim-photo img{display:block;width:100%;height:auto}
.claim-photo .file{margin:0}
.steps li{align-items:flex-start}
.steps .later{color:var(--muted)}
.steps .now b{font-weight:700}
.steps .note{display:block;color:var(--muted);font-size:14px;line-height:20px}
.tile{box-sizing:border-box;flex-basis:96px}
.box{border-top:1px solid var(--border-subtle);padding-top:16px;margin-top:24px}
.box .st{margin:0 0 12px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--primary);flex:none}
.ext::after{content:" ↗";font-size:12px}

/* Claims */
.head-row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.head-row .t{margin:0 0 8px}
.err-group{margin:0 0 32px}
.err-head{display:flex;gap:8px 16px;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin:0 0 4px}
.err-head h2{margin:0}
.err-head .meta{margin:0}
.declined-note{color:var(--muted);font-size:14px}

@media (max-width:860px){
  .claim{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tiles{gap:4px}
  .tile{flex:1 1 30%;padding:6px 8px;font-size:13px}
  .tile b{font-size:20px;line-height:28px}
  .head-row .btn{width:100%;text-align:center}
}
.att-text{flex:1;min-width:0}
.att-title{display:block;color:var(--link);text-decoration:underline;font-weight:700}
.att-detail{display:block;color:var(--muted);font-size:14px;line-height:20px}
.chev{color:var(--muted);font-size:20px;align-self:center}
.att li a:hover .att-title{color:var(--link-hover)}
.steps-head{margin-top:0}
.okbox > p:first-child,.warnbox > p:first-child{margin-top:0}
.okbox > p:last-child,.warnbox > p:last-child{margin-bottom:0}

/* ---- Milestone 2: ERRs ---- */
.err-block{border-top:1px solid var(--border-subtle);margin-top:16px;padding-top:16px}
.err-place .lbl,.err-block p .lbl{display:block}
.change{display:inline-block;margin-left:8px}
.change summary{color:var(--link);text-decoration:underline;cursor:pointer;display:inline}
.change[open]{display:block;margin:12px 0 0}
.inline-form{margin-top:12px}
.manager-form{margin-top:16px}
.inline-pick{display:flex;gap:8px;align-items:stretch;max-width:40rem}
.inline-pick .inp{flex:1}
.sig-state{margin:12px 0}
.badge.ok{background:var(--success);color:#fff}
.btn-icon{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.inline-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.inline-acts .check{margin:0}
.sig-preview{border-bottom:1px solid var(--border);padding:8px 0;margin:8px 0 16px;max-width:30rem}
@font-face{font-family:"Mr Dafoe";font-display:swap;src:url("../fonts/MrDafoe-Regular.e2bba9cf49b2.ttf") format("truetype")}
/* A typed signature, as the PDFs draw it: "/s/" plain, the name in Mr Dafoe (static/fonts/OFL-MrDafoe.txt) */
.sig-name{display:block;font-size:30px;line-height:1.2;color:#0b2a8a;font-family:"Mr Dafoe",Georgia,serif}
.sig-slash{font-family:"IBM Plex Sans",Arial,sans-serif;font-size:14px;vertical-align:baseline}
a.plain{color:inherit;text-decoration:none}
a.plain:hover{text-decoration:underline}
.answer-table td{vertical-align:top}
.answer .radio{margin:0 0 4px}
.amount{max-width:9rem;margin-bottom:6px}
.why{min-height:0;font-size:14px}
.row-err td{background:#fdf0ee}
.answer-extra{margin-top:16px}
fieldset.answer{border:0;padding:0;margin:0;min-width:0}
.answer .radio label{white-space:nowrap}
.tb td.mono{white-space:nowrap}
textarea.why{min-height:44px;height:44px}
.answer-table td:nth-child(2){white-space:nowrap}
.err-place .hint{display:inline}
.err-place .change{display:inline-block}
.incident-search{margin-bottom:6px}
/* Sign in with a passkey, under the email form */
.passkey-sign-in{margin-top:16px;max-width:40rem}
.passkey-sign-in .or{margin:0 0 8px;color:var(--text-secondary,#505a5f)}
.passkey-sign-in .warnbox{margin-top:12px}
/* A claim: Add the receipt, and its history */
.receipt-form{margin-top:16px}
.history{margin-top:16px}
.history summary{cursor:pointer;font-weight:600}
.history-list{margin:8px 0 0;padding-left:20px}
.history-list li{margin:0 0 4px}
/* Top right: search, and the account menu under the avatar with Log out */
.bar-search{margin-left:auto}
.bar-search input{width:220px;height:34px;box-sizing:border-box;border:2px solid #ffffff;padding:4px 10px;font:inherit;font-size:15px;color:#0b0c0c;background:#ffffff}
.bar-search input:focus{outline:3px solid var(--accent);outline-offset:0}
.bar-search-link{display:none;color:#ffffff;min-width:44px;min-height:44px;place-items:center}
.bar-search-link svg{width:22px;height:22px}
.account{position:relative}
.account summary{list-style:none;cursor:pointer;display:grid;place-items:center;min-width:44px;min-height:44px}
.account summary::-webkit-details-marker{display:none}
.account summary:focus-visible{outline:3px solid var(--accent);outline-offset:0}
.account .avatar{margin-left:0}
.account-menu{position:absolute;right:0;top:48px;z-index:20;min-width:200px;background:#ffffff;color:#0b0c0c;border:1px solid #b1b4b6;box-shadow:0 2px 6px rgba(0,0,0,.2);padding:8px 0}
.account-name{margin:0;padding:6px 16px;font-weight:600;border-bottom:1px solid #dedfe0}
.account-menu button.link{display:block;width:100%;text-align:left;padding:10px 16px;border:0;background:none;font:inherit;color:#0b0c0c;cursor:pointer;text-decoration:underline}
.account-menu button.link:hover{background:#f3f2f1}
.search-page{display:flex;gap:8px;max-width:40rem;margin:0 0 16px}
.search-page .inp{flex:1}
@media (max-width: 640px){
  .bar-search{display:none}
  .bar-search-link{display:grid;margin-left:auto}
}
/* Searching a long list (claims/forms.py data-combobox, static/js/combobox.js): matches under the box, big to tap */
.combobox{position:relative;max-width:40rem}
.combobox-list{position:absolute;left:0;right:0;top:100%;z-index:15;margin:0;padding:0;list-style:none;background:#ffffff;border:2px solid #0b0c0c;border-top:0;max-height:352px;overflow-y:auto;box-shadow:0 4px 8px rgba(0,0,0,.15)}
.combobox-list li{min-height:44px;padding:10px 12px;box-sizing:border-box;border-bottom:1px solid #dedfe0;cursor:pointer;line-height:1.3}
.combobox-list li[aria-selected="true"],.combobox-list li:hover{background:var(--selected,#dbe5f3)}
.combobox-group{display:block;font-size:13px;color:#505a5f}
.combobox-none{font-weight:600;color:var(--primary,#1d4f91)}
.combobox-more{color:#505a5f;cursor:default}
.combobox-status{display:block;margin-top:4px}
.not-in-d4h{margin-top:8px}
.delete-draft{margin-top:24px}
/* Generate email (claims/err_email.html) */
.email-steps{padding-left:20px;max-width:44rem}
.email-steps li{margin:0 0 12px}
.email-preview{border:1px solid var(--border,#b1b4b6);padding:16px;max-width:44rem;margin-top:16px}
.email-body{white-space:pre-wrap;font-family:inherit;font-size:16px;margin:12px 0 0;padding-top:12px;border-top:1px solid #dedfe0}