:root{--bg:#f2f4f3;--surface:#fff;--ink:#17201d;--muted:#55625d;--line:#d6dcda;--soft:#e9edeb;--accent:#0f766e;--accent-ink:#fff;--accent-soft:#dff2ef;--warn:#b45309;--warn-soft:#fbf0dc;--bad:#b42318;--bad-soft:#fde8e6}
@media (prefers-color-scheme:dark){:root{--bg:#121715;--surface:#1b2220;--ink:#e8eeeb;--muted:#a3b0ab;--line:#35403c;--soft:#252d2a;--accent:#4fd1c0;--accent-ink:#06211d;--accent-soft:#14332f;--warn:#f0b35c;--warn-soft:#3a2c14;--bad:#f58a80;--bad-soft:#3d1c19;color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","PingFang TC",sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px 12px}
button:hover:not(:disabled){background:var(--soft)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea,select{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 10px;width:100%}
/* A field that cannot be changed (an approved file, a round running) reads as such: filled in grey, its words still in ink. */
:is(input,textarea,select):disabled{background:var(--soft);border-color:var(--soft)}
textarea{resize:vertical}
/* Named for screen readers, not shown. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1{font-size:18px;margin:0}
h2{font-size:15px;margin:0}
h3{font-size:14px;margin:0}
.muted{color:var(--muted)}
.small{font-size:12px}
.top{display:flex;align-items:center;gap:12px;padding:9px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .spacer{flex:1}
.top a{color:inherit;text-decoration:none;padding:3px 6px;border-radius:5px}
.top a.on{background:var(--soft);font-weight:600}
.top-tabs{display:flex;gap:12px;align-items:center}
.top>h1,.top-tabs a,.top>button{white-space:nowrap}
/* A phone's width: the title with the language and sign-out on the first line, the tabs with the address on the second, which
   wraps inside its own box when long instead of making a third line. It used to wrap into three, the address alone on one. */
@media (max-width:600px){
  .top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"title . lang out" "tabs who who who";gap:6px 10px}
  .top>h1{grid-area:title}.top>.top-tabs{grid-area:tabs;gap:6px}.top>.spacer{display:none}
  .top>.top-who{grid-area:who;min-width:0;text-align:right;overflow-wrap:anywhere}
  .top>button:nth-last-child(2){grid-area:lang}.top>button:last-child{grid-area:out}
}
/* width:100%: in #main, a column flexbox, auto margins would shrink it to its content's width. */
.center{width:100%;max-width:560px;margin:40px auto;padding:0 16px;display:grid;gap:14px}
.center.wide{max-width:760px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:12px}
/* The panel's gap spaces its lines; an empty slot for a note or a failure takes none until it says something. */
.panel>p{margin:0}
.panel>:is(div,p):empty:not([role]){display:none}
label{display:grid;gap:4px;font-weight:600;font-size:13px}
.err{color:var(--bad);font-size:13px}
.err.fail{margin:0}
.chat>.fail{padding:6px 16px 0}
.row-wrap>.fail{padding:0 10px 6px}
/* The connection line and the notice of a newer version: over the page, never in its flow, so that what it shows stays where it is.
   In the corner away from the composer and its failures, one above the other; clicks go through the line. */
.corner{position:fixed;right:16px;bottom:16px;z-index:30;max-width:min(520px,calc(100% - 32px));display:grid;justify-items:end;gap:6px;pointer-events:none}
.conn{background:var(--ink);color:var(--surface);padding:7px 14px;border-radius:8px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.conn[hidden],.version[hidden]{display:none}
.version{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:var(--surface);border:1px solid var(--accent);padding:6px 8px 6px 14px;border-radius:8px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.18);pointer-events:auto}
.version button{padding:2px 10px}
input[aria-invalid="true"]{border-color:var(--bad)}
.work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);flex:1;min-height:0}
.chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:88%;padding:9px 13px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.agent{background:var(--surface);border:1px solid var(--line);align-self:flex-start}
.bubble.user{background:var(--accent-soft);align-self:flex-end}
.bubble.admin{background:var(--warn-soft);align-self:flex-start;border:1px solid var(--warn)}
.who{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px}
.sheet{align-self:flex-end;max-width:88%;background:var(--accent-soft);border-radius:10px;padding:8px 13px}
.sheet summary{cursor:pointer;font-weight:600;font-size:13px}
.sheet pre{white-space:pre-wrap;margin:6px 0 0;font:inherit;font-size:13px;overflow-wrap:anywhere}
.activity{align-self:flex-start;font-size:12px;color:var(--muted);padding-left:4px}
.status-line{align-self:center;font-size:12px;color:var(--muted);background:var(--soft);padding:2px 12px;border-radius:12px}
.thinking{align-self:flex-start;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.1s infinite ease-in-out}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.cards{align-self:stretch;display:grid;gap:8px;background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:12px}
.card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:8px}
.card.off{opacity:.6}
/* 「…は後で」 and 「どれも当てはまらない・自分で書く」 at the start of their line, as on a group card, not centred across the card. */
.card>button.link{justify-self:start}
.q{overflow-wrap:anywhere}
.tag-item{display:inline-block;font-weight:700}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:7px;overflow:hidden;width:max-content;max-width:100%}
.seg button{border:0;border-radius:0;padding:4px 11px;min-width:32px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.seg button:disabled{opacity:.35}
.levelrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint{font-size:12px;color:var(--muted)}
.options{display:grid;gap:4px}
.options button{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:6px 10px;line-height:1.45}
.options button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
.options .mark{flex:none;width:12px;height:12px;margin-top:4px;border:1.5px solid var(--muted);border-radius:50%}
.options .mark.multi{border-radius:3px}
.options button[aria-pressed=true] .mark{background:var(--accent);border-color:var(--accent)}
.cards-foot{display:flex;justify-content:flex-end;gap:10px;align-items:center}
/* Approved, the conversation is folded under one line: it goes above the side panel, which takes the whole width. */
.work.approved{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.work.approved>.chat{border-right:0;border-bottom:1px solid var(--line)}
.work.approved .log{max-height:40vh;padding:8px 16px}
/* The switch between the conversation and the side panel, on a phone only (below). */
.pane-switch{display:none}
.compose{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.compose textarea{flex:1}
.side{display:flex;flex-direction:column;min-height:0}
.side-head{padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);display:grid;gap:7px}
.progress{height:6px;background:var(--soft);border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
.head-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.push{margin-left:auto}
.legend{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12px;color:var(--muted)}
.legend b{color:var(--ink)}
/* How to use the table, after the levels, on their line where it fits. */
.legend .legend-hint{color:var(--muted)}
.table{flex:1;overflow-y:auto;padding:10px 14px}
.groups{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));align-items:start}
.group{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.group-head{display:flex;gap:7px;align-items:center;width:100%;border:0;border-radius:0;background:var(--soft);padding:5px 10px;text-align:left;font-size:13px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:3px 10px;border-top:1px solid var(--line);min-height:34px}
.group-head+.row,.group-head+.row-wrap .row{border-top:0}
.name-btn{border:0;background:none;padding:2px 0;text-align:left;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;min-width:0;border-radius:4px}
.name-btn:hover:not(:disabled){background:none;text-decoration:underline}
.name{font-weight:600;overflow-wrap:anywhere}
.note{flex-basis:100%;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.row-actions{display:flex;gap:6px;align-items:center}
.seg.levels button{min-width:28px;padding:2px 0;font-variant-numeric:tabular-nums}
.seg button.sug{box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}
button.x{padding:2px 8px;color:var(--muted)}
button.x[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.row-more{padding:4px 10px 10px;background:var(--bg);display:grid;gap:6px}
.desc{display:flex;gap:8px;align-items:flex-start}
.desc>button{flex:none;white-space:nowrap}
.chip{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--muted);font-weight:400;white-space:nowrap}
.chip.wait{border-color:var(--accent);color:var(--accent)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.ev{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:0}
/* A skill the check could not identify (H6): one line and three ways out, under its row and on an identify_skill card. */
.identify{padding:0 10px 8px;display:grid;gap:5px}
.identify-ways{display:grid;gap:6px}
.identify-ways .say{display:flex;gap:6px;align-items:center}
.identify-ways .say input{flex:1;min-width:0}
.guide{display:grid;gap:6px}
.guide-row{display:grid;grid-template-columns:26px 90px minmax(0,1fr);gap:8px;align-items:center}
.lv-badge{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center;font-weight:700;background:var(--soft)}
.hint.block{display:block}
.dist i{display:block}
.banner{padding:10px 16px;font-size:13px}
.banner.ok{background:var(--accent-soft)}
.banner.warn{background:var(--warn-soft)}
.banner.bad{background:var(--bad-soft)}
.banner.with-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.banner .actions{margin-left:auto}
/* The conversation of the cycles before this one, folded under one line. */
.earlier{align-self:stretch;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface)}
.earlier>summary{cursor:pointer;font-size:13px;color:var(--muted)}
.earlier[open]{display:flex;flex-direction:column;gap:10px}
.earlier[open]>summary{margin-bottom:2px}
/* width:100%: in #main, a column flexbox, auto margins shrank it to each tab's content, so the tabs moved sideways from one to the next. */
.admin{width:100%;max-width:1280px;margin:0 auto;padding:18px 16px;display:grid;gap:14px}
/* What each admin tab shows under the tabs, one block under another. */
.admin-body{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-content:start}
/* The drafts list: a search and the states, with how many each. */
.drafts-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.drafts-filters input{flex:1 1 14em;width:auto;max-width:28em}
/* The summary written for the approver, as the 社員 page shows it: under its title, with its line breaks. */
.summary-box{display:grid;gap:4px}
.summary-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.rows{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
/* A message in place of the table (社員一覧's 対象の社員がいません。) is inset as a cell's text is. */
.rows>p{margin:0;padding:12px}
table{border-collapse:collapse;width:100%;min-width:560px}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:500}
th,td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
tr:first-child th{border-top:0}
tr.link{cursor:pointer}
tr.link:hover{background:var(--soft)}
.pill{font-size:12px;border-radius:10px;padding:1px 9px;background:var(--soft);white-space:nowrap}
.pill.submitted,.pill.pending{background:var(--warn-soft);color:var(--warn)}
.pill.approved{background:var(--accent-soft);color:var(--accent)}
.pill.returned{background:var(--bad-soft);color:var(--bad)}
.pill.updating{background:var(--accent-soft);color:var(--ink)}
.pill.update_submitted{background:var(--warn-soft);color:var(--warn)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lv{font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:800px){.work{grid-template-columns:1fr;height:auto}.chat{border-right:0;border-bottom:1px solid var(--line)}.log{max-height:70vh}.table{overflow:visible}}

#main{height:calc(100vh - 49px);display:flex;flex-direction:column;min-height:0;overflow:auto}
#main>.work{height:auto}
@media (max-width:800px){#main{height:auto}.row{grid-template-columns:1fr}.row-actions{justify-content:flex-start}}
/* A phone: the conversation or the side panel, one at a time, rather than one under the other, the conversation a scrolling box
   inside a scrolling page. Approved, the conversation is one line above the side panel, and there is no switch. */
@media (max-width:800px){
  .pane-switch{display:flex;width:auto;margin:10px 16px 0}
  .pane-switch button{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:6px 10px}
  .work[data-pane=chat]>.side,.work[data-pane=side]>.chat{display:none}
  .work[data-pane=chat]>.chat{border-bottom:0}
  .work[data-pane=chat] .log{min-height:50vh}
  .work.approved .log{max-height:40vh}
}
/* The admin's tabs on a phone: one line that scrolls sideways, rather than two with a ragged end. */
@media (max-width:600px){
  .admin>.seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .admin>.seg button{flex:none;white-space:nowrap}
}
.group-rows{display:grid;border:1px solid var(--line);border-radius:7px;max-height:420px;overflow:auto}
.grow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 10px;border-top:1px solid var(--line)}
.grow:first-child{border-top:0}
.grow.out .gname{text-decoration:line-through;opacity:.6}
.gname{display:flex;flex-wrap:wrap;column-gap:8px;min-width:0}
button.link{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;font-size:13px}
@media (max-width:800px){.grow{grid-template-columns:1fr}}
/* 経歴書 tab */
.side-tabs button{display:inline-flex;align-items:center;gap:6px}
.dot-warn{width:7px;height:7px;border-radius:50%;background:var(--warn)}
/* What is left before submitting, under the side panel's tabs: one short line per kind, so it stays a few lines high. */
.todo{display:grid;gap:3px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:13px}
.todo.clear{border-color:var(--accent);background:var(--accent-soft)}
.todo ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(17em,1fr));gap:0 14px}
.todo li button{border:0;border-radius:4px;background:none;padding:1px 0;text-align:left;font-size:13px;text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:3px}
.todo li button:hover:not(:disabled){background:none;text-decoration-color:var(--ink)}
.resume-tab{display:grid;gap:14px;align-content:start}
.rs{display:grid;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
.form-grid .wide{grid-column:1/-1}
/* align-content: a field's label and box keep their height when another field of its row is taller (the date of birth, with the
   age under it), instead of the box growing to fill the row. Every box one height, as on a project's first row. */
.form-grid label{font-weight:500;font-size:12px;color:var(--muted);align-content:start}
.form-grid :is(input:not([type=checkbox]):not([type=radio]),select){height:37px}
.label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
/* Cards and the project form lay out by their own width, which the window's does not tell (the conversation is 5/12 of it). */
.card,.editor{container-type:inline-size}
/* A project's first row (firstRow in resume.js): each field spans three rows of the row's grid, its label, its control and what goes
   under it, so that the four controls share one line and one height whatever wraps above or below them. */
.first-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,2fr) minmax(0,2fr);gap:4px 10px}
.first-row>.ff{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-items:start;font-weight:500;font-size:12px;color:var(--muted)}
.first-row .ff-head{display:block;align-self:end}
.ff-under{display:grid;gap:2px}
.first-row :is(input:not([type=checkbox]),select){height:37px}
@container (max-width:450px){.first-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.check,.form-grid label.check{display:flex;gap:6px;align-items:center;font-weight:400}
.check input{width:auto}
a.button{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:5px 12px;background:var(--surface);color:inherit;text-decoration:none}
a.button:hover{background:var(--soft)}
.proj-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;width:100%;text-align:left;border-radius:0;border-width:1px 0 0;padding:6px 4px;background:none}
.proj-row .note{grid-column:1/-1}
.mono{font-variant-numeric:tabular-nums}
.chip.ok{border-color:var(--accent);color:var(--accent)}
/* In an update, what differs from the approved version: 変更 and 追加 on the employee's rows, how on the admin's. */
.chip.change{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.editor{display:grid;gap:10px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:4px 0 10px}
/* Toggles that may wrap, each its own box (a project's phases, an unidentified skill's ways out): a segmented box wrapped onto a
   second line leaves a ragged empty end. */
.toggles{display:flex;flex-wrap:wrap;gap:4px}
.toggles button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.toggles.phases button{padding:3px 8px;font-size:12px}
.picker{display:grid;gap:4px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:6px 8px;margin-top:6px;background:var(--surface)}
.pick-group{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pick-group>span{min-width:6em}
button.pick{padding:1px 8px;font-size:12px;border-radius:12px}
button.pick[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* A project's technologies, in the project form and on a project_fill card: the names in one column as wide as the longest (up to
   30%), so that every box and every group of choices starts at the same place; the name above its box where it is narrow. */
.usages{display:grid;grid-template-columns:fit-content(30%) minmax(0,1fr);gap:6px 10px;margin-top:4px}
.usage-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline}
@container (max-width:450px){.usages{grid-template-columns:minmax(0,1fr);row-gap:10px}.usage-row{row-gap:2px}}
/* A technology with no usage line: the lines the agent offered to pick, then on a line of their own 「この案件では使っていない」 and
   「自分で書く」, in place of a bare box; under a box, 「この案件では使っていない」 on that same line. */
.usage-pick{display:grid;gap:4px;justify-items:start}
.usage-opts{display:flex;flex-wrap:wrap;gap:4px}
.usage-fixed{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.usage-pick button.opt,.options .usage-pick button.opt{display:inline-block;width:auto;padding:1px 10px;font-size:12px;border-radius:12px;font-weight:400;box-shadow:none}
.usage-pick button.opt[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.usage-fixed button.link,.options .usage-pick button.link{display:inline;width:auto;padding:0;font-size:12px}
.usage-own{display:grid;gap:4px}
.usage-row.unused b{color:var(--muted);text-decoration:line-through}
.unanswered-line{margin:0}
.link-pick .usage-pick{margin-left:20px}
@media (max-width:800px){.form-grid{grid-template-columns:1fr 1fr}.proj-row{grid-template-columns:auto minmax(0,1fr)}}

/* 経歴書 document: plain and dense, for printing on A4 */
.resume-page{width:100%;max-width:1120px;margin:16px auto;padding:0 16px;display:grid;gap:10px}
/* On a screen narrower than the document (a phone), the document keeps the width it is laid out for and scrolls sideways in its
   own frame, and the page does not: its one column is as wide as the window, where the history table's least width used to widen
   the page past it, cut off at the right. Print lays it out on its own (the print rules below), untouched by this. */
@media screen{.resume-page{grid-template-columns:minmax(0,1fr)}.resume-doc{overflow-x:auto}.resume-page .resume-doc>*{min-width:720px}}
.resume-doc{background:#fff;color:#111;padding:24px;border:1px solid var(--line);font-size:12px;line-height:1.45;color-scheme:light;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.resume-doc header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #111;padding-bottom:4px;margin-bottom:10px}
.resume-doc h1{font-size:20px;letter-spacing:.2em}
.resume-doc .r-unapproved{margin:0 auto 0 12px;border:1px solid #555;padding:0 5px;font-size:11px}
.resume-doc h2{font-size:13px;margin:14px 0 4px;padding-left:6px;border-left:4px solid #111}
.resume-doc table{border-collapse:collapse;width:100%;min-width:0}
.resume-doc th,.resume-doc td{border:1px solid #888;padding:3px 6px;vertical-align:top;text-align:left}
.resume-doc th{background:#eef1f0;font-weight:600;white-space:nowrap}
.resume-doc .c{text-align:center}
.resume-doc .big{font-size:15px;font-weight:700}
.resume-doc .pre{white-space:pre-wrap}
.resume-doc .muted{color:#555}
.resume-doc .legend{margin:0 0 4px;font-size:10.5px;color:#444}
.resume-doc th.ph{writing-mode:vertical-rl;font-size:10px;line-height:1.1;text-align:center}
.r-basic th,.r-summary>tbody>tr>th,.r-summary>tr>th{width:7em}
.r-phases{width:auto!important}
.r-phases th,.r-phases td{font-size:10.5px;padding:2px 5px;text-align:center;min-width:3.4em}
.resume-doc td>.r-phases{margin:-1px 0}
.r-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;align-items:start}
.r-cat{min-width:0}
.r-skills table{table-layout:fixed}
.r-skills td{overflow-wrap:anywhere}
.r-skills col.w-lv{width:3.6em}.r-skills col.w-exp{width:7.5em}.r-skills col.w-last{width:5.6em}
.r-skills td:nth-child(4),.r-skills td:nth-child(3){white-space:nowrap}
.r-skills th.cat{background:#dfe5e3}
.r-skills td:nth-child(4){font-size:11px}
/* Fixed widths, chosen for A4 portrait at 10px: the same 経歴書 lays out the same whatever the window or a long word, the phase
   columns are as narrow as a ● or a vertical label, and what they give up goes to 案件内容・担当, which takes the rest. The
   minimum keeps that column readable on a phone. */
.resume-doc .r-history{table-layout:fixed;min-width:60em}
.r-history col.w-no{width:2.2em}.r-history col.w-period{width:6.4em}.r-history col.w-place{width:5em}.r-history col.w-use{width:24%}.r-history col.w-role{width:4.2em}.r-history col.w-ph{width:1.25em}
.r-history th:not(.ph){white-space:normal}
.r-history .c{padding-left:2px;padding-right:2px}
.r-history .ph{padding:3px 0}
.r-history td{font-size:11.5px;overflow-wrap:break-word}
.r-history .nowrap{white-space:nowrap}
.r-history .use{margin-bottom:2px}
.r-history .duties{margin-top:3px}
.r-history tr{break-inside:avoid}
@media print{
  /* In the margins, where they move nothing on the page: each page's number and the total, and 未承認 at the top right of every
     page of a 経歴書 not yet approved, whose pages it names `unapproved`. A margin box does not inherit the body's font, and
     without a width the top right one spans the whole margin. Chrome prints no footer of its own on a page with a box at its
     foot, and no header on one with a box at its top (NOTES.md, Printing). */
  @page{size:A4;margin:10mm;
    @bottom-center{content:counter(page) " / " counter(pages);font:9px -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;color:#555}}
  @page unapproved{
    @top-right{content:"未承認";width:max-content;margin:10px 0;border:1px solid #555;padding:0 5px;font:10px/1 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;color:#111}}
  .resume-doc.unapproved{page:unapproved}
  /* An approved one's pages have the same box, empty: it prints nothing and moves nothing, and keeps Chrome's header (the date and
     the title) off them too. */
  @page approved{@top-right{content:""}}
  .resume-doc:not(.unapproved){page:approved}
  body{background:#fff}
  .top,.no-print,.corner{display:none!important}
  /* A page that shows the 経歴書 prints it alone, from the employee's view or any admin view: everything beside it goes, and what
     holds it becomes plain blocks that flow across the pages, whatever the screen layout (heights, scrolling, padding, breakpoints). */
  body:has(.resume-doc) :not(:has(.resume-doc),.resume-doc,.resume-doc *){display:none!important}
  :has(.resume-doc){display:block!important;height:auto!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;background:#fff!important}
  .resume-doc{border:0;padding:0;font-size:10px}
  .r-history td{font-size:9.5px}
  /* A heading and the legend under it go with what follows them, never alone at the foot of a page. */
  .resume-doc h2,.resume-doc .legend{break-after:avoid}
  thead{display:table-header-group}
}
.warn-text{color:var(--warn)}
.pf-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.est{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:0 4px;line-height:1.4}
/* A field that must be filled before submitting: the date of birth. */
.req{margin-left:6px;font-size:11px;font-weight:600;color:var(--warn)}
.qual-row{display:grid;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.qual-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.qual-fields label{font-weight:500;font-size:12px;color:var(--muted)}
/* Wide enough for its placeholder, 例：N1、850点, at the row's 11px. */
.qual-card-row .row-actions input{width:12em}
@media (max-width:800px){.qual-fields{grid-template-columns:1fr}}
.excel-pick{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* What the start page shows of a template sheet, with the converted text folded under it. */
.excel-summary{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:13px}
.excel-summary p{margin:0}
.excel-projects{margin:2px 0 0;padding-left:2em;display:grid;gap:1px;max-height:240px;overflow:auto}
.excel-projects li span+span{margin-left:10px}
.sheet-place{display:grid;gap:10px}
.converted summary{cursor:pointer;font-weight:600;font-size:13px}
.converted[open] summary{margin-bottom:8px}
button.info{border:0;background:none;padding:0 4px;color:var(--accent);font-size:13px;line-height:1}
.desc-line{color:var(--muted)}
.excel-pick label.button{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:5px 12px;background:var(--surface);font-weight:600;cursor:pointer}
.excel-pick label.button:hover{background:var(--soft)}
input.file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
input.file:focus-visible+span,.excel-pick:focus-within label.button{outline:2px solid var(--accent);outline-offset:2px}

/* 社員ファイル and summary */
:root{--lv1:#86b6ef;--lv2:#5598e7;--lv3:#2a78d6;--lv4:#1c5cab;--lv5:#104281;--bar:#2a78d6}
@media (prefers-color-scheme:dark){:root{--lv1:#1c5cab;--lv2:#2a78d6;--lv3:#5598e7;--lv4:#86b6ef;--lv5:#b7d3f6;--bar:#3987e5}}
.filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) repeat(3,minmax(0,1fr));gap:8px;align-items:center}
.filters .cond{display:flex;gap:6px}
.filters .cond input{min-width:0}.filters .cond select{width:auto}
.chip-btn{font-size:12px;padding:2px 10px;border-radius:12px;background:var(--accent-soft);border-color:var(--accent)}
table.people{min-width:0}
table.people td{vertical-align:top}
.nowrap{white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.kpi b{font-size:22px;font-variant-numeric:tabular-nums}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.charts .wide-chart{grid-column:1/-1}
.chart{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);align-content:start}
.chart-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chart-head h3{margin-right:auto}
.chart-head select{width:auto}
.legend-row{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend-row span{display:inline-flex;gap:5px;align-items:center}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.sw.lv1,.bseg.lv1{background:var(--lv1)}.sw.lv2,.bseg.lv2{background:var(--lv2)}.sw.lv3,.bseg.lv3{background:var(--lv3)}.sw.lv4,.bseg.lv4{background:var(--lv4)}.sw.lv5,.bseg.lv5{background:var(--lv5)}
.bseg.one{background:var(--bar)}
.bars{display:grid;gap:2px}
.bar-row{display:grid;grid-template-columns:minmax(6em,11em) minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;border:0;border-radius:4px;background:none;padding:3px 4px;font-size:13px}
button.bar-row:hover,.bar-row:focus-visible{background:var(--soft)}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{display:flex;align-items:center;gap:6px;min-width:0}
.bar{display:flex;gap:2px;height:14px;min-width:3px}
.bar .bseg{display:block;height:100%;min-width:2px}
.bar .bseg:last-child{border-radius:0 4px 4px 0}
.bar-value{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.chart-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.chart-tip{position:fixed;z-index:20;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;padding:4px 8px;border-radius:5px;max-width:320px}
.chart-tip[hidden]{display:none}
.people-panel{gap:10px}
@media (max-width:800px){.filters{grid-template-columns:1fr}.charts{grid-template-columns:1fr}}
table.people th{white-space:nowrap}
.filters .cond button{white-space:nowrap}
label.mini{display:grid;gap:2px;font-size:11px;font-weight:500;color:var(--muted)}
label.mini select,label.mini input{width:auto;min-width:6.5em;padding:5px 8px}
.ym{display:flex;gap:4px}
.qual-card-row .row-actions{align-items:flex-end;flex-wrap:wrap}
/* Its fields under the name where the card is narrow, which squeezed the name to a word a line beside them. */
@container (max-width:460px){.qual-card-row{grid-template-columns:minmax(0,1fr)}}
.link-pick{display:grid;gap:4px}
.link-pick input{margin-left:20px;width:calc(100% - 20px)}
/* Ticked, a project's line on how stands beside it, so that a card with several ticked stays a few lines tall; under it where the
   card is too narrow for the line to show (the card's width, not the window's, which tells little of it). */
@container (min-width:460px){.link-pick:has(input){grid-template-columns:fit-content(62%) minmax(8em,1fr);align-items:center}.link-pick:has(input) input{margin-left:0;width:100%}}
/* A link card's projects that nothing says used the skill, folded under one line. */
.link-more summary{cursor:pointer;font-size:13px;padding:2px 0}
.link-more[open] summary{margin-bottom:4px}
/* Confirming the projects not reviewed yet together, above the 経歴書 tab's list. */
.confirm-projects{display:grid;gap:4px}
.confirm-projects p{margin:0}
/* The skill master tab: one short line per skill, its fields under it when opened. */
.master-filters{display:grid;grid-template-columns:minmax(12em,2fr) auto minmax(8em,1fr) auto;gap:8px;align-items:center}
.master-filters .seg button{white-space:nowrap}
table.master{min-width:0}
table.master th,table.master td{padding:3px 10px;vertical-align:middle}
table.master td>button:not(.name-btn){padding:1px 12px}
table.master td .pill{margin-right:2px}
/* What a skill is part of (I1): a select as short as its line, and the parts after the name. The short columns stay on one line,
   so that the name and the code take what wrapping a narrow window needs. */
table.master select.parent-pick{width:auto;max-width:12em;padding:2px 6px}
table.master .name-btn .parts{font-weight:normal}
table.master th,table.master td:nth-child(n+3){white-space:nowrap}
table.master tr.m-more>td{background:var(--bg);padding:8px 12px 10px;border-top:0}
.m-detail{display:grid;gap:8px;max-width:900px}
.m-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px}
.m-detail .actions select{width:auto;max-width:22em}
@media (max-width:800px){.master-filters,.m-fields{grid-template-columns:1fr}}
/* The curator's last scan under the filters, and 変更履歴: each scan, its changes, and folded what it did not apply. */
.scan-line{margin:0}
.master-history{display:grid;gap:14px}
.master-history .scan{display:grid;gap:4px}
.master-history h3{margin:0;font-size:14px}
.master-history .scan>p{margin:0}
ul.changes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.changes>li{border-top:1px solid var(--line);padding-top:6px;display:grid;gap:2px}
.change-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.change-head button{padding:1px 12px}
li.change.undone b{color:var(--muted);text-decoration:line-through}
/* The admin's draft page: its actions in one bar under the summary, kept in view while the page scrolls (#main scrolls). */
.approve-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;background:var(--surface);border:1px solid var(--accent);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.approve-bar textarea{flex:1 1 14em;width:auto;min-width:10em}
.bar-notes{flex-basis:100%;display:grid;gap:2px}
.bar-notes:not(:has(:not(:empty))){display:none}
.new-skills{display:grid;gap:6px}
.new-skills p{margin:0}
.new-skill-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 10px;max-height:40vh;overflow:auto;padding:2px}
.new-skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:7px}
.new-skill>div{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.new-skill select{padding:3px 8px}
.new-skill>.check-words{white-space:normal}
/* A new qualification name: its name to correct across the card, then its category and who else holds it. */
.new-qual>input{grid-column:1/-1;padding:3px 8px}
/* The qualification master: a pending name's 承認, merge target and 統合 on one line, as the skill master's lines are. The page's
   100% made the merge target a line of its own and stacked the three; it is as wide as its names up to a bound, and the three
   never wrap, so that a narrow window scrolls the table in its frame instead. The short columns stay on one line too. */
table.qual-master th,table.qual-master td{vertical-align:middle}
table.qual-master th,table.qual-master td:nth-child(n+2){white-space:nowrap}
table.qual-master td>input,table.qual-master td>select{padding:3px 8px}
table.qual-master .one-line{display:inline-flex;gap:8px;align-items:center}
table.qual-master .one-line select{width:auto;max-width:16em;padding:3px 8px}
table.qual-master .one-line button{padding:2px 12px}
table.master td>.chip{margin-left:6px}
table.draft-skills td>.chip{margin-left:6px}
table.draft-skills tr.look td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* The admin's record of a draft's rounds and their tool calls. */
table.rounds td.num,table.calls td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rounds tr.round td{background:var(--soft)}
table.rounds tr.round-calls>td{padding:0 0 6px 24px;border-top:0}
table.calls{min-width:0}
table.calls th,table.calls td{padding:4px 8px;font-size:12px}
.call-data{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;margin:2px 0 6px;font-size:11.5px}
/* One column as wide as the page: the admin's tabs and the filter buttons over a draft's skill table are max-content wide, and in an
   implicit column they made the page wider than a phone's screen; here they wrap. */
.admin,.draft-page{grid-template-columns:minmax(0,1fr)}
/* The admin's draft page in an update: what differs from the approved version, under the skill table. */
.diff-line{flex-basis:100%;color:var(--muted)}
table.draft-skills tr.changed td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.draft-skills tr.look.changed td:first-child{box-shadow:inset 3px 0 0 var(--accent),inset 6px 0 0 var(--warn)}
table.draft-skills tr.removed td{color:var(--muted)}
table.draft-skills tr.removed .skill-name{text-decoration:line-through}
.update-tables{display:grid;gap:12px}
.update-tables section{display:grid;gap:4px}
table.diff-table{min-width:0;font-size:12px;border:1px solid var(--line)}
table.diff-table th,table.diff-table td{padding:3px 8px;border:1px solid var(--line)}
table.diff-table th{background:var(--soft)}
table.diff-table .use,table.diff-table .field-change{overflow-wrap:anywhere}
table.diff-table td.pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* The AI reviewer (docs/F1-design.md, 5.2): its verdict under each changed row, its line in the approve bar, its state in the 提出 tab. */
/* contain: its reason wraps in the width the row's other content gives, rather than widening the column to one long line. */
.judgement{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;margin-top:2px;font-weight:400;overflow-wrap:anywhere;contain:inline-size}
/* The skill table is at least 560px and scrolls sideways on a phone: its reason stays within the screen. */
table.draft-skills .judgement{max-width:calc(100vw - 100px)}
.verdict.ok{color:var(--muted)}
.verdict.ok b{color:var(--accent)}
.verdict.flag{color:var(--warn)}
.ai-line{flex-basis:100%;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.ai-line .ai-summary{flex-basis:100%;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.6em;overflow:auto}
.ai-state.ok{color:var(--accent)}
.ai-state.flagged,.ai-state.failed{color:var(--warn)}
.ai-state.running{color:var(--muted)}
.auto-line{flex-basis:100%}
.pill.off,.pill.revoked{background:var(--soft);color:var(--muted)}
/* Over the 提出 tab: the setting that lets the reviewer approve alone, with the figures it is decided on. */
.auto-panel{display:grid;gap:4px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.auto-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
/* The person view's versions, under the document and never printed. */
/* As wide as the screen at most: the 経歴書 above keeps its A4 width, and this table scrolls on its own on a phone. */
.file-history{margin-top:16px;display:grid;gap:6px;max-width:calc(100vw - 32px)}
.file-history h3{margin:0}
table.history{min-width:0;font-size:12px}
table.history td{vertical-align:top;overflow-wrap:anywhere}
table.history tr.revoked td{color:var(--muted)}