/* Mailday: the app's chrome. Postcards keep their own printed colours (public/doorstep/cards.js); everything here
   follows light and dark. Type: Bricolage Grotesque for display, Figtree for words, IBM Plex Mono for the record. */
:root{
  --paper:#F3F4EF; --sheet:#FFFFFF; --ink:#171B26; --ink2:#4A5163; --ink3:#6E7586; --rule:#E2E4DC; --rule2:#D2D5CB;
  --cobalt:#2747C9; --cobalt-hi:#1E3AA8; --cobalt-lo:#E6EBFB; --kraft:#A9773A; --kraft-lo:#F6EEDF; --ok:#1E7A4E; --ok-lo:#E3F2EA; --warn:#9A5B12; --warn-lo:#FBF0DD; --bad:#A3302A; --bad-lo:#F9E5E3;
  --shadow:0 1px 0 rgba(23,27,38,.04),0 10px 30px -18px rgba(23,27,38,.35); --shadow-lg:0 30px 60px -30px rgba(23,27,38,.45);
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif; --f-body:"Figtree","Segoe UI",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:16px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#12151C; --sheet:#1A1E28; --ink:#ECEEF3; --ink2:#B4BAC8; --ink3:#8E95A6; --rule:#2A2F3B; --rule2:#363C4A;
  --cobalt:#8CA2FF; --cobalt-hi:#A9B9FF; --cobalt-lo:#222B4D; --kraft:#D9B276; --kraft-lo:#2C261C; --ok:#5CC48F; --ok-lo:#16301F; --warn:#E8B062; --warn-lo:#2E2414; --bad:#F08A80; --bad-lo:#3A1D1A;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 14px 34px -20px rgba(0,0,0,.8); --shadow-lg:0 30px 60px -30px rgba(0,0,0,.9); color-scheme:dark}}
:root[data-theme="dark"]{--paper:#12151C; --sheet:#1A1E28; --ink:#ECEEF3; --ink2:#B4BAC8; --ink3:#8E95A6; --rule:#2A2F3B; --rule2:#363C4A; --cobalt:#8CA2FF; --cobalt-hi:#A9B9FF; --cobalt-lo:#222B4D; --kraft:#D9B276; --kraft-lo:#2C261C; --ok:#5CC48F; --ok-lo:#16301F; --warn:#E8B062; --warn-lo:#2E2414; --bad:#F08A80; --bad-lo:#3A1D1A; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--f-mono)}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.02em;margin:0}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.stamp{width:30px;height:34px;display:grid;place-items:center;background:var(--cobalt);color:#fff;border-radius:4px;box-shadow:inset 0 0 0 2px var(--cobalt),inset 0 0 0 3.5px rgba(255,255,255,.55)}
.stamp svg{width:16px;height:16px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--ink2);font-weight:500;font-size:14px}
.nav a[aria-current="page"]{background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2);min-width:0}
.who b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--kraft);border:1px solid currentColor;border-radius:4px;padding:2px 6px;white-space:nowrap;font-weight:500}
.tag.ok{color:var(--ok)}.tag.co{color:var(--cobalt)}
.linkbtn{border:1px solid var(--rule);background:var(--sheet);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink2)}
.linkbtn:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* ---------- shared pieces ---------- */
.panel{background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow)}
.eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--cobalt);color:#fff;font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;text-decoration:none;min-height:46px;transition:background .15s ease,transform .1s ease}
.btn:hover{background:var(--cobalt-hi)}.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--rule2)}
.btn.ghost:hover{border-color:var(--cobalt);color:var(--cobalt);background:transparent}
.btn.sm{padding:8px 13px;min-height:36px;font-size:13.5px;border-radius:10px}
.note{font-size:13px;color:var(--ink3);margin:0}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite;display:inline-block;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--ink2)}
.steps li{display:flex;gap:10px;align-items:center}
.steps i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule2);flex:none;display:grid;place-items:center}
.steps li.done{color:var(--ink)}
.steps li.done i{background:var(--ok);border-color:var(--ok)}
.steps li.done i::after{content:"";width:7px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.steps li.now i{border-color:var(--cobalt);border-top-color:transparent;animation:spin .8s linear infinite}

/* ---------- start: one box ---------- */
.start{min-height:calc(100vh - 61px);display:grid;place-items:center;padding-block:40px 80px}
.start-in{width:min(680px,100%);text-align:center}
.start h1{font-weight:800;font-size:clamp(34px,6vw,60px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.start h1 em{font-style:normal;color:var(--cobalt)}
.start .lead{font-size:clamp(16px,2vw,19px);color:var(--ink2);margin:16px auto 0;max-width:34em;text-wrap:balance}
.onebox{position:relative;margin:34px auto 0;text-align:left}
.onebox form{display:flex;gap:8px;background:var(--sheet);border:1.5px solid var(--rule2);border-radius:18px;padding:8px;box-shadow:var(--shadow-lg);transition:border-color .15s}
.onebox form:focus-within{border-color:var(--cobalt)}
.onebox input,.onebox textarea{flex:1;min-width:0;border:0;background:transparent;font-size:18px;padding:10px 12px;outline:none;color:var(--ink);resize:none}
.onebox textarea{min-height:84px;line-height:1.4}
.onebox .btn{flex:none;align-self:flex-end}
.ask-says{margin:12px 4px 0;font-size:14.5px;color:var(--ink2);min-height:22px}
.sugg{position:absolute;left:0;right:0;top:calc(100% - 26px);z-index:10;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;list-style:none;margin:0}
.sugg li button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px}
.sugg li button:hover,.sugg li button[aria-selected="true"]{background:var(--cobalt-lo)}
.sugg b{font-weight:600}.sugg span{font-size:13px;color:var(--ink3)}
.start .alt{margin-top:28px;font-size:14px;color:var(--ink3)}
.start .alt button{border:0;background:none;color:var(--cobalt);font-weight:600;padding:4px;text-decoration:underline;text-underline-offset:3px}
.reading{margin:30px auto 0;width:min(420px,100%);text-align:left}

/* ---------- what I know ---------- */
.know{padding-block:32px 120px;display:grid;gap:20px;max-width:1000px}
.know-h h1{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.05}
.know-h p{color:var(--ink2);margin:8px 0 0}
.know-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.kcard{padding:24px}
.kname{display:flex;align-items:center;gap:14px}
.kname .sw{width:44px;height:44px;border-radius:12px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);position:relative;overflow:hidden}
.kname .sw input{position:absolute;inset:-8px;width:60px;height:60px;opacity:0;cursor:pointer}
.kname h2{font-size:26px;font-weight:800;line-height:1.1}
.kname p{margin:2px 0 0;color:var(--ink2);font-size:14.5px}
.stars{color:#E0A100;letter-spacing:1px}
.quotes{margin:18px 0 0;display:grid;gap:10px}
.quotes q{display:block;font-family:"DM Serif Display",Georgia,serif;font-size:19px;line-height:1.3;color:var(--ink)}
.quotes small{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.learned{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink2);font-size:14.5px}
.learned li{padding-left:16px;position:relative}.learned li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--kraft)}
.fields{display:grid;gap:14px}
.field label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:5px;font-weight:600}
.field input,.field textarea{width:100%;border:1px solid var(--rule2);background:var(--paper);border-radius:10px;padding:10px 12px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cobalt)}
.field .hint{font-size:12px;color:var(--ink3);margin-top:4px}.field .hint.bad{color:#B3261E}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--ink2);border:1px solid var(--rule)}
.pill.ok{background:var(--ok-lo);color:var(--ok);border-color:transparent}.pill.in{background:var(--cobalt-lo);color:var(--cobalt);border-color:transparent}.pill.k{background:var(--kraft-lo);color:var(--kraft);border-color:transparent}
.photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.photo{position:relative;flex:none;width:96px;height:72px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--paper);padding:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.off img{opacity:.3;filter:grayscale(1)}
.photo.on{border-color:var(--cobalt)}
.photo span{position:absolute;right:4px;bottom:4px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.65);color:#fff;border-radius:6px;padding:1px 6px}
.know-go{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- home: one input + coming up ---------- */
.home{padding-block:28px 120px;display:grid;gap:28px}
.hero-ask{padding:26px}
.hero-ask h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.05;text-wrap:balance}
.hero-ask .onebox{margin-top:18px}
.ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{border:1px solid var(--rule2);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink2);text-align:left;line-height:1.35}
.chip:hover{border-color:var(--cobalt);color:var(--cobalt)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sec-h h2{font-size:22px;font-weight:800}
.sec-h p{margin:2px 0 0;color:var(--ink3);font-size:14px}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.moment{display:flex;flex-direction:column;gap:12px;padding:16px;text-align:left;border:0;width:100%}
.moment .when{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--kraft)}
.moment .when.now{color:var(--ok)}
.moment .when i{width:7px;height:7px;border-radius:50%;background:currentColor}
.moment h3{font-size:19px;font-weight:800;line-height:1.15}
.moment p{margin:0;color:var(--ink2);font-size:14px}
.moment .nums{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--ink3);margin-top:auto}
.moment .nums b{color:var(--ink);font-family:var(--f-display);font-size:15px}
.camps{display:grid;gap:8px}
.camprow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 18px;text-decoration:none;color:var(--ink)}
.camprow b{font-weight:600}
.camprow span{font-size:13px;color:var(--ink3)}

/* ---------- the postcard, scaled: one font size moves the whole card ---------- */
.cbox{container-type:inline-size;position:relative;border-radius:5px;overflow:hidden;box-shadow:0 12px 26px -16px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);background:#E9E7E0}
.cbox .dsc{width:100%!important;height:auto!important;aspect-ratio:9.25/6.25;font-size:calc(100cqw / 92.5)!important}
.cbox .dsc.s4{aspect-ratio:6.25/4.25}
.cbox .dsc.s11{aspect-ratio:11.25/6.25;font-size:calc(100cqw / 112.5)!important}
.cbox.skel{aspect-ratio:9.25/6.25;background:linear-gradient(100deg,var(--rule) 30%,color-mix(in srgb,var(--rule) 40%,var(--sheet)) 50%,var(--rule) 70%);background-size:300% 100%;animation:shimmer 1.3s ease-in-out infinite;box-shadow:none}
.cbox.skel.s4{aspect-ratio:6.25/4.25}.cbox.skel.s11{aspect-ratio:11.25/6.25}
.cbox.skel::after{content:"Writing…";position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink3)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.cbox.rewrite::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:300% 100%;animation:shimmer 1.1s ease-in-out infinite}
.cbox.fresh{animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- campaign ---------- */
.campaign{padding-block:22px 150px;display:grid;gap:18px}
.c-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:end}
.c-head h1{font-size:clamp(24px,3vw,36px);font-weight:800;line-height:1.06;text-wrap:balance;margin-top:4px}
.facts{display:flex;gap:28px;flex-wrap:wrap}
.fact b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.fact span{font-size:12.5px;color:var(--ink3)}
.askbox{padding:14px}
.askbox form{display:flex;gap:8px;align-items:flex-end;border:1.5px solid var(--rule2);border-radius:14px;padding:6px 6px 6px 14px;background:var(--paper)}
.askbox form:focus-within{border-color:var(--cobalt)}
.askbox textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;font-size:16px;min-height:44px;max-height:160px;padding:9px 0;outline:none;line-height:1.4}
.send{width:44px;height:44px;border-radius:11px;border:0;background:var(--cobalt);color:#fff;display:grid;place-items:center;flex:none}
.send svg{width:18px;height:18px}
.said{display:flex;gap:10px;align-items:flex-start;margin:12px 4px 2px;font-size:14.5px;color:var(--ink2)}
.said .av{width:22px;height:22px;border-radius:6px;background:var(--cobalt);flex:none;display:grid;place-items:center;color:#fff;margin-top:1px}
.said .av svg{width:12px;height:12px}
.said p{margin:0}
.planrow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;align-items:center}
.pchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule2);background:var(--sheet);border-radius:999px;padding:6px 6px 6px 12px;font-size:13.5px;font-weight:600;color:var(--ink);max-width:100%}
.pchip.kind-area,.pchip.kind-count{background:var(--cobalt-lo);border-color:transparent;color:var(--cobalt)}
.pchip.kind-offer{background:var(--kraft-lo);border-color:transparent;color:var(--kraft)}
.pchip.kind-tone,.pchip.kind-voice{background:var(--ok-lo);border-color:transparent;color:var(--ok)}
.pchip.picked{border-style:dashed;border-color:currentColor}
.pchip.off{background:transparent;color:var(--ink3);border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px}
.pchip > button.t{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.pchip > button.x{border:0;background:transparent;color:inherit;opacity:.6;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0}
.pchip > button.x:hover{opacity:1;background:rgba(0,0,0,.06)}
.pchip input{border:0;background:transparent;font:inherit;color:inherit;outline:none;width:16ch;min-width:6ch}
.pchip small{font-weight:500;opacity:.8}
.plan-sep{width:1px;height:20px;background:var(--rule2);margin:0 2px}
.aud{margin:10px 4px 0;font-size:13.5px;color:var(--ink3)}
.also{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.also > span{font-size:12.5px;color:var(--ink3);font-weight:600}
.also button{border:1px dashed var(--rule2);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink2);text-align:left}
.also button:hover{border-color:var(--cobalt);color:var(--cobalt);border-style:solid}
.source{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 18px;font-size:14px;color:var(--ink2)}
.source b{color:var(--ink)}
.source .grow{flex:1;min-width:200px}
.wall{padding:20px}
.wall-h{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.wall-h h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--rule2);background:transparent;border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--ink2)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px 18px}
.tile{background:transparent;border:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px;content-visibility:auto;contain-intrinsic-size:auto 220px;border-radius:6px}
.tile .cbox{transition:transform .25s ease,box-shadow .25s ease}
.tile:hover .cbox{transform:translateY(-3px) rotate(-.35deg);box-shadow:0 20px 34px -20px rgba(0,0,0,.6)}
.tile .addr{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);display:flex;justify-content:space-between;gap:8px;min-width:0}
.tile .addr b{color:var(--ink2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.out{opacity:.4}
.tile.out .addr b{text-decoration:line-through}
.more{margin:22px auto 0;display:flex}
.empty{padding:40px;text-align:center;color:var(--ink3)}

/* ---------- the Mail bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--sheet) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:20px;min-height:78px;padding-block:10px}
.bar-sum{display:flex;gap:26px;font-size:12.5px;color:var(--ink3);min-width:0}
.bar-sum b{display:block;color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-act{margin-left:auto;display:flex;gap:10px;align-items:center}
.whenbtn{border:0;background:transparent;padding:0;text-align:left;font:inherit;font-size:12.5px;color:var(--ink3)}
.whenbtn b{display:block;color:var(--cobalt);font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.whenbtn:hover b{text-decoration:underline;text-underline-offset:4px}
.field label input[type=radio]{margin-right:8px;accent-color:var(--cobalt)}
.field select,.field input[type=date]{width:100%;border:1px solid var(--rule2);background:var(--paper);border-radius:10px;padding:10px 12px;color:var(--ink)}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;z-index:40;background:rgba(10,12,18,.62);display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));animation:fade .15s ease-out}
@keyframes fade{from{opacity:0}}
.vbox{background:var(--sheet);border-radius:20px;width:min(1180px,100%);max-height:calc(100vh - 48px);overflow:auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);box-shadow:var(--shadow-lg);position:relative}
.vcards{padding:26px;background:var(--paper);display:flex;flex-direction:column;gap:14px;justify-content:center}
.flip{perspective:2200px}
.flip-in{position:relative;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip.back .flip-in{transform:rotateY(180deg)}
.flip .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .face.b{position:absolute;inset:0;transform:rotateY(180deg)}
.flipbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg2{display:inline-flex;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:3px}
.seg2 button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--ink2)}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.vside{padding:24px;display:flex;flex-direction:column;gap:16px}
.vside h2{font-size:22px;font-weight:800;line-height:1.15}
.reasons{list-style:none;margin:0;padding:0;display:grid;gap:0}
.reasons li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--rule)}
.reasons li span{color:var(--ink3)}
.vrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--sheet);box-shadow:var(--shadow);display:grid;place-items:center;z-index:2;font-size:20px;line-height:1;color:var(--ink2)}
.confirm{width:min(560px,100%);display:block}
.confirm .vside{gap:14px}
.bill{display:grid;gap:0;font-variant-numeric:tabular-nums}
.bill div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.bill div.t{border-bottom:0;font-weight:800;font-family:var(--f-display);font-size:20px}
.blocked{background:var(--warn-lo);color:var(--warn);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600}
.okbox{background:var(--ok-lo);color:var(--ok);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600}
.progress{height:10px;border-radius:6px;background:var(--rule);overflow:hidden}
.progress i{display:block;height:100%;background:var(--cobalt);width:0;transition:width .4s ease}

/* ---------- results ---------- */
.res{padding-block:24px 80px;display:grid;gap:18px}
.banner{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:12px;background:var(--kraft-lo);color:var(--kraft);font-size:14px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.kpi{padding:18px}
.kpi b{display:block;font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:13px;color:var(--ink3)}
.kpi.win{background:var(--ok-lo)}.kpi.win b{color:var(--ok)}
.track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.track div{height:10px;border-radius:5px;background:var(--rule)}
.track div.on{background:var(--cobalt)}
.track-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px;font-size:12.5px;color:var(--ink3)}
.track-l b{display:block;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.log-row{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--rule);font-size:14px}
.log-row:first-child{border-top:0}
.log-row .when{font-family:var(--f-mono);font-size:12px;color:var(--ink3)}

/* ---------- redeem ---------- */
.redeem{max-width:520px;margin:0 auto;padding-block:28px 60px;display:grid;gap:18px}
.redeem input.code{font-family:var(--f-mono);font-size:28px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:16px}
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:12px;font-size:14px;box-shadow:var(--shadow-lg);max-width:calc(100vw - 32px)}
table.admin{width:100%;border-collapse:collapse;font-size:14px}
table.admin th,table.admin td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
table.admin th{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:500}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .nav{display:none}
  .know-grid{grid-template-columns:1fr}
  .vbox{grid-template-columns:1fr}
  .c-head{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:15px}
  .who .tag{display:none}
  .top-in{gap:10px}
  .onebox form{flex-direction:column;align-items:stretch}
  .onebox .btn{width:100%}
  .facts{gap:18px}.fact b{font-size:21px}
  .cards{grid-template-columns:1fr}
  .bar-in{flex-wrap:wrap;gap:10px;min-height:0}
  .bar-sum{gap:16px;width:100%}
  .bar-sum > div:nth-child(3){display:none}
  .bar-act{width:100%;margin-left:0}
  .bar-act .btn{flex:1}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .log-row{grid-template-columns:1fr auto}.log-row .when{grid-column:1/-1}
  .reasons li{grid-template-columns:1fr;gap:2px}
  .vcards,.vside{padding:16px}
  .viewer{padding:10px;place-items:end center}
  .vbox{max-height:calc(100vh - 20px)}
  .feed{grid-template-columns:1fr}
  .camprow{grid-template-columns:1fr auto}
  .camprow span:last-child{display:none}
  .wall{padding:14px}
  .pchip > button.t{max-width:26ch}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.flip-in{transition:none}}
.opts{border:0;margin:0;padding:0;display:grid;gap:6px}
.opts legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;padding:0}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;cursor:pointer}
.opt:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-lo)}
.opt.dis{opacity:.55;cursor:not-allowed}
.opt input[type=radio]{margin-top:3px;accent-color:var(--cobalt)}
.opt span{display:grid;gap:2px;flex:1;min-width:0}
.opt b{font-weight:700}.opt em{font-style:normal;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.opt small{color:var(--ink3);font-size:12.5px}
.opt input[type=date],.opt select{margin-top:6px;width:100%;border:1px solid var(--rule2);background:var(--paper);border-radius:10px;padding:8px 10px;color:var(--ink)}

/* ================================================================
   THE QUIET PASS (Tom, 4 Nov 2026: the level of polish of a consumer product a designer made). The cards are the
   hero; the chrome stays white with hairlines, one sans family, sentence case, one accent used sparingly, no glows,
   no gradients, no heavy shadows. Later rules win, so this block is the look.
   ================================================================ */
:root{--paper:#FFFFFF;--sheet:#FFFFFF;--ink:#1F1F1F;--ink2:#555A64;--ink3:#717680;--rule:#EBEBEB;--rule2:#DDDDDD;--cobalt:#2747C9;--cobalt-hi:#1E3AA8;--cobalt-lo:#F1F4FD;
  --f-display:"Figtree","Segoe UI",system-ui,sans-serif;--shadow:none;--shadow-lg:0 8px 28px rgba(0,0,0,.12);--r:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121212;--sheet:#121212;--ink:#F2F2F2;--ink2:#BDBDBD;--ink3:#9A9A9A;--rule:#2A2A2A;--rule2:#3A3A3A;--cobalt:#8CA2FF;--cobalt-hi:#A9B9FF;--cobalt-lo:#1B2240;--shadow-lg:0 8px 28px rgba(0,0,0,.6)}}
body{font-size:15.5px}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.015em}
.top{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
.top-in{height:72px}
.brand{font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--cobalt)}
.brand span:last-child{color:var(--ink)}
.stamp{border-radius:8px;box-shadow:none;width:32px;height:32px}
.nav a{border-radius:999px;font-weight:600;color:var(--ink2)}
.nav a[aria-current="page"]{background:transparent;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.eyebrow{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink3);font-weight:500}
.tag{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;border:0;background:#F4EFE6;color:#7A5A24;border-radius:999px;padding:3px 9px}
@media (prefers-color-scheme:dark){.tag{background:#2C261C;color:#E5C891}}
.panel{box-shadow:none;border:1px solid var(--rule);border-radius:16px}
.btn{border-radius:12px;font-weight:700}
.btn.ghost{border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:#F7F7F7;color:var(--ink);border-color:var(--ink)}
@media (prefers-color-scheme:dark){.btn.ghost:hover{background:#1E1E1E}}
.linkbtn{background:transparent;border-color:var(--rule2);color:var(--ink)}
.linkbtn:hover{border-color:var(--ink);color:var(--ink)}
.chip{border-color:var(--rule2);color:var(--ink);background:var(--paper)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
/* the one input: a pill, like a search bar */
.onebox form{border-radius:40px;border:1px solid var(--rule2);box-shadow:0 3px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);padding:8px 8px 8px 22px;align-items:center}
.onebox form:focus-within{border-color:var(--rule2);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.onebox input,.onebox textarea{font-size:17px;padding:10px 0}
.onebox textarea{min-height:48px;max-height:140px;padding-top:13px}
.onebox .btn{border-radius:999px;align-self:center;padding:12px 22px}
.hero-ask{padding:8px 0 0;border:0}
.hero-ask h1{font-size:clamp(28px,3.4vw,40px);font-weight:800}
/* rows by meaning */
.sec-h{margin-bottom:14px}
.sec-h h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.sec-h h2 .arr{color:var(--ink3);font-weight:400;margin-left:4px}
.sec-h p{font-size:14.5px}
.feed{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 18px) / 4);grid-template-columns:none;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.feed > *{scroll-snap-align:start}
.moment{padding:0;border:0;background:transparent;gap:8px;cursor:default}
.moment .cbox{border-radius:14px}
.moment h3{font-size:16px;font-weight:700;letter-spacing:0;margin-top:2px}
.moment p{font-size:14px;color:var(--ink3)}
.moment .when{position:absolute;left:10px;top:10px;z-index:3;background:rgba(255,255,255,.94);color:#1F1F1F;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}
.moment .when i{display:none}
.moment .when.now{color:#1E7A4E}
.moment .pic{position:relative}
.moment .nums{font-size:14px;color:var(--ink2)}
.moment .nums b{font-family:var(--f-body);font-size:14px;font-weight:600}
.camprow{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:16px 4px}
/* cards: the hero */
.cbox{border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.tile .cbox{transition:transform .18s ease,box-shadow .18s ease}
.tile:hover .cbox{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 10px 22px -12px rgba(0,0,0,.35)}
.tile .addr{font-family:var(--f-body);font-size:13.5px;color:var(--ink3)}
.tile .addr b{color:var(--ink);font-weight:600}
.cbox.fresh{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cbox.skel{background:#F2F2F2;animation:shimmer 1.4s ease-in-out infinite;background-image:linear-gradient(100deg,#F2F2F2 30%,#FAFAFA 50%,#F2F2F2 70%);background-size:300% 100%}
@media (prefers-color-scheme:dark){.cbox.skel{background-image:linear-gradient(100deg,#1D1D1D 30%,#262626 50%,#1D1D1D 70%)}}
.cbox.skel::after{font-family:var(--f-body);letter-spacing:0;font-size:12.5px}
.wall{padding:0;border:0}
.wall-h h2{font-size:22px;font-weight:700}
.filters button{border-color:var(--rule2);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* the campaign desk */
.campaign{gap:22px}
.c-head h1{font-size:clamp(26px,3vw,34px);font-weight:800}
.fact b{font-family:var(--f-body);font-weight:700;font-size:22px}
.askbox{padding:0;border:0}
.askbox form{border-radius:40px;background:var(--paper);border:1px solid var(--rule2);box-shadow:0 3px 12px rgba(0,0,0,.08);padding:6px 6px 6px 22px;align-items:center}
.askbox form:focus-within{border-color:var(--rule2);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.askbox textarea{font-size:16px}
.send{border-radius:50%;width:46px;height:46px}
.said .av{border-radius:50%}
.pchip{background:var(--paper);border:1px solid var(--rule2);color:var(--ink);font-weight:600}
.pchip.kind-area,.pchip.kind-count,.pchip.kind-offer,.pchip.kind-tone,.pchip.kind-voice{background:var(--paper);border-color:var(--rule2);color:var(--ink)}
.pchip.picked{border-style:dashed;border-color:var(--ink3)}
.pchip.off{color:var(--ink3);border-style:dashed}
.also button{border-style:solid;border-color:var(--rule);background:#F7F7F7;color:var(--ink)}
@media (prefers-color-scheme:dark){.also button{background:#1D1D1D}}
.also button:hover{border-color:var(--ink);color:var(--ink)}
.source{border-radius:16px}
.bar{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--rule)}
.bar-sum b{font-family:var(--f-body);font-weight:700;font-size:18px}
.whenbtn b{font-family:var(--f-body);font-weight:700;font-size:18px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:5px}
/* dialogs */
.viewer{background:rgba(0,0,0,.45)}
.vbox{border-radius:20px;box-shadow:var(--shadow-lg)}
.vcards{background:#F7F7F7}
@media (prefers-color-scheme:dark){.vcards{background:#1A1A1A}}
.close{box-shadow:none;border:1px solid var(--rule)}
.vside h2{font-weight:700}
/* results */
.kpi{border-radius:16px}
.kpi b{font-family:var(--f-body);font-weight:700;font-size:28px}
.kpi.win{background:var(--paper)}.kpi.win b{color:var(--ink)}
.banner{background:#F7F7F7;color:var(--ink2);border:1px solid var(--rule)}
@media (prefers-color-scheme:dark){.banner{background:#1A1A1A}}
.okbox{background:#EEF7F2;color:#1E5E3E}
.blocked{background:#FFF6E8;color:#7A4B0A}
@media (prefers-color-scheme:dark){.okbox{background:#16301F;color:#8FD9B0}.blocked{background:#2E2414;color:#E8B062}}
.quotes q{font-family:var(--f-body);font-size:17px;font-weight:500}
.reasons li{font-size:14px}
@media (max-width:1100px){.feed{grid-auto-columns:calc((100% - 2 * 18px) / 3)}}
@media (max-width:760px){.feed{grid-auto-columns:78%}}

/* ---- its own world: paper and post (Tom: Airbnb is the bar for restraint, not a layout to copy) ----
   A warm bond-paper ground, white sheets, postal-blue ink for the one action. The one input is a label you write
   on, not a search pill: square-ish corners, an ink rule, a small stamp mark at its edge. */
:root{--paper:#FAF8F3;--sheet:#FFFFFF;--rule:#E8E4DA;--rule2:#D8D3C6;--cobalt:#1F43B8;--cobalt-hi:#17358F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#141414;--sheet:#1B1B1B;--rule:#2B2B2B;--rule2:#3A3A3A}}
.top{background:var(--paper)}
.panel,.source{background:var(--sheet)}
.onebox form,.askbox form{border-radius:14px;border:1.5px solid var(--ink);box-shadow:none;background:var(--sheet);padding:6px 6px 6px 18px;position:relative}
.onebox form:focus-within,.askbox form:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-lo)}
.onebox .btn,.send{border-radius:10px}
.send{width:44px;height:44px}
.onebox form::before,.askbox form::before{content:"";position:absolute;right:-1px;top:-1px;width:0;height:0}
.bar{background:var(--sheet)}
.vcards{background:var(--paper)}
.moment .when{background:var(--sheet);border:1px solid var(--rule)}
/* grids never grow past the screen: a scrolling row scrolls inside itself */
.home > *,.campaign > *,.res > *,.know > *,.know-grid > *{min-width:0}
.feed{width:100%}
.chip,.also button{max-width:100%;white-space:normal}
.linkbtn{white-space:nowrap}
@media (max-width:560px){
  .who b{display:none}
  .top-in{height:64px}
  .hero-ask h1{font-size:28px}
  .onebox form,.askbox form{padding:8px}
  .onebox textarea{padding:8px 6px}
  .ex{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .ex::-webkit-scrollbar{display:none}
  .ex .chip{white-space:nowrap;flex:none}
  .moment .nums{flex-wrap:wrap}
}
.moment .when{position:static;background:none;border:0;padding:0;margin:4px 0 0;font-size:13.5px;font-weight:600;color:var(--kraft)}
.moment .when.now{color:#1E7A4E}
@media (prefers-color-scheme:dark){.moment .when.now{color:#5CC48F}}
@media (max-width:560px){.bar-act .btn svg{display:none}.bar-act .btn{white-space:nowrap;padding-inline:14px}}
/* the campaign screen: the cards come first */
.campaign{gap:16px}
.c-head{grid-template-columns:1fr}
.planrow{margin-top:10px}
.pchip.moreb{background:transparent;border-style:dashed;color:var(--ink2);padding-right:12px}
.aud{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px}
.also{margin-top:6px;gap:6px;font-size:13.5px}
.also > span{font-weight:500}
.also button{background:transparent;border:0;padding:2px 0;color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule2)}
.also button.nexti{color:var(--ink3);font-weight:500;margin-left:6px}
.source{padding:10px 16px;gap:8px 16px;font-size:14px;border:0;background:transparent;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0}
.textbtn{border:0;background:transparent;padding:4px 0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule2)}
.textbtn:hover{text-decoration-color:var(--ink)}
.phrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
.phrow .note{margin-right:4px}
.wall-h{margin-bottom:12px}

/* ---- the spacing pass (Tom, 4 Nov 2026: "spacing and formatting is key"). Same design; every box gets real
   inner padding and every row an even gap, so nothing sits against an edge. One rhythm: 8 · 12 · 16 · 24 · 32. ---- */
.campaign{gap:22px;padding-block:24px 160px}
.c-head{gap:12px 32px}
.askbox{padding:22px 26px 22px;border:1px solid var(--rule);border-radius:20px;background:var(--sheet)}
.said{margin:16px 0 0;gap:12px;line-height:1.5}
.planrow{margin-top:14px;gap:8px}
.aud{margin:12px 0 0;color:var(--ink3);font-size:14px}
.also button.nexti{margin-left:0}
.ex{gap:8px;margin-top:16px}
.also{margin-top:10px;gap:8px 14px;line-height:1.5}
/* the example note is page text, not another box: aligned to the page edge, room above and below */
.source{padding:2px 0;gap:12px 24px;border:0;border-radius:0;background:transparent}
.phrow{gap:10px}
.wall{padding:24px 28px 28px;border:1px solid var(--rule);border-radius:20px;background:var(--sheet)}
.wall-h{margin-bottom:18px;gap:16px 24px}
.wall-h p{margin-top:6px}
.filters{gap:8px}
.filters button{padding:7px 14px;font-size:13.5px}
.cards{gap:28px 24px}
.tile{gap:12px}
.home{gap:32px}
.sec-h{margin-bottom:16px}
.sec-h p{margin-top:6px}
.kcard{padding:28px}
.kpis{gap:16px}
.kpi{padding:22px 24px}
.res{gap:24px}
.bar-in{gap:24px;padding-block:14px}
@media (max-width:560px){
  .campaign{gap:18px;padding-block:20px 190px}
  .askbox{padding:18px 18px 18px}
  .source{padding:0}
  .wall{padding:18px}
  .cards{gap:22px}
  .kcard{padding:20px}
  .kpi{padding:16px 18px}
  .bar-in{gap:12px;padding-block:12px}
  .also{flex-direction:column;align-items:flex-start;gap:6px}
}
/* Safari draws a date box at its own width and centres the date: hold it inside its option, text at the left. */
.opt span{min-width:0}
.opt input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:44px;text-align:left;line-height:1.3}
.opt input[type=date]::-webkit-date-and-time-value{text-align:left}

/* ---------- what I understood, the QR destination, the empty wall (AI-first pass) ---------- */
.kprof{margin-top:18px;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);display:grid;gap:14px}
.kprof .eyebrow{margin:0}
.field select{width:100%;border:1px solid var(--rule2);background:var(--paper);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit}
.row2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:8px}
.qrf{display:grid;gap:8px}.qrf > label{margin-bottom:0}.qrf .hint{margin-top:0}.qrf .hint.bad{color:#B3261E}
.qrlab label{font-size:12.5px;color:var(--ink3);font-weight:600}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.emptyrow{grid-column:1 / -1;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;border:1px dashed var(--rule2);border-radius:12px;background:var(--paper)}
.emptyrow p{margin:0;max-width:62ch;color:var(--ink2)}
.tile.ex{cursor:default}
/* A long name in a tile's caption shortens; it never widens the wall past the screen. */
.cards > .tile{min-width:0}
.tile .addr b{flex:1 1 auto;min-width:0}
.tile .addr > span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* Safari draws a turned card's tilted pieces (the offer badge, the headline) through its back. Hide the side that is
   away from you at the halfway point of the turn, in every browser, so only one side is ever visible. */
.flip .face{transition:visibility 0s linear .3s}
.flip.back .face.f,.flip:not(.back) .face.b{visibility:hidden}
@media (prefers-reduced-motion:reduce){.flip .face{transition:none}}
.also button small{color:var(--ink3);font-size:12px;margin-left:4px;white-space:nowrap}
.printed .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.printed .pgrid img{width:100%;height:auto;border-radius:10px;border:1px solid var(--rule);background:#fff}
@media (max-width:600px){#who:has(#saveme) #mylink,#who:has(#signout) #mylink{display:none}#who b{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#who .linkbtn{white-space:nowrap}}
.devcode{background:var(--paper2,#F4F3EF);border-radius:10px;padding:8px 12px}
.kname .sws{display:flex;gap:6px;flex:none}.kname .sw2{width:30px;height:30px;align-self:flex-end;border-radius:9px}.kcols{margin:10px 0 0;font-size:13px}