/* Career notes. The colours, type, buttons, cards, messages, rows and focus come from the MEC look kit (web/kit/, BL-95): this file holds
   only Career's own layout. Never write a colour or a font size here: use the kit's tokens (--text, --brand, --fs-small ...). */
main{max-width:var(--page);margin:0 auto;padding:var(--s-4)}
h1{margin:12px 0 6px;overflow-wrap:anywhere}   /* UX-315: a word longer than the box breaks, never pushes the page sideways (32 px root font) */
#page p,#page .meta,#page li{overflow-wrap:anywhere}
/* a section name in a card or a page ("Work", "Skills"): a group heading - colour and place, never capitals or a smaller size (UX-2, UX-L1) */
h2{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:700;line-height:var(--lh-heading);color:var(--brand-ink);margin:0 0 8px;overflow-wrap:anywhere}
.sub{margin:0 0 14px}
.hidden{display:none !important}
.card{margin:0 0 14px}
label{display:block;font-weight:600;color:var(--text-2);margin:10px 0 4px}
button{font:inherit}
input,select,textarea{display:block;width:100%;min-height:44px;padding:8px 10px;font:inherit;background:var(--surface);color:var(--text);
 border:1px solid var(--edge);border-radius:var(--r-md)}
.linkbtn{background:none;border:0;padding:0 4px;min-height:44px;font:inherit;color:var(--brand-ink);text-decoration:underline;cursor:pointer}
/* the kit's .btn is the filled "next move"; every Career button that is not .primary is the quiet one (a 1 px line) */
.btn:not(.primary){background:transparent;color:var(--text);border-color:var(--text-2)}
.btn:not(.primary):hover{background:var(--text);color:var(--bg)}
.btn.primary:hover{box-shadow:inset 0 0 0 99px var(--press)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.small{min-height:44px}
.msg{display:none}
.msg.show{display:block}
.msg.bad{--msg-c:var(--danger);--msg-tint:var(--danger-tint)}
.hint{margin:10px 0 0;overflow-wrap:anywhere}
#inviteNote{margin:12px 0 0}
#confirmHint:not([hidden]) + #inviteNote{display:none}
.hintlast{display:block;margin-top:8px}
.tap{display:inline-flex;align-items:center;min-height:44px}
/* UX-264: tabs keep 12 px or more between them at every width (they read as one phrase at 4-8 px); on a narrow phone or at Larger text the row wraps and Sign out goes last */
.steps{margin:8px 0 0;padding-left:1.2rem}
.steps li{margin:4px 0}
.fine{border-top:1px solid var(--line);padding-top:10px;margin-top:18px}
h1 + .sub{margin-top:0}
/* the kit draws .rows (lines, and the grouped box in Full); Career's rows hold links, so the link carries the row padding */
.rows li a,.rows li button{display:inline-flex;align-items:center;min-height:44px;column-gap:.5em;text-decoration:none;padding:var(--s-2) var(--k-row-pad)}     /* UX-171: Home's dates keep their space */
.rows li a:hover,.rows li a:focus-visible{text-decoration:underline}
.rows li a .meta{color:var(--text-2)}
h1.meta{font:inherit;margin:12px 0 6px}
.fold,div.fold{margin:0;border:0}   /* Career's fold is a button and a div, not a details: the kit's fold lines are not wanted */
.foldbtn{background:none;border:0;padding:0;min-height:44px;font:600 1rem var(--font-ui);color:var(--text);cursor:pointer;text-align:left}
.foldbody{padding-left:12px}
fieldset{border:0;border-top:1px solid var(--line);margin:0 0 12px;padding:10px 0 0}
fieldset.proofs{min-width:0;border-top:0;border-left:2px solid var(--line);margin:0 0 12px 11px;padding:0 0 0 14px}
fieldset.proofs .hint{margin-top:4px}
legend.proofleg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
fieldset.proofs details summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.choice{display:flex;align-items:center;gap:10px;min-height:44px}
.choice label.inline{flex:1;min-width:0;display:block;padding:10px 0;min-height:44px}   /* UX-158: a block, never a flex row: the rows of a line and the tag stack and wrap at full width */
.choice input{width:22px;height:22px;min-height:0;margin:0}
label.inline{overflow-wrap:anywhere;display:inline;text-transform:none;letter-spacing:0;color:var(--text);margin:0}
.contact{margin-bottom:8px}
textarea{min-height:88px;resize:vertical;line-height:1.45}
select{appearance:auto}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--bg)}
.btn.small.flashbtn{margin-left:6px}
a.small{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.fielderr{color:var(--danger);margin:4px 0 0}
.daterow{display:flex;gap:8px;flex-wrap:wrap}
.daterow > div{flex:1 1 7rem;min-width:0}
fieldset.date{border-top:0;padding-top:0}
.lines li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.lines li > span:not(.num){flex:1 1 14rem;min-width:0}      /* UX-171: it used to match the number too */
.newline{border-top:1px dashed var(--line);padding-top:8px}
.ask{border-left:3px solid var(--line);padding:4px 0 4px 12px;margin-top:8px}
/* + Add: a sheet from the bottom on a phone, a drop-down at 900 px and wider (P-4) */
.addmenu{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);
 border-top:1px solid var(--text);padding:12px 16px 20px;box-shadow:0 -6px 18px var(--shade);max-height:80vh;overflow:auto}
.addmenu .menuhead{display:flex;justify-content:space-between;align-items:center}
.addmenu .menuhead h2{margin:0}
.addmenu .rows a{display:flex;align-items:center;min-height:44px;text-decoration:none}
@media (min-width:900px){.addmenu{position:absolute;left:auto;right:0;bottom:auto;top:100%;width:24rem;
 border:1px solid var(--text);box-shadow:0 6px 18px var(--shade)}}
/* UX-25: a door is a full-width 44 px row */
a.door{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;width:100%;
 padding:0 2px;border-top:1px solid var(--line);text-decoration:none;color:var(--brand-ink)}
.claudelist{list-style:none;margin:0;padding:0}   /* UX-207: Home's one card: a two-line door per row */
.doorstack{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;padding:6px 0}
/* UX-22: a line shows its number; UX-24: Up and Down side by side, under the line */
.num{font-weight:600;color:var(--text-2);min-width:1.6em;flex:0 0 auto}
.foot{border-top:1px solid var(--line);margin-top:28px;padding:4px 0}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)}
.foot a[aria-current="page"]{font-weight:700}
.lines li .updown{flex:1 1 100%;display:flex;gap:10px}
.newskill{margin-top:10px}
/* piece 2: the import (#/import, #/check/<id>) */
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.linkbtn{min-width:44px}
/* UX-41: the browser's file box prints the file's NAME - hidden from sight, still in the tab
   order; its label is the button, and the ring shows on the label when the box has the focus */
.filepick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.pickbox{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
label.btn{display:inline-flex;align-items:center;margin:0;font-weight:600;text-transform:none;
 letter-spacing:0;color:var(--text)}
label.btn:hover{color:var(--bg)}
.filepick:focus-within label.btn{outline:2px solid var(--brand-ink);outline-offset:2px}
.filepick .meta{margin:0}
/* UX-47: "Do you still work here?" is a question, not a small caps label */
legend.question{font:600 1rem/1.4 var(--font-ui);letter-spacing:0;text-transform:none}
.msg p{margin:0}
.cardname{margin:4px 0 0;font-size:1.05rem}
.importline{border-bottom:1px solid var(--line);padding:4px 0 8px}
.importline .choice{align-items:flex-start;padding-top:10px}
.importline .choice input{margin-top:2px;flex:0 0 auto}
.importline .hint{margin:2px 0 0 32px}
.cardrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cardrow > span{flex:1 1 12rem}
/* piece 3 T5: the Applications list, the job post page */
a.btn.wide{display:flex;justify-content:center;box-sizing:border-box;width:100%;margin:8px 0 12px}
.rows li a.approw{flex-direction:column;align-items:flex-start;justify-content:center;width:100%}
.posttext{height:9rem;resize:vertical;overflow:auto}
.dup{margin-top:10px}
input[type="search"]{appearance:none}
.stagecounts{margin:4px 0 10px;color:var(--text-2)}
@media (min-width:900px){
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 20px;align-items:start}
}
/* piece 3 T6: one application's page */
.headrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.headrow h1,.headrow .paneltitle{flex:1 1 12rem;margin:0}
/* UX-216: the split panel's title is an h2 that looks like the h1 it replaces */
.paneltitle{font:600 1.9rem/1.15 var(--font-display);letter-spacing:normal;text-transform:none;margin:12px 0 6px}
.paneltitle + .sub{margin-top:0}
.postbody{white-space:pre-wrap;overflow-wrap:anywhere}
.dayrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 12px;margin:8px 0}
.dayrow > div{flex:0 1 12rem}
.history{margin-top:4px}
button.btn.wide{display:flex;justify-content:center;box-sizing:border-box;width:100%;margin:8px 0 12px}
.linkline a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere;word-break:break-all}
/* piece 4 T5: the RESUME block on an application's page, and the line under [I applied] */
.willrecord{margin:0 0 12px}
.willrecord .hint{margin:0}
.picker{margin:8px 0 12px}
.copytext{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:8px 0;font:inherit}
/* piece 4 T6a: the resume page. One column on a phone; two at 900 px, by CSS only (no hover, no script). */
.resstatus{margin:0 0 4px;font-weight:600}
.reshead .btn.wide{margin:8px 0 4px}
.btn[aria-disabled="true"]{opacity:.55;cursor:wait}
.resjob{min-width:0;margin:0 0 14px}
.resjob legend{overflow-wrap:anywhere;max-width:100%;font:700 1rem/1.35 var(--font-ui);letter-spacing:0;text-transform:none}
.resjob .choice{align-items:flex-start;padding:4px 0}
.resjob .choice input{margin-top:11px;flex:0 0 auto}
.resjob .choice label.inline{overflow-wrap:anywhere;text-transform:none;letter-spacing:0;color:var(--text);margin:0}
.resjob .cardrow a.btn{display:inline-flex;align-items:center;text-decoration:none}
.newtag{color:var(--muted);display:inline-block;max-width:100%;overflow-wrap:anywhere;vertical-align:baseline;line-height:inherit}   /* UX-293: stays one piece while it fits (inline-block); wraps only when longer than the line (French) */
.jobnote{margin:2px 0 0}
.textleg{display:none}
@media (min-width:900px){
  /* UX-170b: the head stays on top; the lines (work) and the paper (context) sit in .zones, two columns from 900 px */
  .rescols .zones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 28px;align-items:stretch}
  .rescols{--bar:130px}
  .rescols .restext{position:sticky;top:calc(var(--bar) + 12px);max-height:calc(100vh - var(--bar) - 24px);overflow:auto}
  .restext .textleg{display:block}
  .restext .textfold > .foldbtn{display:none}
  .restext .textfold > .foldbody[hidden]{display:block !important}
  .restext .foldbody{padding-left:0}
}
/* piece 5 T10: Claude's part of the RESUME block. Quiet: no icon, no red. Rows stack at 360 px. */
.tailor{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);min-width:0}
.tailor p{overflow-wrap:anywhere}
.tailorsees{margin:0 0 6px}
.tailoractions{flex-direction:column;align-items:flex-start;gap:8px}
.tailorbuild{min-width:0}
.tailorbuild .hint{margin:2px 0 0}
.tailor a.btn{display:inline-flex;align-items:center;text-decoration:none}
.previewjob{margin:0 0 8px}
.previewhead{margin:6px 0 2px;font-weight:600}
.previewlines{margin:0;padding-left:18px;overflow-wrap:anywhere}
@media (min-width:900px){
  .tailoractions{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}
/* piece 5 T11a: the check page of a reword (S-16). One column on a phone, the post a fold; two columns at 900 px, by CSS width only
   (no hover, no script): the post is the sticky right column with its own scroll. Quiet: no icon, no red. Everything wraps. */
.chkhead h1,.chkhead p{overflow-wrap:anywhere}
.notkept{margin:6px 0;font-weight:600;letter-spacing:.02em}
.dneeds{margin:6px 0}
.dneeds .btn{margin-left:6px;vertical-align:middle}
.chkkeep{margin-top:10px}
.chkend{margin:4px 0 14px}
.dljob{min-width:0}
.dline{padding:6px 0;border-top:1px solid var(--line);min-width:0}
.dline:focus{outline:2px solid var(--text);outline-offset:2px}
.dlabelrow{display:block;min-width:0;overflow-wrap:anywhere}
.drow{display:block;margin:0 0 4px;overflow-wrap:anywhere}
.dlabel{display:block;color:var(--text-2);letter-spacing:.02em}
.dtext{display:block;overflow-wrap:anywhere}
.dtext strong{font-weight:700}
.dtext s{text-decoration:line-through}
.dleft{min-width:0}
.dlbtns{margin-top:4px;gap:8px}
.postleg{display:none}
/* UX-204 / SA-553 (W3-3): a line with BOTH texts is two cells, Claude's words | Your words, decided by the width of the lines box
   (a CONTAINER query, never the viewport). No container-query support = the stacked rows above. The DOM order is the visual order. */
.chklines{container-type:inline-size}
.dtwo{min-width:0}
@container (min-width:38rem){
  .choice label.dlabelrow.dtwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
  .dtwo > .drow{min-width:0;margin:0}
  .dtwo > .drow[data-row="check"]{grid-column:1 / -1;margin-top:4px}
}
/* UX-205 / SA-555: the bar is ONE node. In flow (as the old top row was) under 1,200 px; sticky from there. */
.chkbar{min-width:0}
.chkbar p,.chkbar .msg{overflow-wrap:anywhere}
@media (min-width:900px) and (max-width:1199px){
  body:has(.chkcols) #page{max-width:none}   /* the page column is what is left of the rail */
  .chkcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 28px;align-items:start}
  .chkcols .chkhead,.chkcols .chkbar{grid-column:1 / -1}
  .chkcols .chkpost{grid-column:2;grid-row:3 / span 2;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
  .chkcols .chklines{grid-column:1;grid-row:3}
  .postleg{display:block}
  .chkpost .postfold > .foldbtn{display:none}
  .chkpost .postfold > .foldbody[hidden]{display:block !important}
  .chkpost .foldbody{padding-left:0}
}
/* 1,200-1,499 px: the lines use the whole page; the post is the fold "See the post" ABOVE them (the DOM order). The bar sticks. */
@media (min-width:1200px){
  /* N8-S5: on the split page the chosen copy's own black button is the one; the list's Paste turns plain */
  .splitwrap:has(> :nth-child(2) .btn.primary) > :first-child .btn.primary{background:transparent;color:var(--text);border-color:var(--text-2)}
  html:has(.chkbar){--chkbar:6rem;scroll-padding-top:calc(var(--chkbar) + 12px)}
  .chkbar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 0;
    max-height:var(--chkbar);overflow:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
  .chkbar .chkkeepbox{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
  .chkbar .chkkeep{margin-top:0;gap:16px}
  .chkbar .chkkeep .btn:not(.primary){margin-left:8px}
  .chkbar .dneeds{margin:0}
  .chkbar .msg{flex:1 0 100%}
  .chkcols > .chklines > .chkend{display:none}
  .chkcols .chkpost{margin-bottom:8px}
}
/* from 1,500 px: the post is a right column again, a fixed 26rem; main grows to 100rem on this page only, so the lines keep ~47rem */
@media (min-width:1500px){
  .chkcols{display:grid;grid-template-columns:minmax(0,1fr) 26rem;gap:0 28px;align-items:start}
  .chkcols .chkhead,.chkcols .chkbar{grid-column:1 / -1}
  .chkcols .chkpost{grid-column:2;grid-row:3;position:sticky;top:calc(var(--chkbar) + 12px);max-height:calc(100vh - var(--chkbar) - 24px);overflow:auto;margin-bottom:0}
  .chkcols .chklines{grid-column:1;grid-row:3}
  .postleg{display:block}
  .chkpost .postfold > .foldbtn{display:none}
  .chkpost .postfold > .foldbody[hidden]{display:block !important}
  .chkpost .foldbody{padding-left:0}
}

/* the preview (UX-168). The paper scales by container units: never an inline style (CSP style-src 'self'). */
.paperbox{container-type:inline-size;background:var(--surface-2);padding:12px}
.paperbox .paper{width:100%;font-size:1.716cqi;padding:7.06cqi 7.65cqi;box-shadow:0 1px 3px var(--shade),0 6px 18px var(--shade-soft)}
.viewbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
#sent-withheld,#sent-changed,#sent-order{margin:10px 0 14px}
/* EL-42: Career's own toggles are button.seg - NOT the kit's div.seg (role=group) in the picker, which the kit styles itself (UX-271) */
button.seg,.pw-look button{min-height:44px;min-width:44px;padding:4px 12px;font:inherit;border:1px solid var(--text);background:transparent;color:var(--text);cursor:pointer}
/* UX-186: a selected toggle is outlined, ticked and bold - never filled black (the black button is the page's ONE next move) */
.pw-look button[aria-pressed="true"],button[aria-pressed="true"]{border:2px solid var(--text);font-weight:700;background:transparent;color:var(--text)}
/* UX-T1: the tick is in the button text (UX-179); no CSS ::before tick here, or it shows twice */
.pw-look,.pw-group{display:flex;flex-wrap:wrap;gap:8px}
.reslines>.hint:first-child{margin-bottom:12px}
.resacts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* UX-292: the "Resume language" row. The label wraps over its buttons at 320 px; the hint (aria-describedby of the group) takes its own line. No nowrap. */
.langbox{margin:8px 0}
.langrow{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.langrow .langlabel{font-weight:600}
.langrow .hint{flex:1 0 100%;margin:0}
.langbox>.hint{margin:4px 0 0}
.rescols .reshead .langbox{flex:1 0 100%}
.resacts .btn.wide{margin:8px 0 4px}
@media (min-width:900px){
  html:has(.rescols){scroll-padding-top:min(230px,50vh)}   /* SA-748 (WCAG 2.4.11): a box reached by Tab clears the sticky head (up to 220 px with the language row) */
  .rescols .reshead{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding-bottom:8px}
  .rescols .resacts .btn.wide{display:inline-flex;width:auto;margin:0}
  .rescols .reshead{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px}
  .rescols .reshead h1{font-size:1.4rem;margin:4px 0}
  .rescols .reshead p{margin:0}
  .rescols .reshead .resacts{flex:1 0 100%;margin:4px 0 0}
}

/* UX-170b (SA-509): the two zones. One column below 1,100 px, in the DOM order (work, then context). */
.zones{min-width:0}
.zone-work,.zone-ctx{min-width:0}
.zone-work:empty,.zone-ctx:empty{display:none}
@media (min-width:1100px){
  .zones{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .zones:has(> .zone-work:empty),.zones:has(> .zone-ctx:empty){grid-template-columns:minmax(0,1fr)}
  .rescols .zones{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}
}

/* UX wave 2, T3 (UX-172): the stage row - [the main step] [More v] - and the folded controls under it */
.steprow{flex-wrap:wrap;align-items:stretch}   /* UX-293: [More v] goes under the main step only when the two cannot share a line (French, 200% zoom) */
.steprow .stepmain{flex:1 1 8rem}
.morepanel{margin-top:8px}
.morepanel[hidden]{display:none}
/* T4 (PM-10): the hint under the guessed boxes */
.guesshint[hidden]{display:none}

/* UX wave 2, T5 (UX-175): two columns of fields on a laptop. The DOM order is the reading order (Tab = reading order). */
.postleft,.postright,.postgrid{min-width:0}
@media (min-width:1100px){
  .form2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}
  .form2 > fieldset,.form2 > p,.form2 > .choice,.form2 > .actions,.form2 > .msg{grid-column:1 / -1;min-width:0}
  .form2 > fieldset.date{grid-column:auto}
  .zone-ctx .form2{grid-template-columns:minmax(0,1fr)}   /* the narrow side column keeps one */
  .postgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .postgrid > .dup,.postgrid > .actions,.postgrid > .msg{grid-column:1 / -1}
  .postgrid .posttext{height:16rem}
}

/* UX wave 2 fix wave */
/* UX-190: Started / Ended read as the other labels, with a gap above */
fieldset.date{margin-top:1rem}
fieldset.date legend{font-weight:400;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--text-2)}
/* UX-191: air under the three header buttons of the resume page */
.resacts{margin-bottom:1rem}
/* UX-192: the Build line stays under its own button; the next button has room */
.tailorbuild{margin-bottom:8px}
/* PM-33: a guessed box is tinted AND has a bold border (it reads in grey), and its label says so in words */
input.guessed{border:2px solid var(--text);background:color-mix(in srgb, var(--brand-ink) 12%, var(--surface))}
/* SA-547: an empty status hint takes no room (the element stays in the DOM with role=status) */
.guesshint:has(> span:empty){margin:0}



/* W3-4 (UX-201, UX-203; SA-554): from 1,200 px #/applications and #/application/<id> are ONE page - a list (19rem, sticky, its own scroll,
   at most the window's height) and a ONE-column panel. app.js sets .split on the wrapper from the SAME width (SPLIT_QUERY);
   check-screen compares the two. main stays 80rem (the sidebar rule). No animation. The status line is for a screen reader only. */
.srstatus{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:1200px){
  #page:has(.splitwrap){max-width:80rem}
  .splitwrap.split{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:0 28px;align-items:start}
  .split .applist{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;min-width:0;padding:0 4px 0 0}
  .split .listmsg{position:sticky;top:0;z-index:1;background:var(--bg)}   /* UX-210: the refusal line stays in view when the list is scrolled */
  .split .listmsg:empty{display:none}
  .split .apppanel{min-width:0;scroll-margin-top:16px}   /* UX-217: scrolled into view, the first line is not flush with the window top */
  .split .apppanel:focus{outline:none}
  .split .applist .cols{display:block}
  .split .applist .card{margin:0 0 10px}
  .split .zones{display:block}
  .split .zones > .zone-ctx{margin-top:8px}
  .split .applist a.approw span{overflow-wrap:anywhere}
  .split .applist .rows li a.approw{border-left:3px solid transparent;padding-left:8px}
  .split .applist .rows li a.approw[aria-current="true"]{border-left-color:var(--text);font-weight:700}
  .split .applist .rows li a.approw[aria-current="true"] .meta{font-weight:400}
}

/* Piece 6 (P6-2, UX-228): "Name on your resume" right under the action bar (the top of the work column on a laptop). Screen only: the resume page is never the printed page. */
.nameblock{box-sizing:border-box;max-width:34rem;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line)}
.nameblock .nb-title{font-size:1rem;margin:0 0 6px}
.nameblock .nb-name{margin:6px 0;font-size:1.15rem;font-weight:600;overflow-wrap:anywhere}
.nameblock .nb-wait{margin:6px 0}
.nameblock .nb-acts{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
.nameblock .nb-acts .btn{min-height:44px}
.nameblock .nb-note{margin:10px 0 0}
.nameblock .nb-title{overflow-wrap:anywhere}
.nameblock .nb-prof{margin-top:10px}
.nameblock .nb-acts .linkbtn,.nameblock .nb-edit .linkbtn{min-height:44px}
.nameedit label{display:block;margin:0 0 4px;font-weight:600}
.nameedit .ne-in{box-sizing:border-box;width:100%;max-width:28rem}
.nameedit .ne-acts{margin-top:10px}
.nameedit .msg{overflow-wrap:anywhere}
.namefield{margin:0 0 14px}
.namefield .ne-in,.namefield input{box-sizing:border-box;width:100%;max-width:28rem}
.nameonfile{box-sizing:border-box;max-width:34rem;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line)}
.nameonfile .nameline{margin:0;overflow-wrap:anywhere}
.nameonfile .nameline .btn{margin-left:4px}
@media print{.nameblock,.nameonfile{display:none}}
.look-pick{display:flex;justify-content:flex-end;margin-bottom:4px}   /* kit piece 2: the "Aa" picker */
@media print{.look-pick{display:none}}
/* UX-236, UX-240 (My history): the "No dates yet" heading and the "Saved" word beside a row */
.card h3.undated{font-weight:600;margin:14px 0 2px;color:var(--text-2)}   /* UX-d: quieter than the section name (WORK) */
.savedtag{color:var(--text-2);font-weight:600;margin-left:.25em}

/* BL-95: Appearance (js/appearance.js). A Back link at the top of the page, a quiet sample in the reading face. */
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-ink)}
.back::before{content:"";flex:none;width:.55em;height:.55em;margin-right:.55em;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
#lookView{padding-bottom:var(--s-5)}
.foot a + a,.foot .tellus{margin-left:var(--s-4)}
.foot .tellus{display:inline-flex;align-items:center;color:var(--text-2);text-decoration:underline}
fieldset.look{border-top:0;padding-top:0}
fieldset.look .choice label.inline b,fieldset.look .choice label.inline .meta{display:block}

/* BL-93 slice A (UX design 3-10): a project's six slots. A phone shows an empty slot as ONE 44 px row; from 1,100 px (today's zones())
   it shows the question in grey and "+ a line". Both are in the page; CSS shows one. */
.slot{margin:0 0 6px}
.slot .lines{margin:0 0 8px}
.slotfold{margin:0}
.slotrow{display:flex;align-items:flex-start;gap:6px;width:100%;min-height:44px;padding:10px 0;background:none;border:0;border-top:1px solid var(--line);
  font:inherit;font-weight:400;color:var(--text);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.slotname{font-weight:700;color:var(--brand-ink);flex:0 0 auto;max-width:45%;overflow-wrap:break-word}   /* UX-293: no nowrap; whole while short ("4 Ship" never splits), wraps by words only past 45% of the row (French) */
.slotask{color:var(--text-2);flex-shrink:1000}
.slotq{margin:0 0 8px;color:var(--text-2);overflow-wrap:anywhere}
.slotwide{display:none}
.promise{display:none}
/* UX-285: under 1,100 px an empty folded slot is a bare 44 px row in one quiet list: no card border, padding or margin, one thin line between rows */
@media (max-width:1099px){
  .slot.slotempty{border:0;border-radius:0;box-shadow:none;background:none;padding:0;margin:0}
  .slot.slotempty .slotrow{border-top:0}
  .slot.slotempty + .slot.slotempty .slotrow{border-top:1px solid var(--line)}
}
@media (min-width:1100px){
  .slotphone{display:none}
  .slotwide{display:block}
  .promise{display:block}
}
/* the mark: a bordered word, never colour alone (3:1 border) */
.onlyyou{display:inline-block;border:1px solid var(--text-2);border-radius:var(--r-md);padding:0 8px;font-size:var(--fs-small);line-height:1.6;color:var(--text);max-width:100%;overflow-wrap:anywhere}   /* UX-293: was nowrap; inline-block keeps it in one piece while it fits */
.tickrow .hint{margin:0 0 8px 32px}
.lineedit{flex:1 1 100%;min-width:0}
.stepof{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}   /* UX-315: label and picker stack when the text size is huge */
.stepof label{margin:0;flex:0 0 auto}
.stepof select{width:auto;flex:1 1 10rem;min-width:0;max-width:min(20rem,100%)}
.fromhint{margin:0 0 4px 32px}
/* Ctrl+P of the project page: the print view is the page; the screen part is hidden, and the print view holds no private line */
.printview{display:none}
@media print{
  .fromhint{display:none}
  body:has(.printview) #bar,body:has(.printview) #foot,body:has(.printview) #rail,body:has(.printview) #crumb,body:has(.printview) #bottombar{display:none}
  #page > :not(.printview){display:none !important}
  .printview{display:block}
  .printview h1{margin:0 0 6pt}
  .printview .printnote{margin-top:18pt;font-size:9pt}
}
.slot .lines li > span:not(.num),#other-lines .lines li > span:not(.num){flex:1 1 8rem}   /* the Change button stays beside the words on a phone */

/* BL-101: Home's Next step card (and its "Hidden for 14 days." line). Buttons wrap, never an ellipsis, no fixed height; under 360 px they stack. */
.nextstep .meta{margin:0 0 6px}
.nextstep p{margin:0 0 8px;overflow-wrap:anywhere}   /* QA: a company or role that is one long word wraps inside the card (AC-18) */
.nextstep .actions{margin:8px 0 0;gap:8px}
.nextstep .actions .btn{flex:0 1 auto;max-width:100%;white-space:normal;height:auto}
.nextstep .after{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.nextstep .after .more{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;margin:0 0 0 auto;color:var(--text-2);text-decoration:underline}   /* UX-305: a quiet link, 44 px high, 8 px from Not now */
.nextstep .after .btn{flex:0 1 auto;white-space:normal;height:auto}
.nextstep h2:focus{outline:2px solid var(--brand-ink);outline-offset:2px}
@media (max-width:359px){ .nextstep .actions .btn,.nextstep .after .btn{flex:1 1 100%} .nextstep .after .more{flex:1 1 100%;margin:0} }
.notnow-status{margin:0 0 14px}
.notnow-status p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media print{.nextstep,.notnow-live{display:none !important}}   /* the card, the status line and Not now never reach the paper */

/* SA-769: the sign-up screen (js/signup.js) and the terms page. Kit tokens only. A flagged box has a thicker line AND words under it (never colour alone). */
input[type="checkbox"]{flex:none;width:1.5rem;min-height:0;height:1.5rem;margin:0;accent-color:var(--brand-ink)}
.tick{display:flex;align-items:center;gap:10px;min-height:44px;margin:14px 0 0;color:var(--text);font-weight:400}
input.short{width:7rem;max-width:100%}
input[aria-invalid="true"]{border-color:var(--danger);border-width:2px}
.fielderr{margin:4px 0 0;overflow-wrap:anywhere}
.fielderr[hidden]{display:none}
.status{margin:10px 0 0;color:var(--text);overflow-wrap:anywhere}
#signupView p,#signupView .typed{overflow-wrap:anywhere}
#signupView h1[tabindex="-1"]:focus{outline:none}   /* the heading takes the focus so a screen reader starts there; a ring on a heading is noise */

/* N8-S5 (LK-34): the shell. The topbar, rail, bottom bar, crumb and footer are the kit's (mec-base.css); this is Career's own gaps only. */
body:has(#appView:not(.hidden)) main.outer{display:none}      /* the sign-in wrapper; the signed-in page has its own main (#page) */
body:has(#appView:not(.hidden)) .look-pick{display:none}      /* the signed-in topbar holds the picker */
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:8px;z-index:30}
.skip:focus{left:8px;top:8px}
#bar .name{font:600 1.1rem var(--font-display)}
#bar .barnav{position:relative;display:flex;align-items:center;gap:var(--s-3)}
#bar .quiet{color:var(--text-2)}
.outwide{display:none}
#page{max-width:48rem;margin:0;padding:var(--s-4)}
#page:has(.cols,.rescols,.chkcols){max-width:80rem}
.rail-main{min-width:0;padding:0 var(--s-4)}
#crumb{padding:var(--s-3) var(--s-4) 0}
#crumb:empty{display:none}
#crumb .mec-crumb-list{display:none}
#crumb .mec-crumb-back{display:inline-flex}
.keysline{display:none;margin:0;padding:8px 12px;line-height:1.4;color:var(--muted)}
@media (min-width:900px){
  .outwide{display:inline-flex}
  #crumb .mec-crumb-list{display:flex}
  #crumb .mec-crumb-back{display:none}
  .keysline{display:block}
  [data-rail="folded"] .keysline{display:none}
  [data-rail="folded"] .rail .mec-recents{display:none}   /* UX-327: RECENTS shows names; a folded rail has no room for them */
  .shell-rail .rail{position:sticky;top:var(--topbar-h,3.5rem);align-self:start;height:calc(100vh - var(--topbar-h,3.5rem));overflow-y:auto}
  .shell-rail .rail > *{flex-shrink:0}   /* a short window scrolls the rail; it never squeezes the Fold button below 44 px */
}
@media (max-width:899px){#crumb .mec-crumb-root{display:none}
 /* UX-333: the open Add sheet sits above the bottom bar, and ends where the bar starts */
 #bar:has(#addMenu:not([hidden])){z-index:25;transform:none;transition:none}
 .addmenu{bottom:calc(var(--bar-h) + var(--safe-b));max-height:calc(80vh - var(--bar-h) - var(--safe-b))}}
@media (min-width:1500px){#page:has(.chkcols){max-width:100rem}}
.foot p{margin:var(--s-2) 0}
/* N8-S5: long words in the topbar wrap instead of pushing the page sideways */
#bar{flex-wrap:wrap;max-width:100%}
#bar .barnav{flex-wrap:wrap;min-width:0;max-width:100%}
#bar .mec-pick-btn{max-width:100%;white-space:normal}