/* sections/showcase.html (#showcase): "Inside the app" tabs and the HTML mockups of the Noty app. Uses core.css tokens;
   the .app mock keeps the real app's own palette (--a-* / --t-*), light by default and dark with the dark theme.
   Panels: stacked in one grid cell from 960px (the card keeps the tallest height, no jumps); below that the inactive
   ones leave the flow. js/sections/showcase.js adds .enter to the panel that opens, which staggers its contents in. */
/* #how sits right above on the same paper: a shorter top keeps the gap between them like the other section breaks */
.showcase{padding-top:calc(var(--section-y) * .45)}
.sc{max-width:var(--container);margin:0 auto}
.sc-tabs-wrap{position:relative;z-index:2;display:flex;justify-content:center;margin-bottom:-26px;padding:0 12px}
.sc-tabs{position:relative;display:flex;gap:2px;max-width:100%;padding:5px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  box-shadow:var(--shadow-2);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tabs button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;flex:none;padding:11px 18px;border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--ink-2);font:600 var(--fs-s)/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:color var(--d-3) ease}
.sc-tabs button svg{width:17px;height:17px}
.sc-tabs button:hover{color:var(--ink)}
.sc-tabs button[aria-selected="true"]{color:var(--on-brand)}
.sc-tabs button:focus-visible{outline-offset:-2px;border-radius:var(--r-pill)}
.sc-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--ind-w,0);transform:translateX(var(--ind-x,0));border-radius:var(--r-pill);background:var(--brand);overflow:hidden;
  box-shadow:var(--shadow-brand)}
.sc-tabs.ready .sc-ind{transition:transform var(--d-4) var(--ease-out),width var(--d-4) var(--ease-out)}
.sc-ind::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--on-brand);opacity:.3;transform:scaleX(0);transform-origin:0 50%}
.sc-tabs.auto .sc-ind.run::after{animation:sc-prog var(--sc-auto,7s) linear forwards}
@keyframes sc-prog{to{transform:scaleX(1)}}
.sc-card{position:relative;padding:76px clamp(16px,4.5vw,56px) clamp(16px,4.5vw,56px);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--surface-2)}
.sc-card::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:80%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.sc-panel{position:relative;display:grid;gap:var(--space-6);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.sc-panel{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(36px,4vw,64px);align-items:center}}
@media (min-width:1280px){.sc-panel{grid-template-columns:minmax(0,360px) minmax(0,1fr)}}
.sc-panel+.sc-panel{margin-top:72px}
.js .sc-panels{display:grid}
.js .sc-panel{grid-area:1/1;margin:0;transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out),visibility 0s linear 0s}
.js .sc-panel.off{opacity:0;visibility:hidden;transform:translateX(16px);pointer-events:none;
  transition:opacity var(--d-3) ease,transform var(--d-3) ease,visibility 0s linear var(--d-3)}
.js .sc-panel.off.left{transform:translateX(-16px)}
@media (max-width:959.98px){
  .js .sc-panels{display:block;position:relative}
  .js .sc-panel.off{position:absolute;left:0;right:0;top:0}
}
.sc-copy{max-width:560px;padding:0 4px}
.sc-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--space-4);font-size:var(--fs-xs);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--accent)}
.sc-kicker svg{width:16px;height:16px}
.sc-copy h3{margin-bottom:var(--space-4);font-size:clamp(1.6rem,1.2rem + 1.4vw,2rem);font-weight:800;letter-spacing:var(--tr-heading);line-height:1.12}
@media (min-width:1280px){.sc-copy h3{font-size:2.2rem}}
.sc-copy>p:not(.sc-kicker){color:var(--ink-2);font-size:var(--fs-body-l)}
.sc-copy .ticks{margin-top:var(--space-5)}
.sc-mock{min-width:0;width:100%;container-type:inline-size}

/* opening a panel: its contents rise in, one after another (transform + opacity only) */
.sc-panel.enter .sc-copy>*,.sc-panel.enter .app-side,.sc-panel.enter .app-body>*,.sc-panel.enter .bd-scene>*{animation:sc-rise var(--d-4) var(--ease-out) both}
.sc-panel.enter .sc-copy>:nth-child(2),.sc-panel.enter .app-body>:nth-child(2),.sc-panel.enter .bd-bubble{animation-delay:50ms}
.sc-panel.enter .sc-copy>:nth-child(3),.sc-panel.enter .app-body>:nth-child(3),.sc-panel.enter .bd-stand{animation-delay:100ms}
.sc-panel.enter .sc-copy>:nth-child(4),.sc-panel.enter .app-body>:nth-child(4){animation-delay:150ms}
.sc-panel.enter .app-body>:nth-child(5){animation-delay:200ms}
.sc-panel.enter .app-body>:nth-child(n+6){animation-delay:250ms}
.sc-panel.enter .app-side{animation-name:sc-fade}
@keyframes sc-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes sc-fade{from{opacity:0}}

/* the app window */
.app{--a-side:#F1EFEB;--a-bg:#F7F6F3;--a-card:#FFFFFF;--a-hover:#FBFAF8;--a-field:#FAFAF8;--a-border:#E7E5E0;--a-text:#1F2328;--a-text2:#6B6F76;--a-accent:#2563EB;--a-fill:#2563EB;--a-soft:#E8EFFD;--t-work-b:#E8F0FE;--t-work-f:#1D4ED8;--t-personal-b:#E7F6EC;--t-personal-f:#166534;--t-todo-b:#F1EAFE;--t-todo-f:#6D28D9;--t-mail-b:#FDE8EF;--t-mail-f:#BE123C;--t-memory-b:#E0F5F3;--t-memory-f:#115E59;--t-other-b:#EFEFED;--t-other-f:#4B5058;--a-shadow:0 30px 70px -34px rgba(40,40,30,.35),0 2px 6px rgba(40,40,30,.06);--a-wall:radial-gradient(120% 90% at 20% 0%,#E8EFFD 0%,#F7F6F3 62%);
  font-family:ui-rounded,"SF Pro Rounded","Inter",system-ui,sans-serif;color:var(--a-text);background:var(--a-bg);border:1px solid var(--a-border);border-radius:16px;
  box-shadow:var(--a-shadow);overflow:hidden;text-align:left;font-size:15px;line-height:1.4}
:root[data-theme="dark"] .app,.scheme-dark .app{--a-side:#18191B;--a-bg:#1C1D1F;--a-card:#26272A;--a-hover:#2C2D31;--a-field:#202124;--a-border:#34363A;--a-text:#ECECEC;--a-text2:#A0A3A8;--a-accent:#4F8CFF;--a-fill:#2563EB;--a-soft:#1F2E4A;--t-work-b:#1F2F4D;--t-work-f:#93B8FF;--t-personal-b:#1D3A2A;--t-personal-f:#86EFAC;--t-todo-b:#33264F;--t-todo-f:#C4B5FD;--t-mail-b:#45202D;--t-mail-f:#FDA4AF;--t-memory-b:#17393A;--t-memory-f:#5EEAD4;--t-other-b:#303236;--t-other-f:#C9CCD1;--a-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.25);--a-wall:radial-gradient(120% 90% at 20% 0%,#24375c 0%,#1C1D1F 60%)}
.app svg{flex:none}
.app-bar{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px 0 16px;border-bottom:1px solid var(--a-border);background:var(--a-card)}
.app-dots{display:flex;gap:7px}
.app-dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.app-dots i:nth-child(2){background:#FEBC2E}
.app-dots i:nth-child(3){background:#28C840}
.app-title{font-weight:700;font-size:15px}
.app-pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:var(--a-field);border:1px solid var(--a-border);
  font-size:13px;color:var(--a-text2);white-space:nowrap}
.app-live{width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.app-main{display:flex;align-items:stretch}
.app-body{flex:1;min-width:0;padding:16px}
/* the room sidebar of the real app; only when the mock is wide enough */
.app-side{display:none;flex:none;flex-direction:column;gap:2px;width:164px;padding:12px 10px;border-right:1px solid var(--a-border);background:var(--a-side);font-size:13.5px;color:var(--a-text2)}
.as-item{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:9px;white-space:nowrap}
.as-item svg{width:16px;height:16px}
.as-item b{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--a-field);border:1px solid var(--a-border);font-size:12px;font-weight:650;text-align:center;line-height:1.4}
.as-item.on{background:var(--a-soft);color:var(--a-accent);font-weight:650}
.as-item.on b{background:var(--a-fill);border-color:var(--a-fill);color:#fff}
.as-sep{display:block;height:1px;margin:6px 8px;background:var(--a-border)}
@container (min-width:620px){.app-side{display:flex}}
.app-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.a-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--a-field);border:1px solid var(--a-border)}
.a-seg i{font-style:normal;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--a-text2);white-space:nowrap}
.a-seg i.on{background:var(--a-card);color:var(--a-text);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--a-border)}
.app-head{display:flex;align-items:center;gap:10px}
.app-head strong{font-size:17px;letter-spacing:-.01em}
.app-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--a-accent);font-weight:600;font-size:14px;white-space:nowrap}
@container (max-width:420px){.app-link{font-size:13px;gap:4px}.a-seg i{padding:6px 10px}}
@container (max-width:340px){
  .app-bar{gap:9px;padding:0 10px 0 12px}
  .app-dots{gap:6px}
  .app-dots i{width:10px;height:10px}
  .app-pill{padding:4px 9px;font-size:12px;gap:6px}
  .app-link svg{display:none}
  .a-seg i{padding:5px 8px;font-size:12.5px}
  .app-body{padding:10px}
}
.app-link svg{width:16px;height:16px}
.mt{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.35;white-space:nowrap}
.mt svg{width:13px;height:13px}
.t-work{background:var(--t-work-b);color:var(--t-work-f)}
.t-personal{background:var(--t-personal-b);color:var(--t-personal-f)}
.t-todo{background:var(--t-todo-b);color:var(--t-todo-f)}
.t-mail{background:var(--t-mail-b);color:var(--t-mail-f)}
.t-memory{background:var(--t-memory-b);color:var(--t-memory-f)}
.t-other{background:var(--t-other-b);color:var(--t-other-f)}

/* memory */
.m-list{background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;padding:2px 6px}
.m-group{padding:6px 0}
.m-group+.m-group{border-top:1px solid var(--a-border)}
.m-gh{display:flex;align-items:center;gap:7px;padding:6px 10px 2px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--a-text2)}
.m-gh svg{width:14px;height:14px;color:var(--a-accent)}
.m-row{display:flex;align-items:flex-start;gap:12px;padding:8px 6px 8px 10px;border-radius:10px}
.imp{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%}
.imp-high{background:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.16)}
.imp-mid{background:#F5A524;box-shadow:0 0 0 3px rgba(245,165,36,.16)}
.imp-low{background:var(--a-text2);opacity:.6}
.m-main{flex:1;min-width:0}
.m-text{font-size:15px;font-weight:600}
.m-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.m-said{margin-top:9px}
.m-said-t{display:inline-flex;align-items:center;gap:3px;color:var(--a-accent);font-size:13px;font-weight:600}
.m-said-t svg{width:15px;height:15px}
.m-said q{display:block;margin-top:6px;padding:9px 12px;border-radius:10px;background:var(--a-field);border:1px solid var(--a-border);border-left:3px solid var(--a-accent);
  color:var(--a-text);font-size:14px;font-style:normal;quotes:"“" "”"}
.m-acts{display:flex;gap:2px;flex:none}
.ib{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--a-text2)}
.ib svg{width:18px;height:18px}
.ib:first-child{color:var(--a-accent);background:var(--a-soft)}

/* mail */
.mail-row{display:flex;gap:12px;padding:12px;margin-top:8px;border-radius:14px;background:var(--a-card);border:1px solid var(--a-border)}
.av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:700;letter-spacing:.02em}
.mail-main{flex:1;min-width:0}
.mail-top{display:flex;align-items:center;gap:8px}
.mail-top strong{font-size:15px}
.mail-top time{margin-left:auto;font-size:13px;color:var(--a-text2);white-space:nowrap}
.mail-subj{margin-top:2px;font-size:14.5px;font-weight:600}
.mail-sum{display:flex;gap:6px;align-items:flex-start;margin-top:4px;font-size:14px;color:var(--a-text2)}
.mail-sum svg{width:15px;height:15px;margin-top:2px;color:var(--a-accent)}
.mail-hidden{display:flex;align-items:center;gap:8px;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px dashed var(--a-border);color:var(--a-text2);font-size:14px}
.mail-hidden strong{color:var(--a-text);font-weight:600}
.mail-hidden span{margin-left:auto;font-size:13px}
.mail-hidden svg{width:16px;height:16px}

/* what I heard */
.h-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;background:var(--a-field);border:1px solid var(--a-border);color:var(--a-text2);font-size:14.5px}
.h-search svg{width:18px;height:18px}
.h-list{list-style:none;margin:14px 0 0;padding:6px 14px;border-radius:14px;background:var(--a-card);border:1px solid var(--a-border)}
.h-list li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0 12px 18px}
.h-list li+li{border-top:1px solid var(--a-border)}
.h-list li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--a-accent);opacity:.75}
.h-list time{font-size:13px;color:var(--a-text2);font-variant-numeric:tabular-nums;padding-top:1px}
.h-list p{margin:0;font-size:15px}
.h-keep{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--a-card);border:1px solid var(--a-border);font-size:14px}
.h-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--a-field);border:1px solid var(--a-border)}
.h-seg i{font-style:normal;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;color:var(--a-text2);white-space:nowrap}
.h-seg i.on{background:var(--a-fill);color:#fff}
.h-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--t-memory-b);color:var(--t-memory-f);font-size:13.5px;font-weight:600}
.h-note svg{width:16px;height:16px}

/* buddy */
.bd-toggle{margin-left:auto;display:inline-flex;padding:3px;border-radius:999px;background:var(--a-field);border:1px solid var(--a-border)}
.bd-toggle[hidden]{display:none}
.bd-toggle button{border:0;background:transparent;color:var(--a-text2);font-family:inherit;font-size:13px;font-weight:600;line-height:1;padding:7px 13px;border-radius:999px;cursor:pointer}
.bd-toggle button[aria-pressed="true"]{background:var(--a-fill);color:#fff}
.bd-scene{position:relative;flex:1;min-width:0;height:468px;background:var(--a-wall);overflow:hidden}
.bd-rem{position:absolute;left:18px;top:18px;width:min(290px,calc(100% - 200px));display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:14px;border-radius:16px;
  background:var(--a-card);border:1px solid var(--a-border);box-shadow:0 14px 34px -18px rgba(0,0,0,.45)}
.bd-rem-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.bd-rem-ic svg{width:20px;height:20px}
.bd-rem-t{display:flex;flex-direction:column;justify-content:center}
.bd-rem-t strong{font-size:16px}
.bd-rem-t span{font-size:13.5px;color:var(--a-text2)}
.bd-rem-b{grid-column:1/-1;display:flex;gap:8px;margin-top:8px}
.bd-btn{flex:1;display:grid;place-items:center;height:36px;border-radius:10px;border:1px solid var(--a-border);font-size:14px;font-weight:600;color:var(--a-text);background:var(--a-field)}
.bd-done{background:var(--a-fill);border-color:var(--a-fill);color:#fff}
.bd-bubble{position:absolute;right:calc(28px + 150px);bottom:196px;max-width:230px;padding:13px 16px 13px 18px;border-radius:18px 18px 6px 18px;background:var(--a-card);
  border:1px solid var(--a-border);box-shadow:0 14px 34px -18px rgba(0,0,0,.45);font-size:15px;font-weight:600}
.bd-pin{position:absolute;left:-12px;top:-12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;background:var(--a-fill);
  box-shadow:0 0 0 4px var(--a-soft)}
.sc.in-view .sc-panel:not(.off) .bd-pin{animation:bd-pin 2s ease-out infinite}
.bd-pin svg{width:15px;height:15px}
@keyframes bd-pin{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45),0 0 0 4px var(--a-soft)}70%,100%{box-shadow:0 0 0 12px rgba(37,99,235,0),0 0 0 4px var(--a-soft)}}
.bd-stand{position:absolute;right:28px;bottom:18px;width:150px;height:404px}
.bd-stand::after{content:"";position:absolute;left:18%;right:18%;bottom:-6px;height:16px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(7px);z-index:-1}
.bd-img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.bd-girl{opacity:0;transform:translateX(-40%)}
.bd-scene[data-buddy="girl"] .bd-girl{opacity:1;transform:translateX(-50%)}
.bd-scene[data-buddy="girl"] .bd-boy{opacity:0;transform:translateX(-60%)}

@media (max-width:639.98px){
  .sc-tabs-wrap{justify-content:flex-start;padding:0 8px}
  .sc-tabs button{padding:10px 13px;font-size:var(--fs-xs)}
  .sc-card{padding-top:68px}
  .app-body{padding:12px}
  .m-row{gap:10px;padding:8px 4px 8px 8px}
  .m-acts .ib:nth-child(n+2){display:none}
  .mail-top time,.mail-hidden span{display:none}
  .h-keep>span:first-child{display:none}
  .h-keep{justify-content:center}
  .bd-scene{height:440px}
  .bd-rem{width:calc(100% - 36px)}
  .bd-stand{right:8px;width:110px;height:262px}
  .bd-bubble{left:24px;right:118px;bottom:150px;max-width:200px;font-size:14px}
}
@media (max-width:479.98px){
  .sc-tabs-wrap{justify-content:center;padding:0 4px}
  .sc-tabs button{gap:0;padding:10px 12px}
  .sc-tabs button svg{display:none}
}
@media (prefers-reduced-motion:reduce){.bd-pin{animation:none}}
.showcase .section-sub{text-wrap:balance}