/* Light only, by Paul's instruction 2026-08-19. Values are Call Copilot's settled
   light tokens (Notion Visual System, House Ruling 2). Transcribed from the
   approved mockup v14 — ⛔ not redesigned. */
:root{
  --canvas:#ffffff; --surface:#f9f8f7; --surface2:#f2f0ee;
  --t1:#2c2c2b; --t2:#7d7a76; --t3:#a19e9a;
  --line:#e9e6e2; --line2:#ded9d3;
  --accent:#4481d8; --accent-soft:#eef3fb;
  --p-red:#fadcd9; --pt-red:#c0392b;
  --p-orange:#fbe1c6; --pt-orange:#c2661a;
  --p-green:#d6ecd9; --pt-green:#2f8a4e;
  --p-blue:#d6e4fa; --pt-blue:#2b6cd0;
  --p-violet:#eedcf8; --pt-violet:#9b3fc0;
  --p-neutral:#e6e4e1; --pt-neutral:#6b6560;
  --font:-apple-system,BlinkMacSystemFont,ui-sans-serif,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--canvas); color:var(--t1);
  font-family:var(--font); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer;}
input{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}

.app{display:flex; flex-direction:column; height:100dvh; background:var(--canvas); overflow:hidden; position:relative;}

/* ── top bar ── */
.appbar{
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  background:var(--surface); border-bottom:1px solid var(--line); flex:none;
}
.appbar .mark{font-size:14px; font-weight:600; letter-spacing:-.01em; flex:1; min-width:0;}
.appbar .mark small{display:block; font-size:11px; font-weight:500; color:var(--t3); letter-spacing:.04em; text-transform:uppercase;}
.iconbtn{
  border:1px solid var(--line2); background:var(--canvas); border-radius:6px;
  width:30px; height:30px; display:grid; place-items:center; padding:0; flex:none; color:var(--t2);
}
.iconbtn:hover{background:var(--surface2); color:var(--t1);}
.iconbtn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-size:18px; line-height:1;}
.who{font-size:11px; font-weight:600; border-radius:6px; padding:4px 8px; flex:none; background:var(--p-blue); color:var(--pt-blue);}
.who.mgr{background:var(--p-violet); color:var(--pt-violet);}
.bell{position:relative;}
.bell .badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center; font-variant-numeric:tabular-nums;
}

/* ── search + view switch ── */
.searchrow{padding:10px 14px 0; flex:none; display:flex; align-items:center;}
.search{display:flex; align-items:center; gap:7px; border:1px solid var(--line2); background:var(--surface); border-radius:7px; padding:0 9px; flex:1; min-width:0;}
.search svg{flex:none; color:var(--t3);}
.search input{flex:1; min-width:0; border:0; background:none; color:var(--t1); font-size:16px; padding:8px 0;}
.search input:focus{outline:none;}
.search input::placeholder{color:var(--t3);}
.search .clr{border:0; background:none; color:var(--t3); font-size:16px; line-height:1; padding:2px 4px;}

.vswitch{display:flex; flex:none; border:1px solid var(--line2); border-radius:7px; overflow:hidden; margin-left:8px; background:var(--canvas);}
.vswitch button{border:0; background:var(--canvas); color:var(--t3); padding:6px 9px; display:grid; place-items:center; border-left:1px solid var(--line2);}
.vswitch button:first-child{border-left:0;}
.vswitch button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent);}

/* ── filter chips ── */
.chips{display:flex; gap:6px; padding:10px 14px; overflow-x:auto; flex:none; border-bottom:1px solid var(--line); scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{border:1px solid var(--line2); background:var(--canvas); color:var(--t2); border-radius:99px; padding:5px 11px; font-size:12.5px; font-weight:500; white-space:nowrap;}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
.chip .n{opacity:.65; margin-left:5px; font-variant-numeric:tabular-nums;}
.chip .x{margin-left:7px; opacity:.8; font-size:14px; line-height:1; padding:0 1px;}
.chip.sortchip .n{opacity:1; color:var(--t2); font-variant-numeric:normal;}
.chip.sortchip[aria-pressed="true"] .n{color:var(--accent);}
.chipsep{width:1px; background:var(--line2); flex:none; margin:2px 3px;}

/* ── cards ── */
.scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.list{display:flex; flex-direction:column; gap:8px; padding:12px 14px calc(84px + env(safe-area-inset-bottom));}
.card{background:var(--canvas); border:1px solid var(--line); border-radius:8px; padding:11px 12px; display:flex; flex-direction:column; gap:7px; text-align:left; width:100%; font:inherit;}
.card:hover{border-color:var(--line2); background:var(--surface);}
.card .top{display:flex; align-items:baseline; gap:10px;}
.card .name{font-size:14.5px; font-weight:600; letter-spacing:-.01em; flex:1; min-width:0;}
.card .payroll{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.card .where{font-size:12.5px; color:var(--t2); margin-top:-4px;}
.card .pills{display:flex; flex-wrap:wrap; gap:5px;}
.card .foot{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--t2); border-top:1px solid var(--line); padding-top:7px;}
.card .foot .right{margin-left:auto; display:flex; gap:5px; align-items:center;}
.rep{font-size:10.5px; font-weight:600; color:var(--pt-neutral); background:var(--p-neutral); border-radius:99px; padding:2px 6px;}
.rep.shared{background:var(--p-violet); color:var(--pt-violet);}

.pill{font-size:11.5px; font-weight:600; border-radius:5px; padding:2.5px 7px; white-space:nowrap; display:inline-block;}
.pill.ok{background:var(--p-green); color:var(--pt-green);}
.pill.no{background:var(--p-red); color:var(--pt-red);}
.pill.rate{background:var(--p-blue); color:var(--pt-blue); font-variant-numeric:tabular-nums;}
.due{font-variant-numeric:tabular-nums;}
.due.late{color:var(--pt-red); font-weight:600;}
.due.today{color:var(--pt-orange); font-weight:600;}
.empty{padding:40px 20px; text-align:center; color:var(--t3); font-size:13px; line-height:1.6;}

/* ── the spreadsheet, on the phone ──
   The company column freezes at the left edge so scrolling sideways never leaves
   you on a row you cannot name. */
.gwrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.pgrid tbody tr:last-child td{padding-bottom:14px;}
.pgrid{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:12.5px;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
.pgrid thead th{
  position:sticky; top:0; z-index:2; background:var(--surface);
  font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--t3);
  text-align:left; padding:8px 10px; white-space:nowrap; border-bottom:1px solid var(--line2);
}
.pgrid th.n, .pgrid td.n{text-align:right; font-variant-numeric:tabular-nums;}
.pgrid td{padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--canvas);}
/* ⛔ The sticky cell must stay a real table-cell. Safari drops position:sticky on a
   <td> set to display:flex — Chrome keeps it, which is how this shipped broken.
   The flex layout goes on an inner div instead. */
.pgrid .c0{position:sticky; left:0; z-index:1; text-align:left; border-right:1px solid var(--line2);}
.pgrid thead .c0{z-index:3;}
.pgrid td.c0{display:table-cell;}
.pgrid .c0 .c0in{display:flex; align-items:center; gap:8px; width:150px;}
.pgrid td.c0 .co{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Unlocked: the column flows with the rest, so the whole sheet can be scrolled across. */
.pgrid.unlocked .c0{position:static;}
.pgrid.unlocked .c0 .c0in{width:auto; min-width:150px;}

/* The lock sits at the RIGHT edge of the company cell, on its own, clear of the
   tick that appears on the left when several rows are being chosen. */
.pgrid .c0 .c0in .sortable{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.lockbtn{
  margin-left:auto; flex:none;
  border:1px solid var(--line2); background:var(--canvas); color:var(--t2);
  border-radius:5px; width:24px; height:22px; padding:0;
  display:inline-grid; place-items:center; line-height:1;
}
.lockbtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.lockbtn:hover{background:var(--surface2);}

.pgrid thead th:has(.sortable){color:var(--t2);}
.ghint{font-size:12px; color:var(--t3); padding:10px 14px calc(84px + env(safe-area-inset-bottom)); line-height:1.5;}

/* ── the sample book, before she has typed anything ──
   Paul, 2026-08-20: one greyed card, or three greyed rows, because one row does
   not read as a spreadsheet. Replaced by her first real company, and never back. */
.sample{opacity:.55; pointer-events:none;}
.samplenote{
  margin:12px 14px 0; padding:10px 12px; border-radius:7px;
  background:var(--surface); border:1px dashed var(--line2);
  font-size:12.5px; color:var(--t2); line-height:1.5;
}

/* ── the review-only identity switch. Goes away at step 4. ── */
.asbar{
  display:flex; align-items:center; gap:6px; flex:none; overflow-x:auto; scrollbar-width:none;
  background:#fdf7e8; border-bottom:1px solid #ecdcb4; padding:5px 14px;
  padding-top:calc(5px + env(safe-area-inset-top));
}
.asbar::-webkit-scrollbar{display:none;}
.asbar .lbl{font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9a6b1f; flex:none;}
.asbtn{border:1px solid var(--line2); background:var(--canvas); color:var(--t2); border-radius:99px; padding:2px 9px; font-size:11.5px; font-weight:500; flex:none; white-space:nowrap;}
.asbtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}

/* ── pickers ── */
.scrim{position:fixed; inset:0; background:rgba(30,28,26,.34); display:flex; align-items:flex-end; z-index:5;}
.modal{
  width:100%; background:var(--canvas);
  border-top-left-radius:14px; border-top-right-radius:14px;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:2px; max-height:82%; overflow-y:auto;
}
.modal h4{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--t3); margin:0 0 6px;}
.pick{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit;
  background:none; border:0; border-bottom:1px solid var(--line); padding:12px 2px; font-size:14.5px;
}
.pick:last-child{border-bottom:0;}
.pick[aria-pressed="true"]{color:var(--accent); font-weight:600;}
.pick .n{margin-left:auto; font-size:12.5px; color:var(--t3); font-variant-numeric:tabular-nums;}
.pick:hover{background:var(--surface);}

.loading{padding:60px 20px; text-align:center; color:var(--t3); font-size:13px;}
.failed{padding:40px 20px; text-align:center; color:var(--pt-red); font-size:13px; line-height:1.6;}

/* ── the profile: a list of facts. No panels, no boxes. The hairline is the
   only divider. Paul, 2026-08-19: "the list is the thing." ── */
.detail{display:flex; flex-direction:column; height:100%;}
.dbar{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--line); flex:none;
}
.back{border:0; background:none; color:var(--accent); font-size:13.5px; font-weight:500; padding:4px 2px;}
.dobtn{
  border:1px solid var(--line2); background:var(--canvas); color:var(--t1);
  font-size:13px; font-weight:600; border-radius:6px; padding:5px 13px; margin-left:auto; flex:none;
}
.dobtn[disabled]{opacity:.4;}
.dbody{flex:1; overflow-y:auto; padding:0 14px calc(32px + env(safe-area-inset-bottom));}

/* the company's name — pinned, so it never scrolls away from its own facts */
.pname{
  position:sticky; top:0; z-index:2; background:var(--canvas);
  font-size:22px; font-weight:700; letter-spacing:-.022em; line-height:1.22;
  margin:0 -14px 12px; padding:14px 14px 10px;
  border-bottom:1px solid var(--line); text-wrap:balance;
}
.sheet{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.sheet:first-of-type{border-top:0;}
.r{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); min-height:44px;}
.r .k{font-size:12.5px; color:var(--t2); width:112px; flex:none; line-height:1.35;}
.r .v{flex:1; min-width:0; font-size:15px; color:var(--t1); overflow-wrap:anywhere; line-height:1.4;}
.r .v.num{font-variant-numeric:tabular-nums;}
.r .v.dim{color:var(--t3);}
.r .v.late{color:var(--pt-red); font-weight:600;}
.r .v.today{color:var(--pt-orange); font-weight:600;}
.r .a{flex:none; font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; margin-left:8px; border:0; background:none; padding:0;}

.shead{display:flex; align-items:baseline; gap:10px; margin:22px 0 0; padding-bottom:6px; border-bottom:1px solid var(--line2);}
.shead h3{font-size:14px; font-weight:600; margin:0;}
.shead .count{font-size:12px; color:var(--t3); margin-left:auto; font-variant-numeric:tabular-nums;}

.logline{padding:10px 2px; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5;}
.logline:last-child{border-bottom:0;}
.logline b{display:block; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--t3); text-transform:uppercase; margin-bottom:2px; font-variant-numeric:tabular-nums;}
.logempty{padding:14px 2px; font-size:13px; color:var(--t3);}

/* ── the dock ──
   Paul, 2026-08-20: "The more real estate we give the actual information on the
   screen, the better." So search and filters stop owning a band of the screen.
   They float at the bottom over the content, and the filters come up only when
   asked for. On the home screen there is no browser chrome at all — which is how
   Brenda and the rep will run it — so the bottom is free and it is where the
   thumb already is. In a browser the dock lifts clear of Safari's own bar. */
.dock{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(249,248,247,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line2);
}
/* Running in a browser rather than from the home screen: leave room so the dock
   never sits flush against Safari's own bar and get mistaken for it. */
@media (display-mode:browser){ .dock{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); } }

.dock .search{flex:1; min-width:0; background:var(--canvas);}
.dock .search input{font-size:16px;}   /* 16px or iOS zooms the page on focus */
.dock .vswitch{margin-left:0;}

.filterbtn{
  flex:none; display:flex; align-items:center; gap:6px;
  border:1px solid var(--line2); background:var(--canvas); color:var(--t2);
  border-radius:7px; padding:8px 10px; font-size:13px; font-weight:600; white-space:nowrap;
}
.filterbtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.filterbtn .cnt{
  min-width:17px; height:17px; padding:0 5px; border-radius:99px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; line-height:17px;
  text-align:center; font-variant-numeric:tabular-nums;
}

/* the filters sheet */
.sheetmodal{padding-bottom:calc(20px + env(safe-area-inset-bottom));}
.sheetmodal .chips{border-bottom:0; padding:4px 0 6px; flex-wrap:wrap; overflow:visible;}
.sheetmodal .chips .chip{margin-bottom:6px;}
.sheetsec{
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--t3); padding:12px 0 6px; border-top:1px solid var(--line); margin-top:6px;
}
.sheetsec.first{border-top:0; padding-top:2px; margin-top:0;}
.sheetdone{
  width:100%; margin-top:14px; border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-size:14px; font-weight:600; border-radius:8px; padding:12px 14px;
}
.sheetclear{
  width:100%; margin-top:8px; border:0; background:none; color:var(--t2);
  font-size:12.5px; text-decoration:underline; padding:6px;
}

/* ── a logged visit is one row ──
   Paul, 2026-08-20: the date is the fact and it gets the size; who logged it is
   attribution and it gets the margin. The row was inverted and stacked, which
   spent two lines to say one thing. */
.logrow{
  display:flex; align-items:baseline; gap:10px;
  padding:11px 2px; border-bottom:1px solid var(--line); min-height:44px;
}
.logrow:last-of-type{border-bottom:0;}
.logrow .when{font-size:15px; color:var(--t1); font-variant-numeric:tabular-nums; flex:none;}
.logrow .by{margin-left:auto; font-size:12.5px; color:var(--t2); text-align:right; min-width:0;}
.logrow .expect{
  font-size:11px; font-weight:600; border-radius:5px; padding:2.5px 7px;
  background:var(--p-violet); color:var(--pt-violet); white-space:nowrap;
}

/* the calendar link sits quietly beside the date it belongs to */
.logrow .cal{flex:none; margin-left:12px; font-size:12px;}
.r .a.cal{white-space:nowrap;}
@media (max-width:380px){ .logrow .cal{margin-left:8px;} .logrow .by{font-size:12px;} }

/* the add-to-calendar sheet */
.calwhat{font-size:16px; font-weight:600; letter-spacing:-.01em; margin-top:2px;}
.calwhen{font-size:13px; color:var(--t2); margin-top:2px;}
.calrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px 0 4px;}
.calrow input[type="time"]{
  font:inherit; font-size:17px; font-variant-numeric:tabular-nums;
  border:1px solid var(--line2); background:var(--canvas); color:var(--t1);
  border-radius:7px; padding:8px 10px;
}
.calallday,.calmin{
  border:1px solid var(--line2); background:var(--canvas); color:var(--t2);
  border-radius:99px; padding:7px 13px; font-size:13px; font-weight:500; white-space:nowrap;
}
.calallday.on,.calmin.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
a.sheetdone{display:block; text-align:center; text-decoration:none;}
button.a.cal{border:0; background:none; padding:0; font-weight:600; color:var(--accent); font-size:12px;}
.r button.a.cal{font-size:12.5px; margin-left:8px;}

.calnote{
  margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--t2);
  background:var(--accent-soft); border-radius:7px; padding:10px 12px;
}
.calnote strong{color:var(--t1); font-weight:600;}

/* ── editing ── */
.editing{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--pt-orange); background:var(--p-orange); border-radius:5px; padding:3px 8px;}
.dobtn.go{background:var(--accent); border-color:var(--accent); color:#fff;}
.saveerr{font-size:12px; color:var(--pt-red); margin-left:10px; flex:1; min-width:0;}
.r input{
  flex:1; min-width:0; font-size:16px; color:var(--t1);
  border:1px solid var(--line2); background:var(--surface); border-radius:5px; padding:8px 9px;
}
.r input:focus{outline:none; border-color:var(--accent); background:var(--canvas);}
.r input::placeholder{color:var(--t3);}
.r input.num{font-variant-numeric:tabular-nums;}
.ferr{font-size:12.5px; color:var(--pt-red); padding:2px 2px 9px; line-height:1.45;}

.seg{display:flex; border:1px solid var(--line2); border-radius:6px; overflow:hidden; margin-left:auto;}
.seg button{border:0; background:var(--surface2); color:var(--t3); font-size:13px; font-weight:500;
  padding:8px 18px; border-left:1px solid var(--line2); transition:background .12s ease, color .12s ease;}
@media (prefers-reduced-motion:reduce){.seg button{transition:none;}}
.seg button:first-child{border-left:0;}
.seg button[data-yn="false"][aria-pressed="true"]{background:var(--p-red); color:var(--pt-red); font-weight:600;}
.seg button[data-yn="true"][aria-pressed="true"]{background:var(--p-green); color:var(--pt-green); font-weight:600;}

.addbtn{width:100%; border:0; border-top:1px solid var(--line); background:var(--surface);
  color:var(--accent); font-size:13px; font-weight:600; padding:12px; text-align:left;}
.addbtn:hover{background:var(--surface2);}
.composer{border-top:1px solid var(--line); background:var(--surface); padding:11px 12px;
  display:flex; flex-direction:column; gap:9px;}
.composer textarea{width:100%; border:1px solid var(--line2); border-radius:6px; background:var(--canvas);
  color:var(--t1); font:inherit; font-size:16px; line-height:1.5; padding:9px 10px; resize:vertical; min-height:88px;}
.composer textarea:focus{outline:none; border-color:var(--accent);}
.composer .crow{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.composer .clbl{font-size:12.5px; color:var(--t2); flex:none;}
.composer input[type="date"]{font:inherit; font-size:16px; border:1px solid var(--line2);
  background:var(--canvas); border-radius:6px; padding:7px 9px;}
.composer .cancel{border:0; background:none; color:var(--t2); font-size:12.5px;
  text-decoration:underline; margin-left:auto;}
.composer .save{border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-size:13px; font-weight:600; border-radius:6px; padding:8px 16px;}
.composer .save[disabled]{opacity:.5;}
.whorow{display:flex; gap:6px; flex-wrap:wrap;}
.whobtn{border:1px solid var(--line2); background:var(--canvas); color:var(--t2);
  border-radius:99px; padding:5px 11px; font-size:12.5px;}
.whobtn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}

/* ⛔ Not a button. Archiving should take reading and two taps, not a thumb
   landing on the biggest target on the screen. */
.archiveline{margin-top:34px; padding-top:14px; border-top:1px solid var(--line); text-align:center;}
.archivelink{border:0; background:none; color:var(--t3); font-size:12.5px; text-decoration:underline; padding:6px 10px;}
.archivelink:hover{color:var(--pt-red);}
.archivewhat{font-size:13.5px; line-height:1.55; color:var(--t2); margin:10px 0 0;}
.archivewhat strong{color:var(--t1); font-weight:600;}
.archivego{background:var(--pt-red) !important; border-color:var(--pt-red) !important;}
.flag{background:#f7ecd5; color:#7c5516; border-radius:7px; position:relative;
  padding:11px 34px 11px 12px; font-size:13px; line-height:1.5; margin:12px 0 4px;}
.flagx{position:absolute; top:6px; right:6px; border:0; background:none;
  color:#9a6b1f; font-size:17px; line-height:1; padding:4px 7px;}

/* pull-to-refresh */
.pull{
  height:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--t3);
  transition:height .12s ease;
}
@media (prefers-reduced-motion:reduce){.pull{transition:none;}}