/* Real controls in the kit's look. The prototype drew fields as spans (.in); here they are inputs, selects and buttons. */
input.in, select.in, textarea.in { width: 100%; font: inherit; font-size: 13px; color: var(--ink); }
textarea.in.area { resize: vertical; min-height: 52px; height: auto; display: block; }
select.in { appearance: auto; }
.in:focus-visible, .btn:focus-visible, .wt-table a:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
form.do { display: contents; }
form.do.inline { display: flex; gap: var(--s2); align-items: center; }
form.do.inline .in { height: 28px; }
button.btn { font-family: var(--font); }
.wt-table a.key { color: var(--ink); text-decoration: none; }
.wt-table a.key:hover { text-decoration: underline; }
.wt-table tr[data-href] { cursor: pointer; }
.wt-table tr.kb td { box-shadow: inset 0 0 0 1px var(--brand-strong); }
.wt-pane .x a { color: inherit; display: inline-flex; }
.find input { border: 0; background: transparent; font: inherit; width: 100%; outline: none; }
.wt-banner.ok { --k: var(--ok, #2f7d4f); }
/* a pane section inside a form keeps the pane's section look (work-tool.css styles .wt-pane > section) */
.wt-pane > form > section { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.wt-pane > form > section.foot { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); margin-top: -1px; padding: var(--s2) var(--s4); }
.wt-pane > form:last-child > section:last-child { border-bottom: 0; }
[hidden] { display: none !important; }
/* Dialogs (KFC work-tool-v2 kit.css, in the work-tool look): centred; a sheet on the right edge; an alert for a final step,
   its button in ink. Hairlines, 4 px corners, a 2 px rule on top as on every work surface. */
dialog.wt-dlg { padding: 0; border: 1px solid var(--line-2); border-top: 2px solid var(--brand-strong); border-radius: 4px; background: var(--surface); color: var(--ink);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog.wt-dlg[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 50; height: fit-content; }  /* opened from the address, without script */
dialog.wt-dlg::backdrop { background: rgb(16 24 20 / 38%); }
dialog.wt-dlg.sheet { margin: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 0; border-top: 0; border-left: 2px solid var(--brand-strong); }
dialog.wt-dlg.sheet[open]:not(:modal) { inset: 0 0 0 auto; height: 100dvh; }
dialog.wt-dlg.alert { border-top-color: var(--ink); width: min(440px, calc(100vw - 32px)); }
dialog.wt-dlg form { display: flex; flex-direction: column; max-height: inherit; height: 100%; margin: 0; }
.wt-dlg-head { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between; padding: var(--s4) var(--s4) var(--s2); }
.wt-dlg-head h2 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.wt-dlg-head p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: 13px; }
.wt-dlg-head .x { color: var(--ink-2); display: inline-flex; padding: 2px; }
.wt-dlg-body { display: grid; gap: var(--s3); align-content: start; padding: var(--s2) var(--s4) var(--s4); overflow: auto; flex: 1 1 auto; }
.wt-dlg-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface); }
.wt-dlg.alert .wt-dlg-foot { justify-content: flex-end; }
.wt-esum { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3); border: 1px solid var(--error); border-left-width: 3px; background: var(--error-bg); color: var(--ink); font-size: 13px; font-weight: 600; }
.wt-esum .ic { color: var(--error); flex: none; }
.wt-discard { display: none; gap: var(--s2); align-items: center; flex-wrap: wrap; padding: var(--s2) var(--s4); background: var(--attn-bg); border-top: 1px solid var(--line); }
.wt-discard.on { display: flex; }
.wt-discard p { margin: 0; flex: 1 1 180px; font-weight: 600; font-size: 13px; }
.btn.final { background: var(--ink); border-color: var(--ink); color: #fff; }
input[type=file].in { padding: 6px; height: auto; }
/* A value edited where it is (work-tool.js inplace) */
.wt-inplace { display: inline-flex; gap: var(--s2); align-items: center; }
.wt-ip-btn { color: var(--ink-3); display: inline-flex; }
.wt-ip-btn:hover, .wt-ip-btn:focus-visible { color: var(--brand-strong); }
.wt-ip { display: inline-flex; gap: var(--s1); align-items: center; }
.wt-ip .in { height: 28px; width: 160px; }
/* Toast: what the last action did, for five seconds, bottom centre */
.wt-toasts { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.wt-toast { pointer-events: auto; display: flex; gap: var(--s3); align-items: center; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: 4px; font-weight: 600; font-size: 13px; }
.wt-toast span { flex: 1; }
.wt-toast button { background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline; font: inherit; }
.wt-toast.out { opacity: 0; transition: opacity .3s; }
.wt-signform { display: grid; gap: var(--s3); }
.wt-signform h1 { margin: 0; }
.wt-signform p { margin: 0; }

/* The menu: open with its words by default (Tiego, 22 Oct); folding it is remembered in a cookie */
.wt-rail .wt-rail-tg{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;color:#aab4c3;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.wt-rail .wt-rail-tg:hover,.wt-rail a:hover{color:#fff}
.wt-rail .ic.on-open{display:none}
.rail-open .wt-rail .ic.on-open{display:inline}
.rail-open .wt-rail .ic.on-shut{display:none}
.rail-open .wt-rail .count{position:static;margin-left:auto}
.rail-open .wt-rail a,.rail-open .wt-rail .wt-rail-tg{white-space:nowrap}

/* About this page (KFC about_body): a sheet with the lead, who uses it, the steps, and the words the page uses */
.about-b{color:var(--ink-2,#4a5568)}
.about-dlg .ab-over{display:block;font:600 11px/1.4 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#6b7280)}
.about-dlg .ab-lead{font-size:15px;line-height:1.55;margin:0 0 var(--s4,16px)}
.about-dlg .ab-sec{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:var(--s3,12px) 0;border-top:1px solid var(--line,#e5e7eb)}
.about-dlg .ab-sec>.ic{margin-top:2px;color:var(--ink-3,#6b7280)}
.about-dlg .ab-sec h3{font-size:13px;font-weight:600;margin:0 0 6px}
.about-dlg .ab-sec p{margin:0}
.about-dlg .ab-steps{margin:0;padding-left:18px;display:grid;gap:6px}
.about-dlg .ab-terms{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px}
.about-dlg .ab-terms dt{font-weight:600}
.about-dlg .ab-terms dd{margin:0;color:var(--ink-2,#4a5568)}

/* Select menus (KFC's .p-select): the native select stays the field, hidden; the button shows the choice and opens the menu */
select.in.wt-sel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
.fld{position:relative;min-width:0}
button.in.wt-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:32px;padding:0 10px;cursor:pointer;text-align:left;font:inherit;font-size:13px;color:var(--ink);background:var(--surface)}
button.in.wt-sel .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.in.wt-sel .chev,.fbtn .chev{flex:none;width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-2px) rotate(45deg)}
button.in.wt-sel[aria-expanded=true]{border-color:var(--ink)}
.wt-menu{position:fixed;z-index:1000;margin:0;padding:4px 0;list-style:none;max-width:min(420px,calc(100vw - 16px));max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 8px 24px rgb(16 24 40 / .14),0 2px 6px rgb(16 24 40 / .08)}
.wt-menu li{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px 6px 8px;font-size:13px;color:var(--ink);cursor:pointer;line-height:1.35}
.wt-menu li .t{min-width:0;overflow-wrap:anywhere}
.wt-menu li.act,.wt-menu li:hover{background:var(--sunk,#f3f4f6)}
.wt-menu li .tick{flex:none;width:16px;height:16px;display:grid;place-items:center}
.wt-menu li[aria-selected=true]{font-weight:600}
.wt-menu li[aria-selected=true] .tick::after{content:"";width:5px;height:9px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-1px) rotate(45deg)}

/* A list's search and column filters are real controls now */
.wt-tabs .find,.wt-tools .find{cursor:text}
.wt-tabs .find input,.wt-tools .find input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;padding:0}
.wt-tabs .find:focus-within,.wt-tools .find:focus-within{border-color:var(--ink)}
.wt-tabs .find input::-webkit-search-cancel-button{cursor:pointer}
.fbtn{cursor:pointer;font:inherit}
.fbtn.on{border-color:var(--ink);font-weight:600}
.fbtn .v{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-nomatch{margin:0;padding:12px 16px;color:var(--ink-3);font-size:13px;border-top:1px solid var(--line)}
tr[hidden]{display:none}

/* Fields in a dialog take the width they are given; two side by side line up at the top, and stack when narrow */
.wt-dlg .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}
.wt-dlg .fld{display:grid;gap:6px}
.wt-dlg .in{width:100%;box-sizing:border-box}

/* The top bar's search is a real field; the month is a label (one month-end at a time) */
.wt-top .search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;padding:0}
.wt-top .search:focus-within{background:var(--surface);border-color:var(--ink)}
.wt-top .sp{flex:1}
.wt-top .ctl.static{border-color:transparent;padding-left:0}
.wt-status a.dens{text-decoration:none;color:var(--ink-2)}
.wt-status a.dens:hover{color:var(--ink)}
.wt-keys{display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;margin:0;align-items:center}
.wt-keys dd{margin:0;color:var(--ink-2)}

/* Tables in proportion (Tiego, 22 Oct): every column takes what its content needs and amounts, states and actions are never cut;
   the first column (the name) takes the rest and is the only one that shortens, with its full text on hover. */
.wt-table col{width:auto!important}
.wt-table td{max-width:none;overflow:visible;text-overflow:clip}
.wt-table td:first-child{max-width:0;width:45%;overflow:hidden;text-overflow:ellipsis}
.wt-table td.cb:first-child{width:36px;max-width:none}
.wt-table td.cb:first-child + td{max-width:0;width:45%;overflow:hidden;text-overflow:ellipsis}
.wt-table td.wrap{white-space:normal;max-width:0;width:35%;overflow-wrap:anywhere;line-height:1.35;padding-top:8px;padding-bottom:8px}
.wt-table td.act,.wt-table th.act{width:1%;white-space:nowrap}
.wt-table td.act .rec + .rec,.wt-table td.act .rec + form,.wt-table td.act form + .rec{margin-left:12px}

/* The facts line wraps rather than running off the page */
.wt-facts{flex-wrap:wrap;height:auto;min-height:24px;row-gap:6px;overflow:visible;white-space:normal}
.wt-facts .f,.wt-facts .s{white-space:nowrap}

/* Panes never scroll sideways: long words and file names wrap */
.wt-pane{overflow-x:hidden}
.wt-pane *{overflow-wrap:anywhere}
.wt-time li{min-width:0}
.wt-time li > span:first-child{min-width:0}
.wt-pane .kv dd{min-width:0}

/* Text in tables wraps instead of running out of its card; amounts, states, dates and actions stay on one line */
.wt-table td{white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding-top:6px;padding-bottom:6px}
.wt-table td:first-child{max-width:none;width:auto;overflow:visible}
.wt-table td.cb:first-child + td{max-width:none;width:auto;overflow:visible}
.wt-table td:has(> a.key),.wt-table td:has(> .key){min-width:160px}
.wt-table td.num,.wt-table td.act,.wt-table td.mono,.wt-table td:has(> .st:only-child){white-space:nowrap;overflow-wrap:normal}
.wt-table td .sub{white-space:nowrap}
/* A page head wraps when its title, views and buttons don't fit on one line */
.wt-head{flex-wrap:wrap;height:auto;min-height:32px;row-gap:8px}
.wt-head .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* What changed, in a pane: one line per change, the date on the right, long names wrap */
.wt-changes{list-style:none;margin:0;padding:0;display:grid}
.wt-changes li{display:flex;gap:12px;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.wt-changes li > span:first-child{min-width:0;overflow-wrap:anywhere}
.wt-changes .when{flex:none;font:500 12px/1.4 var(--mono);color:var(--ink-3)}
.wt-pane .mini td{white-space:normal;overflow-wrap:anywhere;height:auto;padding-top:6px;padding-bottom:6px}
.wt-pane .mini td.num,.wt-pane .mini td.sure{white-space:nowrap}
.wt-table td.nw{white-space:nowrap}

/* Narrower screens (the tool is built for 1440 px; it stays usable down to a phone): the menu folds to icons, the pane goes
   under its list, the top bar keeps the search and the account, the status bar keeps one line. */
@media (max-width:1180px){
  .wt.rail-open{grid-template-columns:var(--wt-rail) minmax(0,1fr)}
  .wt.rail-open .wt-rail .lbl{display:none}
  .wt.rail-open .wt-rail .count{position:absolute;margin:0}
  .wt-rail .wt-rail-tg{display:none}
}
@media (max-width:1024px){
  .wt-split{grid-template-columns:minmax(0,1fr)}
  .wt-pane{position:static;max-height:none}
  .wt-top .state{display:none}
}
@media (max-width:720px){
  .wt-top .wt-org,.wt-top .sep,.wt-top .ctl{display:none}
  .wt-top .search{max-width:none;margin-left:8px}
  .wt-top .search .keys{display:none}
  .wt-page{padding-left:12px;padding-right:12px}
  .wt-status > span:not(:first-child),.wt-status .env,.wt-status .dens{display:none}
  .wt-status > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wt-head h1{font-size:18px}
  .wt-tabs{flex-wrap:wrap;height:auto;row-gap:6px}
  .wt-tabs .tools{width:100%;margin-left:0}
  .wt-tabs .find{flex:1;width:auto}
  .wt-card{overflow-x:auto}
  .wt-card form.a-form{max-width:none}
  dialog.wt-dlg{max-width:calc(100vw - 24px)}
  dialog.wt-dlg.sheet{width:100vw;max-width:100vw}
}

/* The rail is one dark column from the top of the screen to the bottom: its top is the brand cell, as wide as the rail
   (52 px folded, 208 px open), in the rail's own colour; the light top bar starts where the rail ends. */
.wt-top .wt-brand{flex:none;display:flex;align-items:center;width:var(--wt-rail);height:var(--wt-top);margin-bottom:-1px;background:#1e2430;color:#fff;text-decoration:none;border-bottom:1px solid #2a3242;overflow:hidden}
.wt-top .wt-brand .mark{flex:none;background:none}
.wt-top .wt-brand .wt-org{display:none;flex-direction:column;line-height:1.15;white-space:nowrap}
.wt-top .wt-brand .wt-org b{font-size:13px;letter-spacing:.08em}
.wt-top .wt-brand .wt-org small{font-size:11px;font-weight:400;color:#aab4c3;letter-spacing:0}
.rail-open .wt-top .wt-brand{width:var(--wt-rail-open)}
.rail-open .wt-top .wt-brand .wt-org{display:flex}
@media (max-width:1180px){
  .rail-open .wt-top .wt-brand{width:var(--wt-rail)}
  .rail-open .wt-top .wt-brand .wt-org{display:none}
}
/* ...and to the very bottom: the status bar sits beside the rail, not under it */
.wt-rail{grid-row:2/4;grid-column:1}
.wt-status{grid-column:2}

/* Upload: one place per side, each a drop zone (the whole box takes a click or a dropped file) */
.wt-drops{display:grid;gap:var(--s2)}
.wt-drop{position:relative;display:flex;align-items:center;gap:var(--s3);padding:12px 14px;border:1px dashed var(--line-2);border-radius:4px;background:var(--sunk);cursor:pointer;min-width:0}
.wt-drop:hover,.wt-drop.over{border-color:var(--brand);background:var(--surface)}
.wt-drop:focus-within{outline:2px solid var(--focus,#1d4ed8);outline-offset:2px}
.wt-drop > .ic{color:var(--ink-3)}
.wt-drop .wd-t{display:grid;gap:2px;flex:1;min-width:0}
.wt-drop .wd-t b{font-size:13.5px;font-weight:600}
.wt-drop .wd-t small{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.wt-drop .wd-pick:empty{display:none}
.wt-drop .wd-pick{color:var(--ink);font-weight:500}
.wt-drop .wd-btn{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);font-size:12.5px;font-weight:500}
.wt-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.wt-drop.held{border-style:solid}
.wt-drop.held > .ic{color:var(--ok,#15803d)}
.wt-drop.picked{border-style:solid;border-color:var(--brand);background:var(--surface)}
.wt-drop.picked > .ic{color:var(--brand)}
.wt-dlg .wt-drop,.wt-drop{text-align:left;color:var(--ink);font-weight:400;margin:0}
.wt-drop .wd-t b{color:var(--ink)}
.wt-drops > .fh{font-size:12px;color:var(--ink-3)}

/* State as a soft pill: icon + word on a light tint of its colour. Five meanings only: done, waiting, needs you, sent, not yet */
.st{padding:2px 8px 2px 6px;border-radius:999px;line-height:18px;background:var(--neutral-bg)}
.st.ok{background:var(--ok-bg)} .st.wait{background:var(--attn-bg)} .st.dec{background:var(--brand-soft)} .st.info{background:var(--info-bg)}
.st.q{background:var(--neutral-bg)}
.st.tint{padding:2px 8px 2px 6px}
.wt-strip .st,.wt-facts .st{font-size:12.5px}
/* Rows that need you carry a thin red bar; finished rows step back */
.wt-table tbody tr:has(> td .st.dec) > td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.wt-table tbody tr:has(> td .s-approved, > td .s-cancelled) > td{color:var(--ink-2)}
.wt-table tbody tr:has(> td .s-approved, > td .s-cancelled) .key{color:var(--ink-2)}
/* Money stays in ink; a zero steps back */
.wt-table td.num.zero{color:var(--ink-3)}

/* Quick filter chips under a list's tabs */
.wt-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px var(--s3);border-bottom:1px solid var(--line);background:var(--surface)}
.wt-chips .lab{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-right:4px}
.wt-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font:500 12.5px/1 var(--font);cursor:pointer}
.wt-chip .ic{width:14px;height:14px}
.wt-chip .n{font:600 11px/1 var(--mono);color:var(--ink-3)}
.wt-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.wt-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.wt-chip[aria-pressed=true] .n{color:#cfd5de}
.fams{display:inline-flex;gap:3px;margin-left:8px;vertical-align:-3px}
.fams .ksq{width:16px;height:16px;margin:0;border-radius:3px}
.fams .ksq .ic{width:11px;height:11px}
.wt-chip .ksq{width:16px;height:16px;margin:0 0 0 -4px;border-radius:999px}
.wt-chip .ksq .ic{width:10px;height:10px}

/* A value that can't be changed here reads as text, never as a box that looks typeable */
.fld span.in{display:block;border:0;background:none;padding:0;height:auto;min-height:0;box-shadow:none;font-weight:500;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.wt-read{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0 0 12px;font-size:13px}
.wt-read dt{color:var(--ink-3)}
.wt-read dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

/* First steps: where a list is empty because nothing is set up yet */
.wt-start{padding:var(--s4);margin-bottom:var(--s3);border-top:2px solid var(--brand)}
.wt-start .ws-head{display:flex;gap:12px;align-items:flex-start}
.wt-start .ws-head > .ic{color:var(--brand);margin-top:2px}
.wt-start h2{margin:0 0 4px;font-size:16px}
.wt-start .ws-head p{margin:0;color:var(--ink-2)}
.wt-start .ws-steps{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.wt-start .ws-steps li{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.wt-start .ws-steps .n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--ink);color:#fff;font:600 12px/1 var(--font)}
.wt-start .ws-steps li.ok .n{background:var(--ok)}
.wt-start .ws-steps li.ok b{color:var(--ink-2);text-decoration:line-through}
.wt-start .ws-steps b{font-size:13.5px}
.wt-start .ws-steps p{margin:4px 0 8px;font-size:12.5px;color:var(--ink-2)}
.wt-start .ws-foot{margin:var(--s3) 0 0}