/* Memna web app (LIFF), S1. Ported from docs/liff-mockup.html (Sunny memo look): warm paper, one focal note per screen,
   pastel state tints (yellow means only "waiting on you"), Mitr for titles and the deadline, Anuphan for the rest. Fonts
   load with display=swap and never block the first paint. */
/* Memna web app (LIFF), Sunny memo: warm paper, one focal note per screen with tape on the home hero only,
   pastel state tints (yellow means only "waiting on you"), Mitr for titles and the deadline, Anuphan for the rest. */
:root,.app{
  --paper:#FFF9EF;--sheet:#FFFEFA;--raised:#FFFDF6;--ink:#25324A;--body:#25324A;--muted:#5B6678;--rule:#E8E1D5;--soft:#F3EDE2;--seg:#F1EADD;
  --primary:#2C62DC;--primary-press:#2053CA;--on-primary:#FFFFFF;--btn2:#E8F0FF;--on-btn2:#2454AC;--btn2-line:#A9C0EE;--quiet:#526887;
  --memo:#FFF2B4;--on-memo:#6C4B00;--memo-fold:#F2DE8C;--cream:#EFECE5;--on-cream:#615D53;--mint:#DDF5E9;--on-mint:#245D4B;--lav:#EFE7FC;--on-lav:#5A488A;
  --sky:#E7F3FE;--on-sky:#295B8C;--sky-fold:#CFE3F7;--peach:#FFEADA;--on-peach:#8A4B22;--peach-fold:#F6D3BA;--done:#E4F4D9;--on-done:#3B6420;--done-fold:#CDE6BC;--plain-fold:#EDE5D6;
  --nav-sel:#2C62DC;--link:var(--primary);--tape:#9CCBF2;--star:#F2B53A;--ontime:#3E9C78;--late:#C2632F;--toast-bg:#25324A;--toast-fg:#FFFFFF;
  --shadow:0 5px 16px rgba(69,79,111,.09);--shadow-focal:0 8px 24px rgba(69,79,111,.12);
  --memo-ink:var(--on-memo);--memo-pale:var(--memo);--memo-edge:var(--memo-fold);--late-soft:var(--peach);--ok-soft:var(--mint);--info:var(--primary);--info-soft:var(--sky);
  --sel:var(--seg);--ctl-line:var(--btn2-line);--btn-line:var(--btn2-line);--on-ok:var(--on-primary);
  --display:'Mitr','Leelawadee UI',Tahoma,sans-serif;--text:'Anuphan','Leelawadee UI',Tahoma,system-ui,sans-serif;
  --r-card:18px;--r-focal:24px;--r-ctl:14px;--r-btn:16px;
}
.app[data-theme="dark"]{--paper:#161D2A;--sheet:#202B3A;--raised:#273447;--ink:#F4F6F9;--body:#F4F6F9;--muted:#B9C8D9;--rule:#394659;--soft:#2A3648;--seg:#273447;
  --primary:#3868D8;--primary-press:#2D59BB;--on-primary:#FFFFFF;--btn2:#2E405C;--on-btn2:#E9F1FF;--btn2-line:#4F6589;--quiet:#C7D6EA;
  --memo:#433A22;--on-memo:#FFE3A5;--memo-fold:#56492A;--cream:#34312B;--on-cream:#E6E0D4;--mint:#203F3A;--on-mint:#B7E8D9;--lav:#38304D;--on-lav:#DEC9FF;
  --sky:#1E364C;--on-sky:#C6E5FF;--sky-fold:#2A4762;--peach:#493323;--on-peach:#FFCDAC;--peach-fold:#5C4130;--done:#26402A;--on-done:#C8EBB4;--done-fold:#33523A;--plain-fold:#2E3B4E;
  --nav-sel:#9ABDFF;--link:#9ABDFF;--tape:#5C86B0;--star:#F2C14E;--ontime:#6FD0A8;--late:#F2A57B;--toast-bg:#F4F6F9;--toast-fg:#161D2A;
  --shadow:0 5px 18px rgba(0,0,0,.20);--shadow-focal:0 8px 24px rgba(0,0,0,.28);color-scheme:dark;}
@media (prefers-color-scheme:dark){.app:not([data-theme="light"]){--paper:#161D2A;--sheet:#202B3A;--raised:#273447;--ink:#F4F6F9;--body:#F4F6F9;--muted:#B9C8D9;--rule:#394659;--soft:#2A3648;--seg:#273447;
  --primary:#3868D8;--primary-press:#2D59BB;--on-primary:#FFFFFF;--btn2:#2E405C;--on-btn2:#E9F1FF;--btn2-line:#4F6589;--quiet:#C7D6EA;
  --memo:#433A22;--on-memo:#FFE3A5;--memo-fold:#56492A;--cream:#34312B;--on-cream:#E6E0D4;--mint:#203F3A;--on-mint:#B7E8D9;--lav:#38304D;--on-lav:#DEC9FF;
  --sky:#1E364C;--on-sky:#C6E5FF;--sky-fold:#2A4762;--peach:#493323;--on-peach:#FFCDAC;--peach-fold:#5C4130;--done:#26402A;--on-done:#C8EBB4;--done-fold:#33523A;--plain-fold:#2E3B4E;
  --nav-sel:#9ABDFF;--link:#9ABDFF;--tape:#5C86B0;--star:#F2C14E;--ontime:#6FD0A8;--late:#F2A57B;--toast-bg:#F4F6F9;--toast-fg:#161D2A;
  --shadow:0 5px 18px rgba(0,0,0,.20);--shadow-focal:0 8px 24px rgba(0,0,0,.28);color-scheme:dark;}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--body);font-family:var(--text);font-size:16px;line-height:1.5}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* app shell */
.app [hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0}
.app{position:relative;height:100svh;min-height:100vh;overflow:hidden;background:var(--paper);color:var(--body);display:flex;flex-direction:column}
.chrome{height:44px;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 6px 0 16px;background:var(--sheet);border-bottom:1px solid var(--rule)}
.chrome b{flex:1;font-size:15px;color:var(--ink);font-weight:600}
.chrome .x{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;color:var(--muted)}
.app.in-line .chrome{display:none}
.screen{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px 104px;scroll-padding-bottom:104px}
.tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);background:var(--sheet);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
.tabs button:focus-visible{outline-offset:-3px}
.tabs button{border:0;background:transparent;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:14px;font-weight:500;color:var(--muted)}
.tabs .pi{width:44px;height:28px;display:grid;place-items:center}
.tabs .i{width:24px;height:24px;stroke-width:2}
.tabs button[aria-current="page"]{color:var(--nav-sel);font-weight:700}
.tabs button[aria-current="page"] .i{stroke-width:2.4;fill:color-mix(in srgb,currentColor 18%,transparent)}

/* type */
.hello{display:flex;align-items:flex-start;gap:12px;margin:-4px 0 12px}
.hello .hx{flex:1;min-width:0}
.hello h2{font-family:var(--display);font-weight:600;font-size:26px;line-height:34px;color:var(--ink);margin:0}
.hello .d{margin:2px 0 0;font-size:16px;font-weight:600;color:var(--ink)}
.hello .u{display:flex;align-items:center;margin:-6px 0 -12px;color:var(--muted);font-size:14px;font-weight:500}
.hello img{width:68px;height:68px;flex:none;transform:rotate(5deg) scale(1.35);transform-origin:50% 70%;margin-top:2px}
.ttl{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.ttl h2{flex:1;font-family:var(--display);font-weight:600;font-size:26px;line-height:34px;color:var(--ink);margin:0}
.ttl .upd{display:block;font-family:var(--text);font-size:14px;line-height:21px;color:var(--muted);font-weight:500}
.ttl .mas{width:44px;height:44px;transform:rotate(5deg) scale(1.35);transform-origin:50% 70%}
.ttl .mas.sm{width:40px;height:40px}
.ttl .mas.big{width:60px;height:60px;margin:-6px 0 -6px}
.sec{font-family:var(--text);font-size:18px;line-height:26px;font-weight:600;color:var(--ink);margin:24px 0 10px;display:flex;justify-content:space-between;align-items:center}
.sec small{font-family:var(--text);font-weight:500;color:var(--muted);font-size:14px}
.muted{color:var(--muted);font-size:14px}
.iconbtn{border:0;background:transparent;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.iconbtn .i{width:18px;height:18px}
@media (hover:hover){.iconbtn:hover{background:var(--soft)}}

/* focal note: the one big thing on a screen */
.focal{position:relative;border-radius:var(--r-focal);padding:20px;margin:0 0 8px;background:var(--sheet);box-shadow:var(--shadow-focal);--tone:var(--muted);--fold:var(--plain-fold)}
.focal.wait{background:var(--memo);--tone:var(--on-memo);--fold:var(--memo-fold)}
.focal.late{background:var(--peach);--tone:var(--on-peach);--fold:var(--peach-fold)}
.focal.work{background:var(--sky);--tone:var(--on-sky);--fold:var(--sky-fold)}
.focal.done{background:var(--done);--tone:var(--on-done);--fold:var(--done-fold)}
.focal.note{border-top-right-radius:6px}
.focal.note::before{content:"";position:absolute;top:-7px;left:26px;width:32px;height:15px;background:var(--tape);opacity:.9;border-radius:2px;transform:rotate(-6deg)}
/* the torn edge cuts the note's own shadow, so the hero's wrapper casts it (filter runs before clip-path) */
.hero{filter:drop-shadow(0 8px 12px rgba(69,79,111,.13));margin:0 0 6px}
.app[data-theme="dark"] .hero{filter:drop-shadow(0 8px 14px rgba(0,0,0,.30))}
.hero .focal{box-shadow:none;margin:0;padding:18px 20px 24px;border-bottom-left-radius:0;border-bottom-right-radius:0;
  clip-path:polygon(0 -24px,100% -24px,100% calc(100% - 6px),94% 100%,88% calc(100% - 5px),81% calc(100% - 1px),74% calc(100% - 6px),66% 100%,59% calc(100% - 4px),51% calc(100% - 1px),44% calc(100% - 6px),36% calc(100% - 2px),28% calc(100% - 5px),20% 100%,13% calc(100% - 4px),6% calc(100% - 1px),0 calc(100% - 5px))}
.hero .focal .tchip{background:var(--fold)}
.hero .focal .ft{margin-top:10px}
.hero .focal .fg{margin:0 0 10px}
.hero .focal .fd{font-weight:700}
.hero .focal .fr{margin:0 0 14px}
.hero .btn.p .i{width:20px;height:20px;margin-right:-4px}
.focal.note::after{content:"";position:absolute;top:0;right:0;width:30px;height:30px;background:linear-gradient(225deg,var(--paper) 50%,var(--fold) 50%);border-bottom-left-radius:10px;box-shadow:-2px 2px 4px rgba(69,79,111,.10)}
.focal .open{display:block;width:100%;border:0;background:transparent;text-align:left;padding:0;color:inherit}
.focal .open:focus-visible{outline-offset:4px;border-radius:8px}
.focal .tchip{background:rgba(255,255,255,.7)}
.app[data-theme="dark"] .focal .tchip{background:rgba(0,0,0,.22)}
.focal .ft{display:block;font-size:22px;line-height:30px;font-weight:700;color:var(--ink);margin:10px 0 0;overflow-wrap:break-word}
.focal .fg{display:block;font-size:14px;line-height:21px;color:var(--muted);font-weight:500;margin:2px 0 12px}
.focal .fl{display:block;font-size:14px;font-weight:600;color:var(--tone)}
.focal .fd{display:block;font-family:var(--display);font-size:32px;line-height:40px;font-weight:700;color:var(--ink)}
.focal .fr{display:block;font-size:16px;font-weight:600;color:var(--tone);margin:0 0 16px}
.focal .act{padding:0}
.focal .fm{position:absolute;top:18px;right:16px;width:56px;height:56px;transform:rotate(6deg) scale(1.35);transform-origin:50% 70%;pointer-events:none}
.focal .btn:not(.p):not(.ok):not(.q):not(.warn){background:color-mix(in srgb,var(--sheet) 80%,transparent)}

/* topic tiles (home) */
.hero + .sec{margin-top:14px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.topic{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0;border-radius:var(--r-card);padding:11px 14px 10px;min-height:78px;background:var(--sheet);box-shadow:var(--shadow);color:var(--ink);--tt:var(--muted)}
.topic .lb{font-size:15px;line-height:21px;font-weight:600;color:var(--ink);padding-right:4px}
.topic b{font-family:var(--text);font-weight:700;font-size:26px;line-height:34px;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.topic .ib{position:absolute;right:12px;bottom:12px;display:grid;color:var(--tt)}
.topic .ib .i{width:26px;height:26px;stroke-width:2}
.topic.todo{background:var(--sky);--tt:var(--on-sky)} .topic.wait{background:var(--memo);--tt:var(--on-memo)}
.topic.late{background:var(--peach);--tt:var(--on-peach)} .topic.changed{background:var(--lav);--tt:var(--on-lav)}
.topic.req{background:var(--mint);--tt:var(--on-mint)} .topic.open{background:var(--cream);--tt:var(--on-cream)}
.topic:not(.on) b{color:var(--tt)}


/* task cards (topic pages) */
.card{background:var(--sheet);border-radius:var(--r-card);margin:0 0 12px;overflow:hidden;box-shadow:var(--shadow)}
.card .open:focus-visible,.item:focus-visible,.menu button:focus-visible,.crow:focus-visible{outline-offset:-3px}
.card .open{display:block;width:100%;border:0;background:transparent;text-align:left;padding:16px 16px 12px;color:inherit}
.card .row1{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px}
.card .t{font-size:18px;line-height:26px;font-weight:700;color:var(--ink);display:block}
.card .when{white-space:nowrap;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.card .when.late{color:var(--on-peach)}
.card .g{font-size:14px;color:var(--muted);font-weight:500}
.card .act{padding:0 16px 16px}
.card.memo{background:var(--memo)}

/* list rows */
.list{background:var(--sheet);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.item{display:flex;align-items:center;gap:8px;width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;text-align:left;padding:12px 10px 12px 16px;min-height:64px;color:inherit}
.item:last-child{border-bottom:0}
.item .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ic .i,.tchip .i{width:16px;height:16px;stroke-width:2.4}
.item .nm{font-weight:600;color:var(--ink);font-size:16px;line-height:22px}
.item .tl{display:flex;align-items:center;gap:6px}
.item .tm{font-size:14px;line-height:21px;font-weight:600;color:var(--muted)}
.item .tm.late{color:var(--on-peach)}
.item .star{background:transparent;padding:0;margin:0;color:var(--star)}
.item .star .i{width:16px;height:16px;fill:var(--star);stroke:var(--star)}
.item .sb{font-size:14px;line-height:21px;color:var(--muted)}
.item .go{color:var(--muted);width:20px;height:20px}
/* งานทั้งหมด by time (Phu 2026-10-30: the GPT look): a tinted header strip with icon and count over each section's rows */
.grp{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin:0 0 14px;--gb:var(--soft);--gt:var(--ink)}
.grp .list{box-shadow:none;border-radius:0}
.ghd{display:flex;align-items:center;gap:10px;margin:0;padding:8px 14px;background:var(--gb);color:var(--gt);font-size:16px;line-height:22px;font-weight:700}
.ghd small{margin-left:auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ghd .gi{display:grid;color:var(--gt);flex:none}
.ghd .gi .i{width:22px;height:22px}
.grp.lav{--gb:var(--lav);--gt:var(--on-lav)} .grp.memo{--gb:var(--memo);--gt:var(--on-memo)} .grp.peach{--gb:var(--peach);--gt:var(--on-peach)}
.grp.sky{--gb:var(--sky);--gt:var(--on-sky)} .grp.mint{--gb:var(--mint);--gt:var(--on-mint)} .grp.done{--gb:var(--done);--gt:var(--on-done)} .grp.cream{--gb:var(--cream);--gt:var(--on-cream)}
.item .sb .new{color:var(--on-lav);font-weight:600}
.ic.wait,.ic.take{background:var(--memo);color:var(--on-memo)} .ic.late{background:var(--peach);color:var(--on-peach)} .ic.work{background:var(--mint);color:var(--on-mint)}
.ic.done{background:var(--done);color:var(--on-done)} .ic.req,.ic.open,.ic.cancel,.ic.closed{background:var(--soft);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chips button{position:relative;border:0;background:var(--soft);border-radius:999px;min-height:36px;padding:0 14px;font-size:14px;font-weight:600;color:var(--muted)}
.chips button::after{content:"";position:absolute;inset:-4px 0}
.chips button[aria-pressed="true"]{background:var(--btn2);color:var(--on-btn2);border-color:var(--btn2-line)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--seg);border-radius:var(--r-ctl);padding:4px;margin:0 0 14px}
.seg button{border:0;background:transparent;min-height:40px;border-radius:11px;font-size:15px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--sheet);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(69,79,111,.18)}
.pick{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.chips .pick{margin:0 0 0 auto;flex:0 1 auto}
.chips select{min-height:44px;border:0;background:transparent;padding:0 4px;color:var(--link);font-size:14px;font-weight:600;width:auto;max-width:100%}
.pick label{font-size:14px;color:var(--muted)}
.pick select{flex:1;min-height:44px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--sheet);padding:0 10px;color:var(--ink)}

/* buttons: primary filled blue, secondary pale blue, quiet text */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0 16px;border-radius:var(--r-ctl);border:0;background:var(--btn2);font-weight:600;font-size:15px;color:var(--on-btn2)}
.btn.p,.btn.ok{border:0;min-height:56px;border-radius:var(--r-btn);background:var(--primary);color:var(--on-primary);font-size:17px;font-weight:700;box-shadow:0 4px 12px rgba(44,98,220,.28)}
.btn.p .i,.btn.ok .i{width:22px;height:22px}
.btn.q,.btn.warn{border:0;background:transparent;min-height:44px;font-weight:600;font-size:15px;color:var(--quiet);box-shadow:none}
.btn.warn{color:var(--on-peach)}
.sheet .btn.warn{background:var(--peach);min-height:48px;font-size:16px;font-weight:700}
@media (hover:hover){.btn:not([disabled]):not([aria-disabled]):not(.q):not(.warn):hover,.sheet .btn.warn:hover{filter:brightness(.96)}.btn.q:not([aria-disabled]):hover,.tp .btn.warn:not([aria-disabled]):hover{text-decoration:underline}}
.btn.p:active:not([disabled]),.btn.ok:active:not([disabled]){background:var(--primary-press)}
.btn[disabled]{opacity:.55;cursor:default}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stack{display:grid;gap:8px}
.app button{-webkit-tap-highlight-color:transparent;transition:opacity .12s ease,transform .12s cubic-bezier(.22,1,.36,1)}
.app button:active:not([disabled]){opacity:.8}
.app .btn:active:not([disabled]):not([aria-disabled]){transform:scale(.98)}

/* task page */
.tphead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-10px 0 8px}
.tphead .upd{display:flex;align-items:center;color:var(--muted);font-size:14px;font-weight:500}
.back .i{margin-left:-4px;width:22px;height:22px}
.back{display:inline-flex;align-items:center;gap:2px;border:0;background:transparent;color:var(--ink);min-height:44px;min-width:44px;padding:0 8px 0 0;margin:-8px 0 4px;font-size:15px;font-weight:600}
.tphead .back{margin:0}
.tchip{flex:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px 4px 9px;font-size:14px;font-weight:600}
.tchip.wait,.tchip.take{background:var(--memo);color:var(--on-memo)} .tchip.late{background:var(--peach);color:var(--on-peach)} .tchip.work{background:var(--mint);color:var(--on-mint)}
.tchip.done{background:var(--done);color:var(--on-done)} .tchip.req,.tchip.open,.tchip.cancel,.tchip.closed{background:var(--soft);color:var(--ink)}
.focal .tchip.wait,.focal .tchip.take{color:var(--on-memo)}
.tp h2,.card .t,.item .nm{overflow-wrap:break-word;min-width:0}
.tp h2{font-family:var(--text);font-weight:700;font-size:22px;line-height:30px;color:var(--ink);margin:10px 0 16px}
.tp .focal{margin:0 0 20px}
.whenbox{background:transparent;padding:0 64px 0 0;margin:0 0 16px}
.whenbox small{display:block;color:var(--tone);font-size:14px;font-weight:600}
.whenbox b{display:block;font-family:var(--display);font-size:32px;line-height:40px;font-weight:700;color:var(--ink)}
.whenbox span{display:block;font-size:16px;font-weight:500;color:var(--muted)}
.whenbox .wd{color:var(--ink);font-weight:600}
.whenbox.late span{color:var(--on-peach);font-weight:600}
.people{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);padding:2px 16px;margin:0 0 14px}
.person{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--rule);font-size:16px}
.person:last-child{border-bottom:0}
.person .pi{display:grid;color:var(--muted)}
.person small{font-size:16px;color:var(--muted);font-weight:500}
.person b{margin-left:auto;font-weight:600;color:var(--ink);text-align:right}
.notice{background:var(--raised);border-radius:var(--r-ctl);padding:12px 14px;margin:0 0 12px;font-size:16px;box-shadow:inset 0 0 0 1px var(--rule)}
.notice.memo{background:var(--memo);color:var(--on-memo);box-shadow:none}
.focal .notice{background:rgba(255,255,255,.6);box-shadow:none}
.star{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--ink);background:var(--soft);border-radius:999px;padding:2px 10px;margin-left:6px;vertical-align:middle}
.sp{height:10px}
.starbtn{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;color:var(--muted);flex:none}
.starbtn[aria-pressed="true"]{color:#B07A0E}
.starbtn[aria-pressed="true"] .i{fill:var(--star)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.quick button{border:1px solid var(--btn2-line);background:var(--btn2);border-radius:999px;min-height:44px;padding:0 14px;font-size:14px;font-weight:600;color:var(--on-btn2)}

/* calendar */
.week{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;gap:2px;margin:0 0 8px;background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);padding:8px 6px}
.wkhead{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 0 8px}
.wkhead span{font-family:var(--text);font-size:18px;color:var(--ink);font-weight:700}
.wkhead span.muted{font-family:var(--text);font-size:14px;font-weight:500;color:var(--muted)}
.day{position:relative;border:0;background:transparent;border-radius:14px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 0;color:var(--ink)}
.day small{font-size:14px;color:var(--muted);font-weight:500}
.day b{font-family:var(--text);font-size:18px;line-height:24px;color:var(--ink);font-weight:700}
.day .dots{height:8px;display:flex;gap:3px}
.day + .day::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:1px;background:var(--rule)}
.day[aria-pressed="true"]::before,.day[aria-pressed="true"] + .day::before{display:none}
.day .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.day .dots i.wait,.day .dots i.take{background:#E0B73A} .day .dots i.work{background:var(--on-mint)} .day .dots i.late{background:#E58B5A}
.day .dots i.req,.day .dots i.open{background:var(--on-sky)}
.day[aria-pressed="true"]{background:var(--primary);box-shadow:0 4px 10px rgba(44,98,220,.3)}
.day[aria-pressed="true"] small,.day[aria-pressed="true"] b{color:var(--on-primary)}
.day[aria-pressed="true"] .dots i{background:var(--on-primary)}
.day.today:not([aria-pressed="true"]){background:var(--sky)}
.nav{border:0;background:transparent;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.nav .i{width:22px;height:22px}
@media (hover:hover){.nav:hover{background:var(--soft)}}
.crow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow),inset 5px 0 0 var(--strip,transparent);padding:14px 10px 14px 18px;margin:0 0 10px;min-height:76px;color:var(--ink)}
.crow.wait,.crow.take{--strip:#F2D46B} .crow.work{--strip:#8FD3B6} .crow.late{--strip:#F2B48C} .crow.req,.crow.open{--strip:#A9CDF2} .crow.done{--strip:#B9DDA3}
.crow .ct{font-family:var(--display);font-size:20px;font-weight:700;min-width:3.1em;align-self:stretch;display:flex;align-items:center;padding-right:14px;border-right:1px solid var(--rule)}
.crow.plain{min-height:60px}
.crow .ring{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex:none}
.crow .cm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.crow .nm{font-weight:600;font-size:16px;line-height:22px;overflow-wrap:break-word;max-width:100%}
.crow .go{color:var(--muted)}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* below 364 px seven days in the padded card are under 44 px wide (36.67 at 320, review 2026-10-30 #5): the week strip
   and the month grid run edge to edge there instead, 45.7 and 44 px a day at 320 */
@media (max-width:363px){.week{margin-left:-16px;margin-right:-16px;border-radius:0;padding:8px 0;gap:0}.month{margin-left:-16px;margin-right:-16px;gap:2px}}
.month .mh{text-align:center;font-size:14px;color:var(--muted);font-weight:500}
.mcell{border:0;background:var(--sheet);box-shadow:var(--shadow);border-radius:12px;min-height:48px;font-size:15px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px}
.mcell.out{background:transparent;box-shadow:none;color:var(--muted);font-weight:500}
.mcell.today{background:var(--sky);box-shadow:inset 0 0 0 2px var(--primary)}
.mcell .n{font-size:14px;font-weight:700;line-height:1;color:var(--link)}
.mcell .n.l{color:var(--on-peach)}

/* priority groups */
.qd{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin:0 0 14px}
.qd h3{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;font-size:16px;line-height:22px;font-weight:700}
.qd h3 .qi{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.7);flex:none}
.app[data-theme="dark"] .qd h3 .qi{background:rgba(0,0,0,.2)}
.qd h3 .qi .i{width:18px;height:18px}
.qcard.none .qi{color:var(--muted)}
.qd h3 small{margin-left:auto;font-weight:600;font-size:14px;white-space:nowrap}
.qd.q1 h3{background:var(--peach);color:var(--on-peach)} .qd.q2 h3{background:var(--sky);color:var(--on-sky)}
.qd.q3 h3{background:var(--lav);color:var(--on-lav)} .qd.q4 h3{background:var(--mint);color:var(--on-mint)}
.qd .list{box-shadow:none;border-radius:0}
.prow{display:flex;align-items:center;gap:4px;padding:4px 4px 4px 16px;border-bottom:1px solid var(--rule);min-height:64px}
.prow:last-child{border-bottom:0}
.prow .nm{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:8px 0;min-height:44px;display:flex;flex-direction:column;color:var(--ink);font-weight:600;font-size:16px;line-height:22px;overflow-wrap:break-word}
.prow .nm small{font-weight:500;font-size:14px;line-height:21px;color:var(--muted)}
.prow .nm small .late{color:var(--on-peach);font-weight:700}
.prow .nm:focus-visible{outline-offset:2px;border-radius:6px}

/* priority grid: four tinted cards, count large, first two titles as a preview */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* the column axis over the grid (Phu 2026-10-29: columns ด่วน | ไม่ด่วน, as card 17) */
.qaxis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px}
.qaxis span{text-align:center;font-weight:700;font-size:15px;color:var(--ink);background:var(--soft);border-radius:8px;padding:6px 0}
.qcard{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:0;border-radius:var(--r-card);padding:14px;min-height:178px;box-shadow:var(--shadow);color:var(--ink);--qt:var(--muted)}
.qcard.q1{background:var(--peach);--qt:var(--on-peach);--qbg:var(--peach)} .qcard.q2{background:var(--sky);--qt:var(--on-sky);--qbg:var(--sky)}
.qcard.q3{background:var(--lav);--qt:var(--on-lav);--qbg:var(--lav)} .qcard.q4{background:var(--mint);--qt:var(--on-mint);--qbg:var(--mint)}
.qcard.none{background:var(--sheet)}
.qcard .qh{display:flex;align-items:center;justify-content:space-between}
.qcard .qi{display:grid;place-items:center;color:var(--qt)}

.qcard .qi .i{width:26px;height:26px;stroke-width:2.25}
.i.v4{fill:currentColor;stroke:none}
.qcard .qh b{font-family:var(--text);font-weight:700;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.qcard.none .qh b{color:var(--muted)}
.qcard .ql{font-size:16px;line-height:22px;font-weight:700;color:var(--qt);margin-top:12px}
.qcard .qs{font-size:14px;line-height:20px;font-weight:600;color:var(--qt)}
.qcard .qp{display:grid;gap:2px;margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--qt) 22%,transparent)}
.qcard .qp span{font-size:14px;line-height:21px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard .qp .more{color:var(--qt);font-weight:600}
.qcard:focus-visible{outline-offset:3px}
@media (max-width:340px){.qgrid{grid-template-columns:1fr}.qaxis{display:none}}

/* me / stats */
.big{font-family:var(--display);font-weight:700;font-size:48px;color:var(--on-mint);line-height:1}
.statcard{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px;margin:0 0 12px}
.statcard h3{margin:0 0 8px;font-family:var(--text);font-weight:700;font-size:17px;color:var(--ink)}
.bars text{font-family:var(--text);font-size:20px;fill:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:8px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.gl{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 0;border-top:1px solid var(--rule);font-size:16px}
.gl:first-of-type{border-top:0}
.gl b{text-align:right}
.gl small{grid-column:1/-1;color:var(--muted);font-size:14px}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;color:var(--muted);font-size:14px;padding:0 0 6px}
th,td{padding:9px 4px;border-bottom:1px solid var(--rule);text-align:left}
th{color:var(--muted);font-weight:500;font-size:14px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
/* blue text uses --link: in dark the button blue on the page is 3.33:1 (review 2026-10-30 #6); fills keep --primary */
.linkbtn{border:0;background:transparent;color:var(--link);min-height:44px;padding:0;font-size:15px;font-weight:600}
.menu{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin:0 0 12px}
.menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;min-height:56px;padding:0 16px;text-align:left;font-size:16px;font-weight:500;color:var(--ink)}
.menu button:last-child{border-bottom:0}
.menu .i{width:22px;height:22px;color:var(--muted)}
.menu .go{margin-left:auto;width:18px;height:18px}
.menu .cnt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.menu .cnt + .go{margin-left:4px}

/* help */
.help .hc{background:var(--sheet);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 10px}
.help h3{margin:0 0 4px;font-family:var(--text);font-weight:700;font-size:17px;color:var(--ink)}
.help p{margin:0;font-size:16px}

/* states */
.empty{text-align:center;padding:36px 12px}
.empty img{width:96px;height:96px}
.empty h3{font-family:var(--text);font-weight:700;font-size:20px;color:var(--ink);margin:8px 0 4px}
.empty p{color:var(--muted);margin:0 auto 16px;max-width:28ch;font-size:16px}
.empty .btn{max-width:240px;margin:0 auto}
.loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-weight:500;animation:loading-appear .2s ease-out .25s both}
/* Every open, tab change and return to the page passes through loading; a quick answer swaps the page before the scene shows. */
@keyframes loading-appear{from{opacity:0}}
/* Three-second courier loop: run .825s, talk .675s at each end. All movement is decorative. */
.loading-scene{position:relative;width:min(100%,460px);height:184px;flex:none;overflow:hidden;--courier:128px;--loading-loop:3s}
.loading-friend{position:absolute;bottom:28px;width:76px;height:76px}
.loading-friend-left{left:0}
.loading-friend-right{right:0}
.loading-friend img{display:block;width:100%;height:100%;object-fit:contain}
.loading-route{position:absolute;inset:0;animation:loading-journey var(--loading-loop) linear infinite}
.loading-courier{position:absolute;left:calc(50% - var(--courier)/2);bottom:0;width:var(--courier);height:var(--courier);animation:loading-turn var(--loading-loop) step-end infinite}
.loading-run,.loading-hold{position:absolute;inset:0;display:block;width:100%;height:100%}
.loading-run{background:url('/mascots/loading/run-folder-v1.webp') 0 0 / 800% 100% no-repeat;animation:loading-stride .4s steps(8) infinite,loading-running var(--loading-loop) step-end infinite}
.loading-hold{object-fit:contain;animation:loading-resting var(--loading-loop) step-end infinite}
.loading-chat{position:absolute;bottom:calc(100% + 7px);left:calc(50% - 23px);width:46px;height:27px;border:1.5px solid var(--on-memo);border-radius:12px;background:var(--sheet);display:flex;align-items:center;justify-content:center;gap:4px;opacity:0}
.loading-chat::after{content:'';position:absolute;bottom:-5px;left:20px;width:7px;height:7px;border-right:1.5px solid var(--on-memo);border-bottom:1.5px solid var(--on-memo);background:var(--sheet);transform:rotate(45deg)}
.loading-chat i{width:4px;height:4px;background:var(--on-memo);border-radius:50%;animation:loading-dot .6s ease-in-out infinite}
.loading-chat i:nth-child(2){animation-delay:.12s}.loading-chat i:nth-child(3){animation-delay:.24s}
.loading-courier>.loading-chat{bottom:calc(100% - 16px);animation:loading-speaking var(--loading-loop) step-end infinite}
.loading-friend-left>.loading-chat{animation:loading-left-reply var(--loading-loop) step-end infinite}
.loading-friend-right>.loading-chat{animation:loading-right-reply var(--loading-loop) step-end infinite}
@keyframes loading-stride{to{background-position:calc(800% / 7) 0}}
@keyframes loading-journey{0%{transform:translateX(-20%)}27.5%,50%{transform:translateX(20%)}77.5%,100%{transform:translateX(-20%)}}
@keyframes loading-turn{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes loading-running{0%,50%{opacity:1}27.5%,77.5%{opacity:0}}
@keyframes loading-resting{0%,50%{opacity:0}27.5%,77.5%{opacity:1}}
@keyframes loading-speaking{0%,38%,50%,88%{opacity:0}28%,78%{opacity:1}}
@keyframes loading-right-reply{0%,49%{opacity:0}39%{opacity:1}}
@keyframes loading-left-reply{0%,99%{opacity:0}89%{opacity:1}}
@keyframes loading-dot{50%{transform:translateY(-2px)}}
.loading-still .loading-scene *{animation:none!important}
.loading-still .loading-route{transform:none}
.loading-still .loading-run,.loading-still .loading-chat{display:none}
.loading-still .loading-hold{opacity:1}
@media (max-width:360px){.loading-scene{--courier:112px}.loading-friend{width:60px;height:60px;bottom:25px}}
@media (prefers-reduced-motion:reduce){
  .loading-scene *{animation:none!important}
  .loading-route{transform:none}
  .loading-run,.loading-chat{display:none}
  .loading-hold{opacity:1}
}
@keyframes bob{50%{transform:translateY(-6px)}}
.friend{display:flex;align-items:center;gap:10px;background:var(--sky);border-radius:var(--r-card);padding:6px 2px 6px 10px;margin:10px 0 0;font-size:14px;font-weight:500;color:var(--on-sky)}
.friend img{width:40px;height:40px;flex:none;transform:rotate(-6deg)}
.friend span{flex:1}
.friend .fb{border:0;background:transparent;color:var(--link);border-radius:10px;min-height:44px;padding:0 8px;font-size:15px;font-weight:700}
.friend .fx{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;color:var(--on-sky)}

/* toast + sheet */
.toast{position:absolute;left:16px;right:16px;bottom:80px;z-index:5;display:flex;align-items:center;gap:8px;background:var(--toast-bg);color:var(--toast-fg);border-radius:16px;padding:4px 4px 4px 16px;font-size:15px;font-weight:500;box-shadow:0 8px 24px rgba(37,50,74,.25)}
.toast span{flex:1;padding:8px 0}
.toast button:focus-visible{outline-color:var(--toast-fg);outline-offset:-3px}
.toast button{border:0;background:transparent;color:inherit;min-height:44px;min-width:44px;display:grid;place-items:center;font-size:15px;font-weight:700}
.sheetbg{position:absolute;inset:0;background:rgba(37,50,74,.45);display:none;align-items:flex-end;z-index:6}
.sheetbg.on{display:flex}
.sheet{background:var(--sheet);width:100%;border-radius:24px 24px 0 0;padding:8px 16px 20px;max-height:85%;overflow-y:auto}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--rule);margin:0 auto 12px}
.sheet h3{font-family:var(--text);font-weight:700;font-size:20px;color:var(--ink);margin:0 0 4px}
.sheet p{margin:0 0 12px;color:var(--body)}
.sheet label{display:block;font-size:14px;color:var(--muted);margin:0 0 4px}
.sheet input{width:100%;min-height:50px;border:1.5px solid var(--btn2-line);border-radius:var(--r-ctl);padding:0 12px;background:var(--sheet);color:var(--ink)}
.sheet input[aria-invalid="true"]{border-color:var(--late);box-shadow:inset 0 0 0 1px var(--late)}
.sheet .hint{color:var(--on-memo);background:var(--memo);border-radius:8px;padding:0 8px;font-size:14px;margin:0 0 8px}
.sheet .hint:empty{display:none}
.sheet .err{color:var(--on-peach);font-weight:600;font-size:14px;min-height:1.5em;margin:4px 0 8px}
.sheet .opts{display:grid;gap:8px;margin:4px 0 0}
.sheet [hidden]{display:none!important}
.resting .btn,.resting .quick button,.app.resting-page .act .btn,.app.resting-page .tp .btn{opacity:.55}

@media (prefers-reduced-motion:reduce){.loading img{animation:none}.app button{transition:none}.app .btn:active:not([disabled]){transform:none}}
@media (max-width:380px){.month{gap:2px}.week{padding:6px 2px}}

/* S1: the mailbox count on the วันนี้ tab (QUIET-GROUP-PLAN §3.1 "ใหม่", docs/WEB-APP-S1-PLAN.md §2) */
.tabs .pi{position:relative}
.badge{position:absolute;top:-2px;right:0;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#C2632F;color:#fff;font-size:13px;line-height:20px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
a.btn{text-decoration:none}
/* small spacing classes: the page sets no inline style (CSP style-src 'self') */
.empty.tight{padding:8px 0}
.m0{margin:0}
.mb12{margin:0 0 12px}
.mt12{margin:12px 0 0}
.person b.hist{font-weight:500;text-align:left;margin-left:0}
.person b{overflow-wrap:anywhere}

/* Computer screens, and LINE for PC windows wider than a phone: the app stays one phone-width column in the middle, on a
   slightly deeper paper, instead of stretching every card and the four tabs across the screen. Toasts and the bottom sheet
   are positioned inside .app, so they stay in the column too. */
@media (min-width:600px){
  body{background:#F1E9DB}
  .app{max-width:520px;margin:0 auto;border-inline:1px solid var(--rule);box-shadow:0 0 48px rgba(69,79,111,.10)}
}
@media (min-width:600px) and (prefers-color-scheme:dark){body{background:#0E131C}}
/* S2's first slice: the card's buttons on the task page (Phu 2026-10-29) */
.acts{display:flex;flex-direction:column;gap:8px}
.acts .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts .pair > .btn:first-child:nth-last-child(odd){grid-column:1/-1}
.acts .quiet{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:-2px}
.acts .quiet .btn.q{width:auto;padding:0 8px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.tp .people{background:transparent;box-shadow:none;padding:0 2px}
.tpick{display:flex;flex-direction:column;gap:6px}
.tpick label{font-size:14px;color:var(--tone)}
.tpick input{min-height:48px;font-size:16px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--btn2-line);background:var(--sheet);color:inherit}

/* the importance switch on the task page is not a second blue button: the chosen side is a white chip on the note */
.focal .imp .seg{background:color-mix(in srgb,var(--tone) 12%,transparent)}
.focal .imp .seg button[aria-pressed="true"]{background:var(--sheet);color:var(--ink);box-shadow:0 2px 6px rgba(69,79,111,.16)}
/* review round 2: icons inside the 22–24 range (pills 18), tile labels keep two lines so the counts line up at 320,
   a one-task priority box shows two lines of its title */
.topic .ib .i{width:24px;height:24px}
.ghd .gi .i{width:22px;height:22px}
.tchip .i{width:18px;height:18px}
@media (max-width:380px){.topic .lb{min-height:42px}}
.qcard .qp span:only-child{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* dark: a chosen switch side and a pale button sit lighter than their track or note, as in light, never like a hole */
.app[data-theme="dark"] .seg button[aria-pressed="true"]{background:#3B4B63;color:var(--ink)}
.app[data-theme="dark"] .focal .btn:not(.p):not(.ok):not(.q):not(.warn){background:rgba(255,255,255,.12);color:var(--ink)}
.app[data-theme="dark"] .chips select{background:transparent;color-scheme:dark}
@media (prefers-color-scheme:dark){
  .app:not([data-theme="light"]) .seg button[aria-pressed="true"]{background:#3B4B63;color:var(--ink)}
  .app:not([data-theme="light"]) .focal .btn:not(.p):not(.ok):not(.q):not(.warn){background:rgba(255,255,255,.12);color:var(--ink)}
}

/* the first-time tours (Phu 2026-10-30): the page dims, one control is lit with a ring, Memna's note points at it */
#guide:empty{display:none}
.tour{position:absolute;inset:0;z-index:7}
.tspot{position:absolute;border-radius:16px;box-shadow:0 0 0 2px #fff,0 0 0 9999px rgba(22,29,42,.62);pointer-events:none;transition:left .35s cubic-bezier(.22,1,.36,1),top .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1)}
.tspot::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(255,255,255,.7);animation:tour-ring 1.6s ease-out infinite}
@keyframes tour-ring{from{opacity:1;transform:scale(.98)}to{opacity:0;transform:scale(1.06)}}
.ttip{position:absolute;left:16px;right:16px;background:var(--sheet);color:var(--ink);border-radius:18px;padding:14px 16px 10px;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:top .35s cubic-bezier(.22,1,.36,1)}
.tar{position:absolute;bottom:-7px;width:16px;height:16px;background:var(--sheet);transform:rotate(45deg);border-radius:3px}
.tar.up{bottom:auto;top:-7px}
.thd{display:flex;align-items:center;gap:10px}
.thd img{width:52px;height:52px;margin:-14px -4px -8px -6px;transform:rotate(-5deg);flex:none}
.thd h2{margin:0;font-family:var(--text);font-size:18px;line-height:26px;font-weight:700;color:var(--ink)}
.thd h2:focus{outline:none}
.tskip{margin-left:auto;border:0;background:transparent;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:var(--quiet)}
.ttip p{margin:2px 0 8px;font-size:15px;line-height:23px;color:var(--body)}
.tft{display:flex;align-items:center;gap:6px}
.tdots{display:flex;gap:5px;margin-right:auto}
.tdots i{width:7px;height:7px;border-radius:9px;background:var(--rule)}
.tdots i.on{width:18px;background:var(--primary)}
.tbk{border:0;background:transparent;min-height:44px;padding:0 10px;font-size:15px;font-weight:600;color:var(--quiet)}
.tnx{border:0;background:var(--primary);color:var(--on-primary);min-height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:700}
@media (prefers-reduced-motion:reduce){.tspot,.ttip{transition:none}.tspot::after{animation:none}}