/* ============================================================
   WFV Front Desk v3 - app shell
   Converged direction: dashboard's answer-first home + wiki's
   reading view + hub's quick chips. Accessibility floor is a
   hard rule here: no text under 13px, controls >=48px, search
   52px, thumb-reach bottom bar on phones.
   ============================================================ */

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);}
.hdr-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px;}
.hdr .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none;}
.hdr .brand img{height:48px;width:auto;display:block;}
.hdr .brand .appname{font-size:15px;font-weight:700;color:var(--slate);border-left:1px solid var(--line);padding-left:12px;white-space:nowrap;}
.hdr .hsearch{flex:1;max-width:560px;position:relative;}
.hdr .hnav{margin-left:auto;display:flex;gap:4px;}
.hdr .hnav a{font-size:14.5px;font-weight:600;color:var(--slate);padding:12px 14px;border-radius:var(--r-pill);text-decoration:none;min-height:48px;display:inline-flex;align-items:center;}
.hdr .hnav a:hover{background:var(--wfv-blue-50);color:var(--wfv-blue-900);text-decoration:none;}
.hdr .hnav a.active{background:var(--wfv-blue-50);color:var(--wfv-blue-900);}

/* ---------- search boxes ---------- */
.sbox{position:relative;}
.sbox input{width:100%;min-height:52px;font-family:var(--font-ui);font-size:17px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 16px 12px 44px;outline:none;}
.sbox input:focus{border-color:var(--wfv-blue);box-shadow:0 0 0 4px var(--wfv-blue-50);}
.sbox .sic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;}
.sbox .sic .ico{width:20px;height:20px;}
.sdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);overflow:hidden;z-index:60;max-height:min(420px,60vh);overflow-y:auto;}
.sdrop a{display:flex;align-items:center;gap:10px;padding:13px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:15.5px;min-height:48px;}
.sdrop a:last-child{border-bottom:none;}
.sdrop a:hover,.sdrop a.sel{background:var(--wfv-blue-50);text-decoration:none;}
.sdrop .sw{font-size:13px;font-weight:700;color:var(--wfv-blue-900);background:var(--wfv-blue-50);border-radius:var(--r-pill);padding:4px 10px;flex:none;}
.sdrop .snone{padding:14px 16px;font-size:14.5px;color:var(--muted);}

/* ---------- layout ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 20px 80px;}
.view{padding-top:22px;}

/* ---------- home ---------- */
.hero{background:var(--wfv-blue);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);color:#fff;margin-bottom:26px;}
.hero h1{font-size:clamp(24px,3.4vw,32px);color:#fff;margin-bottom:8px;}
.hero p{font-size:16px;opacity:.95;margin:0 0 18px;max-width:60ch;}
.hero .sbox input{border-color:transparent;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chips button{font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);padding:10px 16px;min-height:44px;cursor:pointer;}
.chips button:hover{background:rgba(255,255,255,.25);}

.hsec{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px;}
.hsec h2{font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.hsec .sub{font-size:14px;color:var(--faint2,#8b948f);}

.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.toolcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);display:block;transition:.15s;}
.toolcard:hover{border-color:var(--wfv-blue-100);box-shadow:var(--shadow-sm);text-decoration:none;}
.toolcard .tci{width:44px;height:44px;border-radius:var(--r-sm);background:var(--wfv-blue-50);color:var(--wfv-blue);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:12px;}
.toolcard .tt{font-size:16.5px;font-weight:700;margin-bottom:3px;}
.toolcard .tk{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wfv-blue-900);margin-bottom:6px;}
.toolcard .td{font-size:14.5px;color:var(--muted);line-height:1.5;}

.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.catcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);display:block;transition:.15s;}
.catcard:hover{border-color:var(--wfv-blue-100);box-shadow:var(--shadow-sm);text-decoration:none;}
.catcard .ci{width:44px;height:44px;border-radius:var(--r-sm);background:var(--wfv-blue-50);color:var(--wfv-blue);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:10px;}
.catcard .cn{font-size:16.5px;font-weight:700;}
.catcard .cp{font-size:13.5px;font-weight:700;color:var(--wfv-blue-900);margin:3px 0 6px;}
.catcard .cd{font-size:14.5px;color:var(--muted);line-height:1.5;}

.startwidget{max-width:760px;}
.recent{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.recent a{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15.5px;min-height:52px;}
.recent a:last-child{border-bottom:none;}
.recent a:hover{background:var(--wfv-blue-50);text-decoration:none;}
.recent .ri{color:var(--wfv-blue);display:flex;flex:none;}
.recent .rsec{font-size:13px;color:var(--muted);margin-left:auto;flex:none;}
.recent .rdate{font-size:13px;color:var(--muted);flex:none;}

/* ---------- article / reading view ---------- */
.read{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start;}
.sidebar{position:sticky;top:82px;max-height:calc(100vh - 100px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;}
.sb-group{margin-bottom:4px;}
.sb-head{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;text-align:left;font-family:var(--font-ui);font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);padding:11px 10px;border-radius:var(--r-xs);cursor:pointer;min-height:44px;}
.sb-head:hover{background:var(--wfv-blue-50);}
.sb-head .gicon{color:var(--wfv-blue);display:flex;flex:none;}
.sb-head .chev{margin-left:auto;transition:.15s;color:var(--muted);display:flex;}
.sb-group.open .chev{transform:rotate(180deg);}
.sb-links{display:none;}
.sb-group.open .sb-links{display:block;}
.sb-links a{display:block;font-size:14.5px;color:var(--slate);text-decoration:none;padding:11px 10px 11px 34px;border-radius:var(--r-xs);line-height:1.4;min-height:44px;display:flex;align-items:center;}
.sb-links a:hover{background:var(--wfv-blue-50);text-decoration:none;}
.sb-links a.active{background:var(--wfv-blue-50);color:var(--wfv-blue-900);font-weight:700;}

.article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.4vw,36px);min-width:0;}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:10px;}
.crumbs a{color:var(--muted);}
.article h1{font-size:clamp(22px,3vw,28px);margin-bottom:10px;}
.pmeta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.pmeta .tag{font-size:13px;font-weight:600;background:#eef2f0;color:var(--slate);border-radius:var(--r-pill);padding:4px 11px;}
.srcbox{margin-top:26px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);font-size:14.5px;color:var(--slate);}
.srcbox a{font-weight:600;}
.pnav{display:flex;gap:12px;margin-top:18px;}
.pnav a{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;text-decoration:none;color:var(--ink);min-height:56px;}
.pnav a:hover{border-color:var(--wfv-blue-100);text-decoration:none;}
.pnav .lbl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;}
.pnav .ttl{font-size:14.5px;font-weight:600;}
.pnav a.next{text-align:right;}

/* tables in article bodies scroll instead of overflowing the phone */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;}
.tblwrap>.tbl{margin:0;min-width:560px;}

/* ---------- browse ---------- */
.browse .bsec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;}
.browse .bsec h2{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:8px;color:var(--wfv-blue-900);}
.browse .bsec h2 .gicon{color:var(--wfv-blue);display:flex;}
.browse .bsec a{display:flex;align-items:center;font-size:15.5px;padding:12px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:48px;}
.browse .bsec a:last-child{border-bottom:none;}
.browse .bsec a:hover{background:var(--wfv-blue-50);text-decoration:none;}
.browse .bsec .bdate{margin-left:auto;font-size:13px;color:var(--muted);}

/* ---------- search results view ---------- */
.results h1{font-size:22px;margin-bottom:16px;}
.results .recent a .snip{font-size:13.5px;color:var(--muted);display:block;}

/* ---------- tool view ---------- */
.toolview{max-width:820px;}
.toolview .backlink{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;margin-bottom:14px;min-height:44px;}

/* ---------- mobile bottom bar ---------- */
.bbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);}
.bbar-in{display:grid;grid-template-columns:repeat(4,1fr);}
.bbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;text-decoration:none;color:var(--slate);font-size:13px;font-weight:600;}
.bbar a .ico{width:22px;height:22px;}
.bbar a.active{color:var(--wfv-blue-900);}
.bbar a:hover{text-decoration:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hdr .hsearch{display:none;}
  .hdr .hnav{display:none;}
  .bbar{display:block;}
  .read{grid-template-columns:1fr;}
  .sidebar{position:static;max-height:none;order:2;}
  .wrap{padding-bottom:110px;}
}
@media (max-width:640px){
  .hdr .brand img{height:42px;}
  .hdr .brand .appname{font-size:13.5px;}
  .hero{border-radius:var(--r);}
  .pnav{flex-direction:column;}
}

/* ---- suggest-an-edit affordance on articles ---- */
.pageactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px;}
.pageactions .suggestlink{text-decoration:none;font-size:14px;min-height:40px;padding:8px 14px;}
.pageactions .editnote{font-size:12.5px;color:var(--muted);max-width:520px;line-height:1.45;}

/* ================= v4: auth gate + identity + editor ================= */
/* content hidden until a session (or unconfigured local mode) sets body.authed */
body:not(.authed) .wrap, body:not(.authed) .bbar { display:none }

.authgate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.authgate[hidden]{display:none}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:38px 34px;max-width:390px;width:100%;text-align:center}
.authcard img{height:54px;margin-bottom:14px}
.authcard h1{font-size:24px;margin-bottom:8px}
.authcard p{color:var(--slate);font-size:15.5px;margin:0 0 18px}
.authcard .btn{width:100%}
.authmsg{color:var(--alert);font-size:14.5px;margin-top:14px}

.whoami{position:relative;margin-left:10px}
.whoami-btn{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:4px}
.whoami .avatar{width:34px;height:34px;border-radius:50%;background:var(--wfv-blue);color:#fff;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.editorpill{font-size:12px;font-weight:700;color:var(--wfv-blue-900);background:var(--wfv-blue-50);border:1px solid var(--wfv-blue-100);border-radius:var(--r-pill);padding:2px 9px}
.whoami-menu{position:absolute;right:0;top:46px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;min-width:230px;z-index:60;text-align:left}
.whoami-menu .wm-email{font-weight:700;font-size:14.5px;word-break:break-all}
.whoami-menu .wm-role{color:var(--muted);font-size:13.5px;margin:4px 0 12px}

.wfvbar{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--card);border-top:2px solid var(--wfv-blue);box-shadow:0 -6px 18px -8px rgba(30,40,36,.25)}
.wfvbar-in{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:1060px;margin:0 auto;padding:10px 14px}
.wfvbar button{min-height:38px;padding:7px 12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--slate);cursor:pointer}
.wfvbar button:hover{border-color:var(--wfv-blue-100);background:var(--wfv-blue-50);color:var(--wfv-blue-900)}
.wfvbar .wfvbar-save{background:var(--wfv-blue);border-color:var(--wfv-blue);color:#fff}
.wfvbar .wfvbar-save:hover{background:var(--wfv-blue-700);color:#fff}
.wfvbar-sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.wfvbar-flex{flex:1}
.wfvbar-drop{position:relative}
.wfvbar-menu{position:absolute;bottom:46px;left:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:200px;z-index:75}
/* set by placeMenu() when the menu would otherwise run past the right edge */
.wfvbar-menu--right{left:auto;right:0}
.wfvbar-menu button{text-align:left;border:0}

.body.editing{outline:2px dashed var(--wfv-green-mid);outline-offset:10px;border-radius:var(--r-xs);min-height:120px;padding-bottom:70px}
/* The title is edited where it is read, so it gets the same dashed "this is
   live" treatment as the body rather than turning into a form field that
   jumps the layout. Tighter offset because an h1 sits close to the meta row. */
h1.editing-title{outline:2px dashed var(--wfv-green-mid);outline-offset:6px;border-radius:var(--r-xs);min-width:40px}
h1.editing-title:empty::before{content:"Untitled page";color:var(--faint)}

/* Page details: the fields that are not the prose. Rendered as a panel between
   the title and the body, i.e. where they sit in the page's own hierarchy. */
.pedit{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:18px 0 22px}
.pedit-head{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:12px}
.pedit-phi{font-size:13.5px;line-height:1.45;margin:0 0 14px;padding:8px 11px;border:1px solid #ecd6ad;border-radius:var(--r-xs);background:var(--warn-50);color:var(--warn)}
.pedit-row{display:block;margin-bottom:14px}
.pedit-row>span{display:block;font-size:14px;font-weight:700;color:var(--slate);margin-bottom:5px}
.pedit-row>em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
.pedit-row input[type=text],.pedit-row textarea,.pedit-row select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-xs);padding:9px 11px;resize:vertical}
.pedit-row input:focus,.pedit-row textarea:focus,.pedit-row select:focus{outline:2px solid var(--wfv-blue-100);border-color:var(--wfv-blue)}
.pedit-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.pedit-foot>em{flex:1;min-width:220px;font-style:normal;font-size:13px;color:var(--muted);line-height:1.45}

/* Search words: the highest-leverage box on the panel, given the weight it
   earns. Everything else here is a field; this one is a field plus a lesson. */
.pedit-row--hero{background:var(--wfv-blue-50);border:1px solid var(--wfv-blue-100);border-radius:var(--r-sm);padding:13px 14px}
.pedit-row--hero>span{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pedit-row--hero label{cursor:pointer}
.pe-count{font-size:12px;font-weight:700;color:var(--wfv-blue-900);background:var(--card);
          border:1px solid var(--wfv-blue-100);border-radius:var(--r-pill);padding:1px 9px}
.pe-count--empty{color:var(--wfv-amber-700);background:var(--wfv-amber-50);border-color:#ecd9be}
.pedit-help{margin-top:9px;font-size:13.5px}
.pedit-help summary{cursor:pointer;color:var(--wfv-blue-900);font-weight:600;list-style:revert}
.pedit-help summary:hover{text-decoration:underline}
.pedit-help>div{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px;color:var(--slate);line-height:1.5}
.pedit-ex{font-family:var(--font-mono);font-size:12.5px;color:var(--wfv-blue-900);background:var(--card);
          border:1px solid var(--wfv-blue-100);border-radius:var(--r-xs);padding:9px 11px;margin:0}

/* Required / Optional / Filled in for you */
.fmark{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
       color:var(--muted);background:var(--panel);border:1px solid var(--line);
       border-radius:var(--r-pill);padding:1px 8px}
.fmark--req{color:var(--wfv-blue-900);background:var(--wfv-blue-50);border-color:var(--wfv-blue-100)}
.fmark--auto{color:var(--ok);background:var(--ok-50);border-color:rgba(46,125,50,.28)}
.pedit-row>span{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

.pricestamp{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
/* Quiet until you reach for it: removing a page is rare, and a red button
   sitting under every edit invites the click it is trying to make deliberate. */
.btn--danger{color:var(--alert);border-color:#f0c8c2}
.btn--danger:hover{background:var(--alert-50);border-color:var(--alert);color:var(--alert)}

.browsehead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.revdrawer{position:fixed;inset:0;z-index:85;background:rgba(30,40,36,.45);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px}
.revdrawer-in{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);max-width:680px;width:100%;padding:22px}
.revhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.revlist{display:flex;flex-direction:column;gap:10px}
/* A history entry is a paragraph now, not a line: who and when, then what they
   actually changed. Stacked rather than the old single flex row, which had room
   for a timestamp and two buttons and nothing else. */
.revrow{display:block;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;font-size:14.5px}
.revmeta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.revrow .revwho{font-weight:700}
.revrow .revwhen{color:var(--muted);font-size:13.5px}
.revwhat{list-style:none;padding:0;margin:8px 0 0}
.revwhat li{position:relative;padding:3px 0 3px 15px;color:var(--slate);line-height:1.5}
.revwhat li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--wfv-green-mid)}
.revbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.revbtns .btn{min-height:36px;padding:6px 12px;font-size:13.5px}
.revhint{color:var(--muted);font-size:14px;margin:0 0 12px}
.revempty{color:var(--muted);font-size:14.5px}
.revpreview{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.revpvnote{font-size:13.5px;color:var(--muted);margin-bottom:8px}

/* New page drawer. Shares the .pedit-row field styling with the in-page details
   panel so the same field looks the same in both places. */
.pageform .pedit-row{margin-bottom:16px}
.pageform .removedlist{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.pageform .removedlist h3{font-size:16px;margin:0 0 6px}
.pageform .removedlist .prow--single{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:14.5px}
.pnew{border-top:1px solid var(--line);margin-top:22px;padding-top:6px}
.pricegrid .pnew .pedit-row{max-width:520px}

.pricegrid .pgroup h3{margin:18px 0 8px;font-size:16px}
/* wider than the history drawer it shares a shell with: this one carries four
   fields per row, one of them a sentence, and 680px squeezed the labels to two
   lines each */
.pricegrid{max-width:940px}
.pricegrid .prow{display:grid;grid-template-columns:minmax(180px,1fr) 104px 104px minmax(200px,1.5fr) 34px;gap:8px;align-items:center;padding:4px 0;font-size:14.5px}
/* Remove: quiet until reached for. It sits next to four boxes people edit all
   the time, so it must not read as another field. */
.pricegrid .prowdel{min-height:32px;width:32px;padding:0;border:1px solid transparent;background:none;border-radius:var(--r-xs);font-size:19px;line-height:1;color:var(--faint);cursor:pointer}
.pricegrid .prowdel:hover{color:var(--alert);border-color:var(--alert-50);background:var(--alert-50)}
.pricegrid .prow--gone label{text-decoration:line-through;color:var(--muted)}
.pricegrid .prow--gone input{opacity:.45}
.pricegrid .prow--gone .prowdel{color:var(--alert);font-size:16px}
.pricegrid .removedlist .prow--single label{color:var(--muted)}
.pricegrid .removedlist .gonegroup{font-size:13px;color:var(--faint)}
.pricegrid .prow.phead{color:var(--muted);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
/* the "current as of" row is label + one input, not a price row */
.pricegrid .prow--single{grid-template-columns:minmax(200px,1fr) 2fr}
.pricegrid input[type=number],.pricegrid input[type=text]{border:1px solid var(--line);border-radius:var(--r-xs);padding:8px 10px;font:inherit;font-size:14.5px;width:100%;background:var(--panel)}
.pricegrid input:focus{outline:2px solid var(--wfv-blue-100);border-color:var(--wfv-blue)}
.pricehint{color:var(--muted);font-size:14px;margin:0 0 10px}

.stalechip{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:65;background:var(--wfv-amber-50);color:var(--wfv-amber-700);border:1px solid var(--wfv-amber);border-radius:var(--r-pill);padding:7px 16px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-sm)}
.stalechip[hidden]{display:none}
.toast{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:10px 20px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

/* Notes run long (the DDS breakdown is ~120 characters, the refit one ~75).
   Below roughly a tablet there is no honest way to fit a sentence in a fourth
   column, so it drops to its own full-width line under the row it belongs to
   rather than being truncated into uselessness. Own breakpoint, wider than the
   one below: this is about the note needing room, not about phones. */
@media (max-width:760px){
  .pricegrid .prow{grid-template-columns:1fr 104px 104px 34px}
  /* Quieter than a price box on purpose. Only 7 of 41 rows carry a note, so at
     full width the other 34 are empty boxes competing with the numbers that are
     the reason anybody opened this. Dashed and transparent reads as "you may
     write here", not "here is a field"; it fills in on focus. */
  /* Explicit placement, because auto-placement puts these in the wrong order.
     The note spans a full row, so anything after it in the DOM lands on a
     THIRD line: the remove button ended up alone under the note, closer to the
     next row than to its own, which on a phone reads as "remove the row below".
     Pin the button to line 1 and let the note take line 2 beside it. */
  .pricegrid .prow input[data-f=note]{grid-column:1 / 4;grid-row:2;font-size:13.5px;padding:6px 10px;background:transparent;border-style:dashed}
  .pricegrid .prow input[data-f=note]:focus{background:var(--panel);border-style:solid}
  .pricegrid .prowdel{grid-column:4 / 5;grid-row:1}
  .pricegrid .prow.phead span:nth-of-type(3){display:none}
  /* re-stated because the .prow rule above has equal specificity and comes
     later than the base one, so without this the asOf box collapses to a
     price-sized 104px between 641 and 760 */
  .pricegrid .prow--single{grid-template-columns:1fr 1.6fr}
}
@media (max-width:640px){
  .pricegrid .prow{grid-template-columns:1fr 84px 84px 30px}
  .pricegrid .prow--single{grid-template-columns:1fr 1.4fr}
  .pricegrid .prowdel{width:28px}
  .whoami .editorpill{display:none}
}