/* Lingua Beauty portal.
   Palette and type locked to LB_Brand_Identity.md (3 July 2026): warm parchment
   base, one glazed stone accent. No AICO rose anywhere on this site. */

:root{
  --paper:#f1e9db;
  --sand:#e9dfcc;
  --clay:#d9cdb6;
  --stone:#b3a68e;
  --card:#fbf8f1;

  --ink:#28241f;
  --body:#59524a;
  --muted:#8a8177;

  --accent:#8195ab;
  --accent-deep:#5a6b80;
  --accent-pastel:#b3c1d1;
  --accent-soft:#e7ecf2;
  /* WU BUILD block 1: the two status colours. Done is green, now is the Lingua
     blue-grey, to come is the line colour, --clay. */
  --done:#4E8A6A;
  --now:#5A6B80;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:'Inter',system-ui,sans-serif; font-weight:300; font-size:15px; line-height:1.6;
}
a{color:var(--accent-deep)}

/* ---- shell ---- */
.wrap{max-width:1040px; margin:0 auto; padding:34px 26px 90px}

.topbar{
  background:var(--card); border-bottom:1px solid var(--clay);
  padding:14px 26px; display:flex; align-items:center; gap:26px;
}
.mark{
  font-family:'Josefin Sans',sans-serif; font-weight:300; text-transform:uppercase;
  letter-spacing:.3em; font-size:13px; line-height:1.15; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.topbar nav{display:flex; gap:20px; margin-left:8px; flex-wrap:wrap}
.topbar nav a{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding:5px 0; border-bottom:2px solid transparent;
}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.on{color:var(--accent-deep); border-bottom-color:var(--accent-deep)}
.topbar .who{margin-left:auto; display:flex; align-items:center; gap:14px}
.topbar .who span{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--muted)}

/* ---- type ---- */
h1{
  font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:38px;
  line-height:1.12; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em;
}
h2{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:19px; color:var(--ink); margin:0; text-transform:uppercase; letter-spacing:.12em}
.eyebrow{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.sub{font-size:13px; color:var(--muted); margin-top:4px}
.small{font-size:13px}
.muted{color:var(--muted)}
/* The website's signature move: key words on a soft accent block. */
.mark-block{background:var(--accent-soft); padding:1px 7px; border-radius:3px; color:var(--ink)}

.pagehead{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:30px}

/* ---- surfaces ---- */
.panel{
  background:var(--card); border:1px solid var(--clay); border-radius:12px;
  padding:22px 24px; margin-bottom:16px;
}
.band{background:var(--sand); border-radius:12px; padding:20px 24px; margin-bottom:22px}

/* ---- buttons ---- */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px;
  background:var(--accent-deep); color:#fff; border:1px solid var(--accent-deep);
}
.btn:hover{background:var(--accent)}
/* WU BUILD block 1, 9 September 2026: three looks only. go = green filled, "do
   this". on = blue-grey filled, "carry on". no = grey outline. The older names
   (review, ink, ghost) map onto them so nothing already on a page breaks. */
.btn{letter-spacing:.1em}
.btn.go, .btn.review{background:var(--done); border-color:var(--done); color:var(--paper)}
.btn.go:hover, .btn.review:hover{background:#447a5e; border-color:#447a5e; color:var(--paper)}
.btn.on, .btn.ink{background:var(--now); border-color:var(--now); color:var(--paper)}
.btn.on:hover, .btn.ink:hover{background:var(--accent); border-color:var(--accent)}
.btn.no, .btn.ghost{background:transparent; color:var(--now); border-color:var(--clay)}
.btn.no:hover, .btn.ghost:hover{background:var(--accent-soft); border-color:var(--accent-pastel)}
.btnrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btnrow .btn{min-width:96px; text-align:center}
.btnrow form{margin:0}
.btn.small{padding:6px 12px; font-size:10px}
.btn.danger{color:#8c4a4a; border-color:#e0cccc}
.btn.danger:hover{background:#f6eaea}

/* ---- forms ---- */
label{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--clay); border-radius:8px;
  background:#fff; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:82px; resize:vertical}
.formrow{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.formrow.three{grid-template-columns:1fr 1fr 1fr}
.field{margin-bottom:14px}
.hint{font-size:12px; color:var(--muted); margin-top:5px}

/* Services as tick chips rather than a multi select, which nobody enjoys. */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{
  display:inline-flex; align-items:center; gap:7px; margin:0; cursor:pointer;
  border:1px solid var(--clay); border-radius:999px; padding:7px 13px;
  background:#fff; color:var(--body); text-transform:none; letter-spacing:.02em;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:400;
}
.chips input{accent-color:var(--accent-deep); margin:0}
.chips label:has(input:checked){background:var(--accent-soft); border-color:var(--accent-pastel); color:var(--ink)}

/* ---- language pairs ---- */
.pair{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-soft); border:1px solid var(--accent-pastel);
  border-radius:999px; padding:5px 12px; margin:0 6px 6px 0;
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:500; color:var(--accent-deep);
}
.pair form{display:inline}
.pair button{
  background:none; border:none; cursor:pointer; color:var(--accent-deep);
  font-size:14px; line-height:1; padding:0 0 0 2px; opacity:.55;
}
.pair button:hover{opacity:1}
.pairadd{display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center; max-width:520px}
.pairadd .arrow{color:var(--muted); font-size:13px}

/* ---- the translator list ---- */
.trow{
  display:grid; grid-template-columns:1.4fr 2fr .8fr auto; gap:16px; align-items:center;
  padding:15px 20px; border:1px solid var(--clay); border-radius:12px;
  background:var(--card); margin-bottom:10px;
}
.trow .nm{font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:16px; color:var(--ink)}
.trow .em{font-size:12px; color:var(--muted)}
.trow .rate{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--ink)}
.trow.off{opacity:.5}

.tag{
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:3px 9px; border-radius:999px; background:var(--sand); color:var(--body);
}
.tag.ok{background:var(--accent-soft); color:var(--accent-deep)}
.tag.warn{background:#f6ebdd; color:#8a6a3e}
/* Anna, 10 September 2026: TRIAL PENDING, blue-grey, first in every picker. */
.tag.trial{background:#e3e8ee; color:var(--now)}

/* ---- careers: two steps, one screen each ---- */
.steps{padding:26px 28px}
.stepbar{display:flex; align-items:center; gap:9px; margin-bottom:22px}
.stepbar .dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
  background:var(--sand); color:var(--muted); border:1px solid var(--clay);
}
.stepbar .dot.on{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep)}
.stepbar .dot.done{background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-pastel)}
.stepbar .line{flex:0 0 42px; height:1px; background:var(--clay)}
.stepbar .line.on{background:var(--accent-pastel)}
.stepbar .steplabel{
  margin-left:6px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.stepnav{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:24px}

/* A screening question. One per block so nothing is answered by accident. */
.qblock{border-top:1px solid var(--clay); padding-top:18px; margin-top:18px}
.qblock:first-of-type{border-top:none; padding-top:0; margin-top:0}
.qnum{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px;
}
.qtext{color:var(--ink); font-size:15px; margin-bottom:12px}
.qopts{display:flex; flex-direction:column; gap:8px}
.qopts label{
  display:flex; align-items:center; gap:10px; margin:0; cursor:pointer;
  border:1px solid var(--clay); border-radius:9px; padding:11px 14px; background:#fff;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--body);
}
.qopts label:hover{border-color:var(--accent-pastel)}
.qopts input{accent-color:var(--accent-deep); margin:0}
.qopts label:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}

/* ---- applications list ---- */
.arow{
  display:grid; grid-template-columns:1.3fr 1fr 1.6fr auto; gap:16px; align-items:center;
  padding:15px 20px; border:1px solid var(--clay); border-radius:12px;
  background:var(--card); margin-bottom:10px;
}
.arow.no{opacity:.62}
.arow .ans{font-size:12px; color:var(--muted); line-height:1.5}

/* ---- jobs list ---- */
.jobhead, .jobrow{
  display:grid; grid-template-columns:70px 1.7fr 1.1fr 110px 80px 1.1fr 150px;
  gap:14px; align-items:center;
}
.jobhead{
  padding:0 20px 8px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.jobrow{
  padding:14px 20px; border:1px solid var(--clay); border-radius:12px;
  background:var(--card); margin-bottom:9px; text-decoration:none; color:var(--body);
}
.jobrow:hover{border-color:var(--accent-pastel); background:#fff}
.jobrow.late{border-left:3px solid #d8a05a}
.jobrow .ref{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--muted)}
.jobrow b{color:var(--ink); font-weight:500; display:block}
.jobrow .ttl{font-size:12px; color:var(--muted); display:block; margin-top:1px}
.jobrow .pair{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--accent-deep)}
.latetext{color:#8c5a3c}

/* ---- the money band on a job ---- */
.moneyband .bignum{
  font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:30px; color:var(--ink);
  line-height:1.1;
}
.moneyband .bignum span{font-size:14px; color:var(--muted); font-weight:400}
.moneyband .calc{margin-top:6px; font-size:14px}
.moneyband .calc b{color:var(--ink); font-weight:500}
/* The translator's version: one sentence, no big number above it, because on
   their page the sentence IS the answer. */
.moneyband .calcline{font-size:17px; color:var(--body)}
.moneyband .calcline b{
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:20px; color:var(--ink);
}

/* ---- the translator's job, quiet by default ---- */

/* The whole job in one line. Wraps as whole facts, never mid-fact. */
.oneline{line-height:1.9}
.oneline .due{white-space:nowrap}

/* A deadline says nothing by colour until it is worth saying. Amber inside 48
   hours, brick red once it has gone by, otherwise no colour at all. */
.due.soon{color:#836237; font-weight:400}
.due.past{color:#a3402f; font-weight:400}

/* The only loud thing on the page. Amber sits in the warm parchment base, so it
   reads as a raised voice rather than an alarm, and never as AICO rose. */
.watchbox{
  background:#f8f0e4; border:1px solid #e2d2ba; border-left:4px solid #b07c36;
  border-radius:12px; padding:18px 22px; margin-bottom:22px;
}
.watchbox h2{color:#7a5c30; margin:0}
.watchbox p{margin:10px 0 0; color:#5c4a33}
.watchtags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.otag.watch{background:#e8d3ac; color:#6b5027}

/* The sentence that makes the amber box mean something: on most jobs this is all
   they see, and it tells them to carry on exactly as normal. */
.nothingunusual{
  color:var(--muted); font-size:14px; margin:0 0 22px; padding-left:2px;
}

/* Standing customer notes. A plain list, deliberately not a box: it is
   background that is always true, not a warning about today. */
.housenotes{margin:10px 0 0; padding-left:19px}
.housenotes li{margin-bottom:5px}
.housenotes li:last-child{margin-bottom:0}

/* The same warning, shrunk to one dot, so the job list shows where care is
   needed before anything is opened. */
.watchdot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#b8823a; margin-right:8px; vertical-align:1px;
}

/* ---- files and people on a job ---- */
.filerow{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--clay);
}
.filerow:last-of-type{border-bottom:none}
.filerow.on b{color:var(--accent-deep)}

/* ---- the segment table, laid out now as it will be when editable ---- */
.segtable{border:1px solid var(--clay); border-radius:10px; overflow:hidden}
.seghead, .segrow{display:grid; grid-template-columns:74px 1fr 1fr; gap:0}
.seghead{
  background:var(--sand); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.seghead span{padding:9px 12px}
.segrow{border-top:1px solid var(--clay); font-size:13px}
.segrow:nth-child(odd){background:#fff}
.segrow span{padding:9px 12px}
.segrow .where{
  font-family:'Space Grotesk',sans-serif; font-size:11px; color:var(--muted);
  background:var(--paper); border-right:1px solid var(--clay);
}
.segrow .src{color:var(--ink); border-right:1px solid var(--clay)}
.segrow .tgt.blank{color:var(--stone); font-style:italic}

/* Source only, since the portal stopped translating. Two columns, not three. */
.seghead2, .segrow2{display:grid; grid-template-columns:74px 1fr; gap:0}
.seghead2{
  background:var(--sand); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.seghead2 span{padding:9px 12px}
.segrow2{border-top:1px solid var(--clay); font-size:13px}
.segrow2:nth-child(odd){background:#fff}
.segrow2 span{padding:9px 12px}
.segrow2 .where{
  font-family:'Space Grotesk',sans-serif; font-size:11px; color:var(--muted);
  background:var(--paper); border-right:1px solid var(--clay);
}
/* A cell can be ten lines of copy. Show it as ten lines. */
.segrow2 .src{color:var(--ink); white-space:pre-wrap}

/* The one place on a page where something is destroyed. Set apart on purpose. */
.dangerzone{margin-top:22px; padding-top:16px; border-top:1px solid var(--clay)}

/* ---- translation memory ---- */
.tmhit{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 0; border-top:1px solid var(--clay);
}
.tmhit:first-child{border-top:none}
.tmhit .pc{
  flex:0 0 52px; text-align:center; border-radius:8px; padding:6px 0;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px;
}
.tmhit .pc.exact{background:var(--accent-deep); color:#fff}
.tmhit .pc.near{background:var(--accent-soft); color:var(--accent-deep)}
.tmhit .pc.far{background:var(--sand); color:var(--muted)}
.tmhit .tmsrc{color:var(--ink); font-size:14px}
.tmhit .tmtgt{color:var(--accent-deep); font-size:14px; margin-top:2px}

.pairgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px}
.paircard{
  border:1px solid var(--clay); border-radius:10px; padding:12px 14px; background:#fff;
}
.paircard .pname{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.1em; color:var(--muted);
}
.paircard .pcount{
  font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:24px; color:var(--ink);
  line-height:1.2;
}

/* ---- wording to settle ---- */
.conflict{padding:14px 0; border-top:1px solid var(--clay)}
.conflict:first-of-type{border-top:none; padding-top:0}
.conflict .csrc{color:var(--ink); font-size:14px; margin-bottom:9px}
.copts{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.copt{
  text-align:left; cursor:pointer; background:#fff; border:1px solid var(--clay);
  border-radius:9px; padding:10px 13px; font-family:'Inter',sans-serif;
  display:flex; flex-direction:column; gap:3px;
}
.copt:hover{border-color:var(--accent); background:var(--accent-soft)}
.copt.live{border-color:var(--accent-pastel); background:var(--accent-soft)}
.copt .clabel{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.copt .ctext{color:var(--ink); font-size:13.5px}
.copt .cwho{font-size:11px; color:var(--muted)}
@media (max-width:700px){ .copts{grid-template-columns:1fr} }

/* ---- where the translation came from ---- */
.mixbar{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--clay)}
.mixbar .seg{display:block; height:100%}
.mixbar .seg.mem{background:var(--accent-deep)}
.mixbar .seg.adp{background:var(--accent)}
.mixbar .seg.new{background:var(--accent-pastel)}
.mixkey{display:flex; flex-wrap:wrap; gap:18px; margin-top:11px; font-size:13px}
.mixkey i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px}
.mixkey i.mem{background:var(--accent-deep)}
.mixkey i.adp{background:var(--accent)}
.mixkey i.new{background:var(--accent-pastel)}
.mixkey b{color:var(--ink)}

.otag{
  display:inline-block; font-style:normal; margin-left:7px; vertical-align:middle;
  font-family:'Space Grotesk',sans-serif; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 6px; border-radius:999px;
}
.otag.mem{background:var(--accent-deep); color:#fff}
.otag.adp{background:var(--accent-soft); color:var(--accent-deep)}
.otag.new{background:var(--sand); color:var(--muted)}

/* ---- the sheet preview on upload ---- */
.gridpeek{border-collapse:collapse; font-size:11.5px; width:100%}
.gridpeek th, .gridpeek td{
  border:1px solid var(--clay); padding:5px 7px; text-align:left;
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gridpeek th{
  background:var(--sand); font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:10px; color:var(--muted); text-align:center;
}
.gridpeek tr.langrow td{background:var(--accent-soft); color:var(--ink); font-weight:500}
.gridpeek tr.mktrow td{background:#f4efe4; color:var(--body)}

/* ---- picking which languages to do ---- */
.langhead, .langpick{
  display:grid; grid-template-columns:30px 1.5fr 1.2fr 92px 96px 92px;
  gap:10px; align-items:center;
}
.langhead{
  padding:0 12px 7px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.langpick{
  margin:0 0 7px; padding:11px 12px; border:1px solid var(--clay); border-radius:9px;
  background:#fff; cursor:pointer; text-transform:none; letter-spacing:0;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; color:var(--body);
}
.langpick:has(input:checked){background:var(--accent-soft); border-color:var(--accent-pastel)}
.langpick input{accent-color:var(--accent-deep); margin:0}
.langpick b{color:var(--ink); font-weight:500}
.langpick .mkt{
  display:inline-block; margin-left:6px; font-size:10px; color:var(--muted);
  background:var(--sand); border-radius:999px; padding:1px 7px;
}
.langpick .cols, .langpick .mem{font-family:'Space Grotesk',sans-serif; font-size:11.5px; color:var(--muted)}
.langpick .wcount{font-family:'Space Grotesk',sans-serif; color:var(--ink)}
.langpick .wdone{font-family:'Space Grotesk',sans-serif; color:var(--muted)}
@media (max-width:860px){
  .langhead{display:none}
  .langpick{grid-template-columns:26px 1fr; row-gap:4px}
}

/* ---- applications ---- */
.funnel{display:flex; gap:34px; flex-wrap:wrap}
.funnel div{display:flex; flex-direction:column}
.funnel b{font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:28px; color:var(--ink); line-height:1.1}
.funnel span{font-size:12.5px; color:var(--muted)}
.srctag{
  display:inline-block; margin-right:7px; font-family:'Space Grotesk',sans-serif;
  font-size:10px; letter-spacing:.08em; background:var(--sand); color:var(--body);
  border-radius:999px; padding:2px 9px;
}
.appcard{
  border:1px solid var(--clay); border-radius:12px; background:var(--card);
  padding:15px 18px; margin-bottom:11px;
}
.appcard.no{opacity:.62}
.apphead{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.apphead b{font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:16px; color:var(--ink); margin-right:8px}
.appgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:6px 20px; margin-top:11px; font-size:13px;
}
.appgrid .l, .sample .l{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.sample{margin-top:12px; padding:10px 13px; background:var(--accent-soft); border-radius:9px}
.sample .stext{color:var(--ink); font-size:14.5px; margin-top:3px}
/* Skipped is a quieter fact than answered, but still a fact worth showing. */
.sample.empty{background:var(--paper); border:1px solid var(--clay)}
.sample.empty .stext{color:var(--stone); font-size:13px; font-style:italic}
/* One fact per row. These two used to read as one run-on string. */
.appgrid .contact{display:block}
.appgrid .contact a{color:var(--ink); text-decoration:underline; word-break:break-all}

/* ---- notices ---- */
.notice{
  background:var(--accent-soft); border:1px solid var(--accent-pastel);
  border-radius:10px; padding:14px 18px; margin-bottom:18px; color:var(--ink);
}
.notice.warn{background:#f8f0e4; border-color:#e2d2ba}

/* ---- login ---- */
.loginwrap{max-width:400px; margin:9vh auto; padding:0 24px}
.loginwrap .mark{display:block; text-align:center; font-size:17px; margin-bottom:6px}
.loginwrap .tagline{text-align:center; color:var(--muted); font-size:13px; margin-bottom:28px}

hr{border:none; border-top:1px solid var(--clay); margin:26px 0}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:14px}

@media (max-width:760px){
  .formrow, .formrow.three{grid-template-columns:1fr}
  .trow{grid-template-columns:1fr; gap:8px}
  .pairadd{grid-template-columns:1fr; }
  h1{font-size:29px}
}

/* The one line Anna writes under a file, in her voice. 11 Aug 2026. */
.filenote-said { color: #5c554b; margin-top: 3px; font-style: normal; }

/* A comment on a job, either direction. 11 Aug 2026. */
.commentrow { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.commentrow:last-of-type { border-bottom: 0; }

/* A job invitation (Anna, 11 Aug). The one thing on the page that is waiting on a
   yes or no, so it sits above the lists with the brand blue down its edge. It
   disappears by itself the moment the job is accepted or declined. */
.invite{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent-pastel);
  border-left:4px solid var(--accent-deep); border-radius:12px;
  padding:18px 22px; margin-bottom:16px;
}
.invite .what{flex:1 1 280px}
.invite .eyebrow{color:var(--accent-deep)}
.invite .title{
  display:inline-block; margin-top:5px; font-size:19px; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.invite .title:hover{text-decoration:underline}
.invite .meta{margin-top:4px}

/* The profile, folded away once it is filled in (Anna, 11 Aug). Same arrow idea
   as everywhere else: it points down when the boxes are open. */
.editwrap{border:1px solid var(--clay); border-radius:12px; margin-bottom:22px}
.editwrap > summary{
  list-style:none; cursor:pointer; padding:13px 20px;
  display:flex; align-items:center; gap:9px;
}
.editwrap > summary::-webkit-details-marker{display:none}
.editwrap > summary::before{
  content:'\25B8'; color:var(--accent-deep); font-size:11px; line-height:1;
  transition:transform .15s ease;
}
.editwrap[open] > summary::before{transform:rotate(90deg)}
.editwrap[open] > summary{border-bottom:1px solid var(--clay)}
.editwrap > summary:hover .eyebrow{color:var(--ink)}
.editwrap > form{padding:6px 20px 20px}
.editwrap > form > .panel{border:none; background:transparent; padding-left:0; padding-right:0; margin-bottom:0}

/* The saved profile, read in one glance instead of a page of input boxes. */
.readout{
  margin-top:16px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px 28px;
}
.readout dt{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.readout dd{margin:0; color:var(--ink); font-size:15px; word-break:break-word}
.readnote{margin-top:18px; padding-top:14px; border-top:1px solid var(--clay)}

/* The two halves of a job, told apart by colour (Anna, 11 Aug, after looking at
   how XTRF, Plunet and Trados do it). What you were GIVEN sits on the sand side
   of the palette; what you SEND BACK carries the brand blue. A translator should
   never have to read the heading to know which panel is which. */
.panel.received{border-left:4px solid var(--stone); background:var(--card)}
.panel.sendback{border-left:4px solid var(--accent-deep); background:var(--accent-soft)}
.panel.sendback input[type=file]{background:var(--card); border-radius:8px; padding:9px 10px}

/* Finishing is one deliberate act, separate from uploading, so it gets its own
   line with a rule above it rather than sitting among the files. */
.finishline{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--accent-pastel);
}
.finishline .btn[disabled]{opacity:.45; cursor:not-allowed}
.notice.ok{background:var(--accent-soft); border-color:var(--accent-pastel)}

/* The preview banner (Anna, 12 Aug). Sits above the topbar, in the brand blue,
   so there is never a moment where she thinks she is on her own admin pages. */
.previewbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; background:var(--accent-deep); color:#fff;
  padding:10px 22px; font-size:13.5px}
.previewbar b{font-weight:600}
.previewbar .btn.ghost{border-color:rgba(255,255,255,.55); color:#fff; background:transparent}
.previewbar .btn.ghost:hover{background:rgba(255,255,255,.14)}

/* The translator menu (Anna, 12 Aug). Three tabs, in the brand blue, sized to be
   hit without aiming. The admin bar keeps its quieter underline: Anna lives in
   this thing all day and does not need it shouting. */
.topbar.mine nav{gap:10px}
.topbar.mine nav a{
  padding:7px 15px; border-radius:999px; border-bottom:none; font-size:11.5px;
  color:var(--accent-deep); background:var(--accent-soft);
}
.topbar.mine nav a:hover{background:var(--accent-pastel); color:var(--ink)}
.topbar.mine nav a.on{background:var(--accent-deep); color:#fff}

/* Invoices (Anna, 12 Aug). A month is one block: what it covers, what it comes
   to, and the button, in that order, so the number is read before it is raised. */
.period{border:1px solid var(--clay); border-radius:14px; padding:18px 20px; margin-top:16px; background:var(--card)}
.period + .period{margin-top:14px}
.periodhead{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding-bottom:14px; border-bottom:1px solid var(--sand)}
table.lines{width:100%; border-collapse:collapse; margin-top:6px; font-size:13.5px}
table.lines td{padding:9px 4px; border-bottom:1px solid var(--sand); vertical-align:top}
table.lines tr:last-child td{border-bottom:none}
table.lines td.num{text-align:right; white-space:nowrap; padding-left:16px}
table.lines tr.head td{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--clay)}
table.lines tr.total td{border-bottom:none; border-top:2px solid var(--clay); padding-top:14px}
.invoice .billed{margin-top:24px; background:var(--accent-soft); border-radius:10px; padding:16px 18px}

/* ---------------------------------------------------------------------------
   Applicants filter bar. Added 7 September 2026 (WU BUILD).
   Uses the portal's own tokens, nothing new invented. Light only, as everywhere.
   --------------------------------------------------------------------------- */
.appfilters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  background:var(--sand);border:1px solid var(--clay);padding:13px 15px;margin-bottom:16px}
.appfilters .f{display:flex;flex-direction:column;gap:5px}
.appfilters label{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.appfilters select,.appfilters input[type=search]{font-family:inherit;font-size:14px;font-weight:300;
  color:var(--ink);background:var(--card);border:1px solid var(--clay);padding:7px 9px;min-width:160px}
.appcount{margin-left:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-bottom:8px}
.vpill{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border:1px solid transparent;white-space:nowrap;margin-left:10px}
.vpill.flag{color:#9A4A3C;background:#F3E4DE;border-color:#9A4A3C}
.vpill.strong{color:#4A6E56;background:#E4EDE4;border-color:#4A6E56}
.vpill.read{color:var(--muted);border-color:var(--clay)}
@media(max-width:760px){.appfilters{gap:10px}.appfilters .f{width:100%}
  .appfilters select,.appfilters input[type=search]{width:100%}.appcount{margin-left:0}}

/* ---------------------------------------------------------------------------
   Job type chips on the translator's job list. 7 September 2026, at Anna's
   instruction: the categories need to be easy to see. These are the only solid
   colours on the screen, and all four are the portal's own accents.
   --------------------------------------------------------------------------- */
.kind{display:inline-block;border-radius:2px;padding:4px 9px;margin-right:8px;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:#FFFFFF;white-space:nowrap;vertical-align:2px}
.k-proof{background:#5A6B80}
.k-trans{background:#4A6E56}
.k-copy{background:#9A4A3C}
.k-interp{background:#8A7238}
.k-edit{background:#6E5A80}
.k-other{background:#8A8177}

/* ---------------------------------------------------------------------------
   The rating gate. 7 September 2026. The translator scores OUR draft before the
   job can be submitted. It is the only hard stop in the vendor experience, so it
   is the one place on the page where the type is not light.
   --------------------------------------------------------------------------- */
.gate{border:1px solid var(--ink);border-left-width:4px;background:var(--card);
  padding:16px 18px;margin:0 0 14px;max-width:520px}
.gate .gh{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  font-weight:600;margin-bottom:8px}
.gate .gq{color:var(--ink);font-size:15px}
.gstars{display:flex;gap:6px;margin:10px 0 6px}
.gstar{display:block}
.gstar input{position:absolute;opacity:0;width:0;height:0}
.gstar span{display:flex;align-items:center;justify-content:center;width:42px;height:40px;
  border:1px solid var(--ink);background:var(--card);color:var(--ink);
  font-size:17px;font-weight:600;cursor:pointer}
.gstar span:hover{background:var(--accent-soft)}
.gstar input:checked + span{background:var(--accent-deep);border-color:var(--accent-deep);color:#FFFFFF}
.gstar input:focus-visible + span{outline:2px solid var(--accent-deep);outline-offset:2px}
.glegend{font-size:12.5px;color:var(--muted)}
.glegend b{color:var(--ink);font-weight:600}
/* A disabled button must still be readable. Grey on cream vanished, and this is
   the button the whole rating dataset depends on. */
.gatego[disabled]{background:var(--card);border:1px solid var(--ink);color:var(--ink);opacity:.55}
.gatewarn{border-left:2px solid var(--ink);padding:2px 0 2px 14px;margin:0 0 12px;
  color:var(--ink);font-size:14px}

/* ============================================================ the editor
   Built 8 September 2026. One card per line of the customer's file. The point
   is that a proofreader can work down the page with one hand and never wonder
   what has been saved. */

.edwrap{max-width:1280px;margin:0 auto;padding:18px 20px 96px}
.edhead{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--clay);padding-bottom:16px;margin-bottom:18px}
.edtitle h1{margin:6px 0 0;font-size:26px}
.edfacts{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0}
.edfacts div{margin:0}
.edfacts dt{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.edfacts dd{margin:0;color:var(--ink);font-size:15px}

.edbody{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:26px;align-items:start}
@media (max-width:900px){ .edbody{grid-template-columns:minmax(0,1fr)} }

.edfilters{display:flex;gap:8px;margin:0 0 14px}
.fbtn{font-family:'Space Grotesk',sans-serif;font-size:13px;border:1px solid var(--clay);
  background:var(--card);color:var(--body);border-radius:4px;padding:7px 13px;cursor:pointer}
.fbtn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fbtn .cnt{opacity:.65;margin-left:6px}

.seg{display:grid;grid-template-columns:52px minmax(0,1fr);background:var(--card);
  border:1px solid var(--clay);border-radius:5px;margin-bottom:10px;overflow:hidden}
.seg.done{background:#f7f6f1;border-color:var(--stone)}
.segref{background:var(--sand);color:var(--muted);font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.06em;padding:14px 0 0;text-align:center}
.seg.done .segref{background:#ece9df}
.segbody{padding:13px 15px 12px;min-width:0}
.seg .src{color:var(--ink);font-size:15.5px;line-height:1.55;margin-bottom:12px;font-weight:500;
  background:var(--sand);border-left:3px solid var(--accent-pastel);border-radius:0 5px 5px 0;
  padding:10px 13px}
/* Which half is which, said rather than guessed. Anna, 8 September 2026. */
.halflabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 4px}
.halflabel.tgtlabel{margin-top:10px;color:var(--accent-deep)}
.seg .tgt{width:100%;font-family:'Inter',system-ui,sans-serif;font-size:15.5px;line-height:1.5;
  color:var(--ink);background:#fff;border:1px solid var(--clay);border-radius:4px;
  padding:9px 11px;resize:vertical}
.seg .tgt:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}
.seg.done .tgt{background:#fdfdfa}

/* A word the glossary has an agreed wording for. Pink, because nothing else on
   the page is pink, and read only, because the standard is not the vendor's. */
.gw{border-bottom:2px solid #d38a92;cursor:pointer;padding-bottom:1px}
.gw:hover{background:#f7e7e8}

.segmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:9px}
.segtags{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.segtags .reps{font-size:12px;color:var(--muted)}
.segacts{display:flex;gap:7px}
.ok-btn{min-width:104px}
.segnote{margin-top:9px;display:flex;gap:8px;align-items:flex-start}
.segnote textarea{flex:1;font-family:'Inter',system-ui,sans-serif;font-size:14px;
  border:1px solid var(--clay);border-radius:4px;padding:8px 10px}
.segnote.hid{display:none}

.edside .panel{margin-bottom:14px}
.edside .kv{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid var(--sand);font-size:14px}
.edside .kv:last-child{border-bottom:0}

.edfoot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:18px;
  background:var(--card);border-top:1px solid var(--clay);padding:11px 22px;z-index:20}
.edbar{flex:1;height:3px;background:var(--sand);border-radius:2px;overflow:hidden}
.edbar i{display:block;height:100%;background:var(--accent-deep);transition:width .25s ease}

.edtoast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:5px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:30;
  max-width:min(560px,92vw);text-align:center}
.edtoast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.rowbtns{display:flex;gap:10px;flex-wrap:wrap}

/* Vendor adding their own language combinations, 8 September 2026. */
.hid{display:none}
.pairadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pairadd select{font-family:'Inter',system-ui,sans-serif;font-size:14px;padding:8px 10px;
  border:1px solid var(--clay);border-radius:4px;background:#fff;color:var(--ink);min-width:150px}
.pairarrow{color:var(--muted)}
.chipx{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;
  padding:0 0 0 7px}
.chipx:hover{color:#8c5a3c}

/* The glossary bubble, 8 September 2026. It opens in the gutter beside the line
   Anna clicked on, level with the word, rather than at the foot of the page. */
.seg{position:relative}
.segref{position:relative}
.gpop{position:absolute;left:calc(100% + 10px);top:0;width:264px;z-index:12;
  background:var(--card);border:1px solid #d38a92;border-radius:5px;
  box-shadow:0 8px 24px rgba(40,36,31,.13);padding:11px 13px 12px}
@media (max-width:760px){ .gpop{position:static;width:auto;margin:8px 6px 2px} }
.gp-h{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#a4626b;margin-bottom:5px}
.gp-b{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;color:var(--ink);font-size:15px}
.gp-en{color:var(--muted)}
.gp-arrow{color:var(--stone)}
.gp-a{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.gp-why{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.gp-why textarea{font-family:'Inter',system-ui,sans-serif;font-size:13.5px;
  border:1px solid var(--clay);border-radius:4px;padding:7px 9px;width:100%}
.gp-why.hid,.gpop.hid{display:none}

/* Reference files beside the lines, and the offline box under them. */
.reffile{display:block;border:1px solid var(--clay);border-radius:4px;padding:9px 11px;
  margin-top:8px;text-decoration:none;background:#fff}
.reffile:hover{border-color:var(--accent-deep)}
.refname{display:block;color:var(--ink);font-size:14px}
.refnote{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.warnpanel{border-color:#d8b478;background:#fdf7ec}
.offline summary{cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:13px;
  letter-spacing:.02em;color:var(--body)}
.offline .backform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.offline input[type=file]{font-size:12.5px;max-width:100%}
.linesnote{background:var(--sand);border:1px solid var(--clay);border-radius:5px;
  padding:11px 14px;margin:0 0 14px;font-size:14.5px;color:var(--ink)}
.gp-hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}

/* Anna's note on a line, carried in from a proofread pack. */
.lbnote{background:#fdf7ec;border:1px solid #e6d3ae;border-radius:4px;padding:8px 11px;
  margin:0 0 9px;font-size:14px;color:#6b5836;line-height:1.5}
.lbnote i{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#a8843f;margin-right:8px}
.dedupe{font-size:12.5px;color:var(--muted);align-self:center;margin-left:6px;max-width:44ch;line-height:1.4}
.vendorline{margin-top:10px;padding-top:10px;border-top:1px solid var(--clay);font-size:14px;color:var(--body)}
.vendorline b{color:var(--ink)}
.dupsaved{display:inline-block;margin-left:8px;font-size:12px;background:var(--accent-soft);
  color:var(--accent-deep);border-radius:3px;padding:2px 8px}

/* The review screen, 8 September 2026. */
.reviewhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reviewhead h2{margin:0}
.reviewhead .count{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--muted);margin-left:8px}
.edit{border:1px solid var(--clay);border-radius:5px;padding:12px 14px;margin:12px 0;background:var(--card)}
.edit.settled{opacity:.62;background:#f7f6f1}
.editsrc{color:var(--muted);font-size:14px;margin-bottom:9px;line-height:1.5}
.editpair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){ .editpair{grid-template-columns:1fr} }
.editpair .was,.editpair .now{border-radius:4px;padding:9px 11px;font-size:15px;line-height:1.5;color:var(--ink)}
.editpair .was{background:#f6f2ea;border:1px solid var(--sand)}
.editpair .now{background:#f0f5f0;border:1px solid #cbdccb}
.editpair i{display:block;font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.editacts{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.editextra{margin-top:9px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.pick{font-size:14px;color:var(--ink);display:flex;gap:7px;align-items:center;cursor:pointer}
.gadd summary{cursor:pointer;font-size:13px;color:var(--accent-deep)}
.gaddbody{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.gaddbody input{font-family:'Inter',system-ui,sans-serif;font-size:14px;padding:7px 10px;
  border:1px solid var(--clay);border-radius:4px;min-width:170px}
.rec{border:1px solid #d38a92;border-radius:5px;padding:12px 14px;margin:10px 0;background:#fdf7f7}
.rec.settled{opacity:.62}
.recline{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:15px;color:var(--ink)}
.recline.theirs{margin-top:6px}
.recen{color:var(--muted)}
.recarrow{color:var(--stone)}
.recnow{color:var(--ink)}
.recwho{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#a4626b}
.recwhy{font-size:14px;color:var(--body);margin:8px 0 0;line-height:1.5}
.recacts{margin-top:10px}
.reviewbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--accent-soft);border:1px solid var(--accent-pastel);border-radius:5px;
  padding:13px 17px;margin:0 0 18px;text-decoration:none;color:var(--ink);font-size:15px}
.reviewbar:hover{border-color:var(--accent-deep)}
.reviewbar .go{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--accent-deep);white-space:nowrap}
.gp-instead{font-family:'Inter',system-ui,sans-serif;font-size:13.5px;border:1px solid var(--clay);
  border-radius:4px;padding:7px 9px;width:100%}

/* ---- the projects list, 8 September 2026. One row per project, languages inside. */
.prohead, .prorow{
  display:grid; grid-template-columns:2fr 1.2fr 110px 1fr 100px 1.3fr;
  gap:14px; align-items:center;
}
.prohead{
  padding:0 20px 8px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.prorow{
  padding:15px 20px; border:1px solid var(--clay); border-radius:12px;
  background:var(--card); margin-bottom:9px; text-decoration:none; color:var(--body);
}
.prorow:hover{border-color:var(--accent-pastel); background:#fff}
.prorow.late{border-left:3px solid #d8a05a}
/* Anna, 10 September 2026: a finished project is a light green row on the month
   and customer tabs, and off the ACTIVE tab altogether. */
.prorow.approved{background:rgba(78,138,106,.10);border-color:rgba(78,138,106,.35)}
.prorow.approved:hover{background:rgba(78,138,106,.14);border-color:rgba(78,138,106,.5)}
.cntlink{color:inherit;text-decoration:none}
.cntlink:hover{text-decoration:underline}
/* A job done by email before the portal. The name is shown, nothing is managed. */
.outside{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-left:6px;white-space:nowrap}
.prorow b{color:var(--ink); font-weight:500; display:block}
.prorow .ttl{font-size:12px; color:var(--muted); display:block; margin-top:2px}
.proref{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--accent-deep);
  background:var(--accent-soft); border-radius:3px; padding:1px 7px; margin-left:7px;
  display:inline-block; font-weight:600}
.prolangs b{display:inline; font-family:'Space Grotesk',sans-serif; font-size:15px}
.prolangs .small{display:block; margin-top:2px}
.prorow .small.muted, .jobrow .small.muted{display:block; font-size:11.5px; margin-top:2px}
@media (max-width:900px){
  .prohead{display:none}
  .prorow{grid-template-columns:1fr 1fr; gap:8px}
}
/* Inside one project the columns are its languages, so they get their own widths. */
/* WU BUILD block 2: the money left the rows for the table below, five columns now. */
.langhead, .langrow{grid-template-columns:1.4fr 1.6fr 1fr 110px}
/* WU BUILD block 4: the plain box under the coloured one, for reference files. */
.refbox-plain{border:1px solid var(--clay);border-radius:12px;padding:14px 18px 16px;margin:0 0 4px}
.refbox-plain .assetup{margin-top:12px}
@media (max-width:900px){ .langhead{display:none} .langrow{grid-template-columns:1fr 1fr;gap:8px} }
/* B18, third party invoicing. */
.provrow{display:flex;gap:10px;flex-wrap:wrap}
.provrow input{flex:1;min-width:200px}
.banner.selfbill{background:#f3f6f9;border:1px solid var(--accent-pastel);color:var(--ink)}
.conffo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.conffo input{font-family:'Inter',system-ui,sans-serif;font-size:13px;padding:6px 9px;
  border:1px solid var(--clay);border-radius:4px;min-width:190px}
.selfbillhead{border:1px solid var(--ink);border-radius:4px;padding:11px 14px;margin:0 0 18px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);line-height:1.6}
.chasepanel{border-color:#d8b478;background:#fdf7ec}
.waitingref{color:#8c5a3c}
.panel.thirdparty{border-color:var(--accent-pastel);background:var(--accent-soft)}

/* The brand rulebook chips, 8 September 2026. */
.tonepanel{border-color:var(--accent-pastel)}
.tonechip{border-radius:5px;padding:9px 12px;margin-top:9px;background:var(--sand);
  border:1px solid var(--clay);font-size:13.5px;line-height:1.5;color:var(--body)}
.tonechip b{display:block;color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.tonechip.loud{background:#fdf1ec;border-color:#e0a68e}
.tonechip.loud b{color:#a4552f}
.tonepick{display:flex;gap:10px;flex-wrap:wrap}
.tonepick select{flex:1;min-width:180px;font-family:'Inter',system-ui,sans-serif;font-size:14px;
  padding:8px 10px;border:1px solid var(--clay);border-radius:4px;background:#fff;color:var(--ink)}
/* The project number leads every title. Anna, 8 September 2026: it is the first
   thing she checks, so it is not allowed to trail the customer's name. */
.reflead{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--accent-deep);
  letter-spacing:.02em}
h1 .reflead{font-size:.82em}
.proref{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--accent-deep);background:var(--accent-soft);border-radius:3px;
  padding:1px 8px;margin:0 6px 0 0;display:inline-block}
.paysums{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:13px;align-items:center}
.paysums span{background:var(--sand);border-radius:3px;padding:3px 9px;color:var(--body)}
.paysums .minus{background:#fdf1ec;color:#a4552f}
.paysums .eq{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.refup{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--body);white-space:nowrap}
.dlrow{display:flex;gap:8px;flex-wrap:wrap}
.dlrow input[type=date]{flex:2;min-width:150px}
.dlrow input[type=time]{flex:1;min-width:110px}

/* The project page, 8 September 2026. Two sections: the jobs under the project,
   and the reference material that belongs to all of them. */
.protabs{display:flex;gap:4px;margin:18px 0 14px;border-bottom:1px solid var(--clay)}
.protab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  font-size:14px;letter-spacing:.02em;color:var(--body);text-decoration:none;
  border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;
  margin-bottom:-1px;background:transparent}
.protab:hover{color:var(--accent-deep)}
.protab.on{background:var(--card);border-color:var(--clay);color:var(--ink);font-weight:600}
.protab .cnt{font-family:'Space Grotesk',sans-serif;font-size:12px;
  background:var(--sand);border-radius:10px;padding:1px 8px;color:var(--body)}
.protab.on .cnt{background:var(--accent-soft);color:var(--accent-deep)}
.addjob{margin-top:20px}
.addjobrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.addjobrow label{display:flex;flex-direction:column;gap:4px;flex:1;min-width:190px;
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.addjobrow select{font-family:'Inter',system-ui,sans-serif;font-size:14px;
  padding:8px 10px;border:1px solid var(--clay);border-radius:4px;background:#fff;color:var(--ink)}
.assetup{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--clay)}
.assetup input[type=text]{flex:1;min-width:200px;font-family:'Inter',system-ui,sans-serif;
  font-size:14px;padding:8px 10px;border:1px solid var(--clay);border-radius:4px;background:#fff}
.notebox{display:flex;gap:6px;align-items:center;margin-top:5px;max-width:520px}
.notebox input[type=text]{flex:1;font-family:'Inter',system-ui,sans-serif;font-size:13px;
  padding:5px 8px;border:1px solid var(--clay);border-radius:4px;background:#fff;color:var(--body)}

/* The mail log, 8 September 2026. One line each, opened to read the whole thing. */
.maillog{border-bottom:1px solid var(--clay);padding:10px 2px}
.maillog summary{display:flex;gap:12px;align-items:baseline;cursor:pointer;list-style:none;
  font-size:14px;color:var(--body)}
.maillog summary::-webkit-details-marker{display:none}
.mailwho{min-width:210px;color:var(--ink)}
.mailsub{flex:1;color:var(--body)}
.mailwhen{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--muted);white-space:nowrap}
.mailbody{white-space:pre-wrap;font-family:'Inter',system-ui,sans-serif;font-size:13px;
  color:var(--body);background:var(--card);border:1px solid var(--clay);border-radius:6px;
  padding:12px 14px;margin:10px 0 4px;overflow-x:auto}
.okline{color:#4a7c59}
.extend{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;margin-right:8px}
.extend label{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.extend input{font-family:'Inter',system-ui,sans-serif;font-size:13px;padding:5px 8px;
  border:1px solid var(--clay);border-radius:4px;background:#fff;color:var(--ink)}

/* Whose money it is, said out loud. Anna, 8 September 2026: the customer's figure
   and the vendor's figure sat one line apart with nothing naming either. */
.sidelabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 3px}
.sidelabel.vend{color:var(--accent-deep)}
.vendorline .calc{margin-bottom:8px}

/* The new-platform note. One line until they want it. Anna, 8 September 2026. */
.saybox{background:var(--accent-soft);border:1px solid var(--accent-pastel);border-radius:8px;
  padding:11px 15px;margin:14px 0 0}
.saybox summary{cursor:pointer;list-style:none;font-size:13.5px;color:var(--body)}
.saybox summary::-webkit-details-marker{display:none}
.saybox summary b{color:var(--accent-deep);font-weight:600}
.saylink{color:var(--accent-deep);text-decoration:underline;margin-left:6px;white-space:nowrap}
.sayform{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sayform textarea{width:100%;font-family:'Inter',system-ui,sans-serif;font-size:14px;
  padding:9px 11px;border:1px solid var(--clay);border-radius:5px;background:#fff;color:var(--ink)}

/* Where an offer stands, on the row. Anna, 8 September 2026: "Assigned" said the
   same thing whether they had accepted, not answered, or refused. */
.wholine{display:block;margin-bottom:3px}
.otag.wait{background:#f6efe2;color:#8a6d3b;border-color:#e2d3b4}
.otag.no{background:#fbeaea;color:#8c4a4a;border-color:#e6c9c9;font-weight:600}
.otag.yes{background:#eaf3ec;color:#4a7c59;border-color:#cfe3d5}
/* A no is the one that needs Anna to do something, so it is the one that is red. */
.tag.late{background:#fbeaea;color:#8c4a4a;font-weight:600}
.tag.quiet{background:var(--sand);color:var(--body)}

/* Anna, 9 September 2026: status colours that mean something, and the key.
   ok = assigned (sage green), warn = waiting (amber), late = late or nobody
   (rose), info = back to review (the brand blue), quiet = not out or done. */
.tag.info{background:var(--accent-soft);color:var(--accent-deep)}
.tag.ok{background:#e4efe4;color:#3f6b48}
/* WU BUILD block 1, 9 September 2026: no row borders or colour keys by status.
   In a list a status is one small grey label with the side's word, blue-grey
   when it is Anna's step, green when Approved. */
.stlabel{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.stlabel.now{color:var(--now)}
.stlabel.done{color:var(--done)}
/* Anna, 10 September 2026: the status words carry the bar's three colours so a
   list reads like the bar. Offered: line grey. In progress and Submitted: blue-grey.
   Ready to complete, Approved, Delivered: green. Late stays the late red. */
.stlabel.wait{color:var(--stone)}
/* Anna, 10 September 2026: due today or past reads red on the row itself. */
.jobrow.today,.prorow.today{border-left:3px solid #b05252}
.jobrow.late,.prorow.late{border-left:3px solid #b05252}
.duetoday{color:#b05252;font-weight:500}
details.langgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 4px;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
details.langgroup>summary::-webkit-details-marker{display:none}
details.langgroup>summary::before{content:'\25B8';font-size:10px;color:var(--stone)}
details.langgroup[open]>summary::before{content:'\25BE'}
details.langgroup>summary .cnt{font-weight:600;color:var(--ink)}
.stlabel.late{color:#8c4a4a}
.progroup{margin:22px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}
.progroup:first-child{margin-top:0}

.seg{margin-bottom:8px}
.seg .src{font-size:14.5px;line-height:1.5;padding:8px 11px}
.seg .tgt{font-size:14.5px;padding:8px 10px}
.segref{font-size:10.5px;padding-top:12px}
/* Anna, 9 September 2026: the gutter carries a plain running number, wide enough
   to breathe. The customer's own label lives in the tooltip, never on the page. */
.seg{grid-template-columns:64px minmax(0,1fr)}
.segref{padding-top:14px}
.segref .segno{display:block;font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink);opacity:.55}
.previewbar .small{font-weight:400}

/* Anna, 9 September 2026: the translation sits under the English, always. */
.seg .src{margin-bottom:8px}
.halflabel.tgtlabel{margin-top:8px}
.segbody{padding:11px 14px 10px}
.segmeta{margin-top:7px}
.segtags .reps, .segtags .otag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- Anna, 9 September 2026: tabs, task and reference boxes, review chip, banner ---- */
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin:22px 0 14px;
  border-bottom:1px solid var(--clay);font-family:'Space Grotesk',sans-serif;font-weight:300}
.tabs .tab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;padding:8px 0 9px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--accent-deep);border-bottom-color:var(--accent-deep);font-weight:500}
.tabs .cnt{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:999px;
  background:var(--sand);color:var(--body);font-size:10px;letter-spacing:.04em;text-align:center;line-height:17px}
.tabs .tab.on .cnt{background:var(--accent-soft);color:var(--accent-deep)}
.tabs .sortctl{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:12px;align-items:center;padding:8px 0}
.tabs .sortbtn{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.tabs .sortbtn.on{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.trow[hidden]{display:none}
@media(max-width:900px){.tabs .sortctl{margin-left:0;width:100%}}

.taskbox{border-left:3px solid var(--accent-deep);padding:4px 0 6px 16px;margin:0 0 22px}
.taskbox h2{margin-bottom:8px}

details.refbox{border-top:1px solid var(--clay);padding:10px 0 4px;margin:6px 0 0}
details.refbox summary{list-style:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px}
details.refbox summary::-webkit-details-marker{display:none}
details.refbox summary::before{content:'+';font-size:15px;color:var(--muted);width:12px}
details.refbox[open] summary::before{content:'\2212'}
details.refbox summary .count{display:inline-block;min-width:20px;padding:0 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-deep);font-size:11px;letter-spacing:.04em;text-align:center;line-height:19px}
details.refbox[open] summary{margin-bottom:8px}

details.howto{margin:16px 0 0}
details.howto summary{cursor:pointer;list-style:none;font-family:'Space Grotesk',sans-serif;font-weight:300;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
details.howto summary::-webkit-details-marker{display:none}
details.howto summary:hover{color:var(--accent-deep)}
details.howto p{margin:8px 0 0;font-size:12px;line-height:1.6}

.chip-review{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:none;cursor:pointer;
  background:var(--accent-deep);color:var(--paper);text-decoration:none;line-height:1.3}
.chip-review:hover{background:var(--accent)}

.backbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  width:100%;margin:0 0 20px;padding:16px 22px;border-radius:6px;
  background:var(--accent-deep);color:var(--paper);font-family:'Space Grotesk',sans-serif;
  font-weight:300;font-size:17px;letter-spacing:.14em;text-transform:uppercase}
.backbanner .btn.big{background:var(--paper);color:var(--accent-deep);border-color:var(--paper);
  font-size:14px;letter-spacing:.14em;padding:12px 24px;font-weight:600}
.backbanner .btn.big:hover{background:#fff}
.backbanner.done{background:transparent;padding:0;justify-content:flex-start}

/* ---- WU BUILD, 9 September 2026: the job page folded into sections, the REVIEW
   tab, the green REVIEW button and comments coloured by speaker. ---- */
.navcnt{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:999px;
  background:var(--accent-deep);color:#fff;font-size:10px;letter-spacing:.04em;text-align:center;line-height:17px}

/* .btn.review is the green look, see the button block near the top. */
.btn.review.big, .btn.go.big{font-size:14px;padding:12px 24px}
.backbanner .btn.review{background:var(--done);border-color:var(--done);color:var(--paper)}
.backbanner .btn.review:hover{background:#447a5e}

.nextcard{padding:22px 24px 18px}

/* ---- WU BUILD block 1, 9 September 2026: the one bar. Equal segments, 6 px
   high, 4 px gaps, the two ends rounded outward. Green = done, blue-grey = now,
   the line colour = to come. Words under their part, small capitals. ---- */
.sbar{margin:0 0 18px}
.sbar-track{display:flex;gap:4px;height:6px}
.sbar-seg{flex:1 1 0;min-width:0;height:6px;background:var(--clay)}
.sbar-seg:first-child{border-radius:3px 0 0 3px}
.sbar-seg:last-child{border-radius:0 3px 3px 0}
.sbar-seg:only-child{border-radius:3px}
.sbar-seg.done{background:var(--done)}
.sbar-seg.now{background:var(--now)}
.sbar-words{display:flex;gap:4px;margin-top:7px}
.sbar-words span{flex:1 1 0;min-width:0;text-align:left;font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar-words span.done{color:var(--done)}
.sbar-words span.now{color:var(--ink)}
.sbar-words span.next{color:var(--muted)}
.sbar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.sbar-head .due{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--ink)}
.nextact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:36px}
.nextact form{margin:0}
.nextsaid{font-size:14px;color:var(--muted)}
.nextsaid b{color:var(--ink);font-weight:500}
.tag.done{background:#e4efe4;color:var(--done)}
.nextcard .backbanner{margin:0}
.nextline{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink);min-height:36px}
.nextline form{margin:0}

details.sec{background:var(--card);border:1px solid var(--clay);border-radius:12px;padding:0 24px;margin-bottom:12px}
details.sec > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:16px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
details.sec > summary::-webkit-details-marker{display:none}
details.sec > summary::before{content:'\25B8';font-size:12px;color:var(--muted);flex:0 0 12px;transition:transform .15s}
details.sec[open] > summary::before{transform:rotate(90deg)}
details.sec > summary .sum{font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-left:auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
details.sec > summary .sum.warn{color:#8a6a3e}
details.sec[open] > summary{border-bottom:1px solid var(--clay)}
details.sec[open]{padding-bottom:20px}
details.sec > summary:hover{color:var(--accent-deep)}
details.sec .band{margin-bottom:0}
details.sec .panel{border:none;background:transparent;padding:0;margin:0}

.q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--clay);color:var(--muted);font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;
  cursor:help;margin-left:4px;vertical-align:middle;letter-spacing:0}

.commentrow .cwho b{font-weight:500}
.commentrow.c-portal{color:var(--muted);font-size:13px}
.commentrow.c-portal p{color:var(--muted);font-size:13px}

.jobhead.revhead, .jobrow.revrow{grid-template-columns:1fr 1.8fr 1.1fr 1fr 90px 1.2fr 100px}
.jobrow.revrow .btn{justify-self:end}
@media(max-width:900px){.jobhead.revhead{display:none}.jobrow.revrow{grid-template-columns:1fr 1fr}}
/* WU BUILD block 3, 9 September 2026: colour by role, never by person. Translator
   green, Anna rose, customer blue-grey (for when customers write here), portal
   grey. The same four on Anna's page and on the vendor's. */
.commentrow.c-vendor .cwho b{color:#4E8A6A}
.commentrow.c-anna .cwho b{color:#B8626D}
.commentrow.c-customer .cwho b{color:#5A6B80}
.commentrow.c-portal .cwho b{color:var(--muted)}
.commentrow .cwho form button{padding:2px 8px;font-size:10px}

/* The nudge: a near-black pill with a speech bubble and a count, pinned to the top
   right corner of the row, half outside it. Always black, never a status colour,
   so it is seen. Rows that carry it are position: relative. */
.bubble{position:absolute;top:-8px;right:-8px;display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px 2px 6px;border-radius:999px;background:#28241f;color:#f6f2ec;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.18);pointer-events:none;z-index:2}
.bubble svg{display:block;flex:none}
.bubble b{font-weight:600}
.prorow, .jobrow, .pagehead{position:relative}
/* Block 8, 10 September 2026: a translator's request. On Anna's side the ask
   pill on the row (blue-grey, clock or pencil) and one line per request on the
   REVIEW tab. On the translator's job the same pill is a details summary on the
   corner of the deadline box that opens the small form beneath the bar. */
.askline{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 0 8px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px}
.askline .askicon{flex:none;width:26px;height:26px;border-radius:50%;background:var(--now);color:#f6f2ec;
  display:inline-flex;align-items:center;justify-content:center}
.askline .asktext{flex:1;min-width:0}
.askline .asktext .small{display:block;margin-top:2px}
.askline form{margin:0}
.askline .btn{min-width:96px;text-align:center}
.nextcard{position:relative}
details.askbox > summary{list-style:none;cursor:pointer;pointer-events:auto;position:absolute;top:-8px;right:-8px;
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 6px;border-radius:999px;background:var(--now);color:#f6f2ec;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18);z-index:2}
details.askbox > summary::-webkit-details-marker{display:none}
details.askbox > summary svg{display:block}
details.askbox .askform{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
details.askbox .askform input[type=text]{flex:1;min-width:160px}
details.askbox .askform .btn{min-width:140px;text-align:center}
.asksaid{display:inline-block;margin:10px 0 0;font-size:12px;color:var(--now)}
/* Anna, 10 September 2026: holiday mode. The same pill, grey, with a palm tree,
   on a translator row that cannot be booked. The row itself fades. */
.bubble.away{background:var(--muted);padding:3px 6px}
.trow{position:relative}
.trow.away{opacity:.6}
.palm{display:inline-flex;align-items:center;vertical-align:middle;color:var(--muted)}

/* Anna, 10 September 2026: the language dropdown in the tab strip, and the search
   box on the same line, right side. */
.tabs .langpick{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:none;border-bottom:2px solid transparent;padding:8px 0 9px;
  margin-bottom:-1px;cursor:pointer;width:auto;border-radius:0}
.tabs .langpick:focus{outline:none;border-bottom-color:var(--clay)}
.tabs .tsearch{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 0}
.tabs .tsearch input{width:220px;padding:6px 10px;font-size:12px;border:1px solid var(--clay);border-radius:999px;background:var(--card)}
.tabs .tsearch .btn{padding:5px 10px;font-size:10px}
.tabs .sortctl{margin-left:0}
@media(max-width:900px){.tabs .tsearch{margin-left:0;width:100%}.tabs .tsearch input{flex:1;width:auto}}

/* ---- WU BUILD block 2, 9 September 2026: words and money, one table ----
   Thin capitals for the heads, tabular numerals right aligned, no borders except
   a hairline above the margin or total row. */
.moneytab{width:100%;border-collapse:collapse;font-size:14px;color:var(--body)}
.moneytab th{
  font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 8px 6px;border:none}
.moneytab td{padding:6px 8px;border:none;vertical-align:baseline}
.moneytab th.num, .moneytab td.num, .moneytab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.moneytab td:first-child, .moneytab th:first-child{padding-left:0}
.moneytab td:last-child, .moneytab th:last-child{padding-right:0}
.moneytab tr.margin td{font-weight:600;color:var(--ink);border-top:1px solid var(--clay)}
.moneytab .small.muted{display:inline;font-size:11.5px}
details.moneynote{margin-top:10px}
details.moneynote summary{text-transform:none;letter-spacing:0;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:var(--accent-deep);font-weight:400}
details.moneynote summary:hover{text-decoration:underline}
@media (max-width:600px){ .moneytab{font-size:13px} .moneytab td, .moneytab th{padding:6px 4px} }

/* ---- Anna, 10 September 2026, C5: the three delivery steps in one row, one
   width, and a greyed step that cannot be pressed. The confirm line under it. ---- */
.dstep .btn{min-width:210px;text-align:center}
.dstep form{margin:0}
.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.confirmline{font-size:14px;color:var(--ink)}
.confirmline b{font-weight:500}

/* Anna, 10 September 2026, option A "the shelf": ready projects lift above the
   active list in green, and every row carries a small bar of its languages. */
.proshelf{border:1px solid rgba(78,138,106,.55);background:rgba(78,138,106,.08);border-radius:10px;padding:10px 12px 4px;margin:0 0 6px}
.proshelf-cap{font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--done);font-weight:500;margin:0 0 2px 4px}
.proshelf-cap span{color:var(--muted);letter-spacing:0}
.proshelf .prorow{margin:6px 0}
.probar{display:flex;gap:3px;height:6px;max-width:150px;margin:5px 0 2px}
.probar span{flex:1;border-radius:3px;background:var(--clay);min-width:4px}
.probar span.d{background:var(--done)}
.probar span.n{background:var(--now)}
.prolangs .small.ok{display:block;font-size:11.5px;margin-top:2px;color:var(--done);font-weight:500}