/* ========================================================================== RECONNECTED — the member environment Palette R1 · Rose & Moss. Single family: Schibsted Grotesk. Rules carried over from the brand system, unchanged: · Light is the default. An app is not a poster. · One rose element per block. Moss is a surface, never an accent. · Emphasis is one 3px rose rule on the left. One per screen. · No dots. Separators are 1x12px vertical rules. · Two easing curves. Nothing bounces. Everything widens or settles. · Nothing after 21:00, no sound, no haptics. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Tokens -------------------------------------------------------------------------- */ :root{ /* the ramp — 21 tokens, adding a colour is a brand decision */ --paper:#F7F1EC; --paper-2:#F2EAE3; --surface:#FBF7F3; --raised:#FFFFFF; --ink:#1C1518; --ink-2:#4E4448; --ink-3:#6C6165; --ink-4:#8E8286; --line:#E7DCD5; --line-2:#D3C5BC; --line-3:#C6B8B0; --rose:#9B3552; --rose-h:#7A2440; --rose-lt:#F0A8B8; --rose-wash:#F6E7EA; --moss:#2E3D2A; --moss-2:#3E5238; --moss-wash:#EDEBE2; --slab:#26331F; --inv-1:#F1F3EC; --foot:#161B13; --on-rose:#FFFFFF; /* what sits on a --rose fill (cells, the current chip) */ --rose-fill:#9B3552; /* the primary button surface */ --rose-fill-h:#7A2440; --on-rose-fill:#FFFFFF; --on-moss-2:#F1F3EC; /* what sits on a --moss-2 fill */ --moss-fg:#2E3D2A; /* moss used as text or an icon, never as a surface */ --tint-line:rgba(46,61,42,.14); --inv-2:rgba(241,243,236,.72); --inv-3:rgba(241,243,236,.66); --inv-line:rgba(241,243,236,.18); --sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; /* radii — cards 22, slabs 26–34, fields 16, pills 100 */ --r-card:22px; --r-slab:28px; --r-choice:18px; --r-field:16px; --r-chip:16px; --r-pill:100px; /* two curves. A third one does not exist. */ --ease:cubic-bezier(.2,.7,.2,1); --ease-slow:cubic-bezier(.62,0,.06,1); --open:.5s; --close:.4s; --shadow:0 1px 2px rgba(28,21,24,.04), 0 8px 24px -12px rgba(28,21,24,.14); --shadow-lift:0 2px 4px rgba(28,21,24,.05), 0 18px 40px -18px rgba(28,21,24,.22); --nav-w:236px; --shell:1500px; --read:700px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* the paper grain — a real 96px tile, multiplied. Not CSS noise: that reads as a filter. */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:url(data:image/png;base64,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); background-size:96px 96px; opacity:.5; mix-blend-mode:multiply; } h1,h2,h3,h4{margin:0; font-weight:700; color:var(--ink)} p{margin:0 0 14px} p:last-child{margin-bottom:0} a{color:var(--rose); text-decoration:none} a:hover{color:var(--rose-h)} button{font-family:inherit; font-size:inherit; color:inherit} ul,ol{margin:0; padding:0; list-style:none} /* -------------------------------------------------------------------------- 2 · Type scale — discrete per breakpoint. clamp() never gets tracking right. -------------------------------------------------------------------------- */ .t-hero{font-size:28px; line-height:1.08; letter-spacing:-.021em; font-weight:800} .t-h2 {font-size:22px; line-height:1.14; letter-spacing:-.017em; font-weight:700} .t-h3 {font-size:19px; line-height:1.22; letter-spacing:-.011em; font-weight:700} .t-h4 {font-size:17px; line-height:1.35; letter-spacing:-.006em; font-weight:700} .lead {font-size:17px; line-height:1.5; letter-spacing:-.005em; font-weight:400; color:var(--ink-2)} .sm {font-size:14px; line-height:1.55; color:var(--ink-2)} .xs {font-size:13px; line-height:1.5; color:var(--ink-3)} @media(min-width:768px){ .t-hero{font-size:36px; letter-spacing:-.026em} .t-h2 {font-size:25px; letter-spacing:-.02em} .t-h3 {font-size:21px; letter-spacing:-.013em} .lead {font-size:18px} } @media(min-width:1200px){ .t-hero{font-size:42px; letter-spacing:-.03em} .t-h2 {font-size:28px; letter-spacing:-.022em} .t-h3 {font-size:22px; letter-spacing:-.014em} .t-h4 {font-size:18px} .lead {font-size:19px; line-height:1.48} } /* Small caps: 12 / 700 / +.10em / ink-2. A label that is a sentence is not a label. */ .caps{ display:block; font-size:12px; line-height:1.35; letter-spacing:.10em; font-weight:700; text-transform:uppercase; color:var(--ink-2); } .caps--inv{color:var(--inv-3)} .caps--rose{color:var(--rose)} .mono{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; letter-spacing:-.01em} /* the one emphasis treatment in the system */ .emph{border-left:3px solid var(--rose); padding-left:16px} /* separator: a 1x12 rule, never a dot */ .sep{display:inline-block; width:1px; height:12px; background:var(--line-2); vertical-align:-2px; margin:0 10px} .sep--inv{background:var(--inv-line)} /* measure */ .measure{max-width:62ch} /* -------------------------------------------------------------------------- 3 · The widening mark — four bars, the last one rose -------------------------------------------------------------------------- */ .mark{display:flex; flex-direction:column; gap:3px; width:22px; flex:none} .mark i{display:block; height:2px; border-radius:2px; background:var(--line-3); transform-origin:left center} .mark i:nth-child(1){width:38%} .mark i:nth-child(2){width:58%} .mark i:nth-child(3){width:78%} .mark i:nth-child(4){width:100%; background:var(--rose)} .mark--inv i{background:rgba(241,243,236,.34)} .mark--inv i:nth-child(4){background:var(--rose-lt)} .mark--lg{width:34px; gap:4px} .mark--lg i{height:3px} .wordmark{font-weight:800; font-size:17px; letter-spacing:-.02em} /* -------------------------------------------------------------------------- 4 · Focus — one ring, everywhere, no exceptions -------------------------------------------------------------------------- */ :where(a,button,[tabindex]:not([tabindex="-1"]),input,select,summary):focus-visible{ outline:none; box-shadow:0 0 0 3px var(--rose-wash), 0 0 0 4px var(--rose); border-radius:6px; position:relative; z-index:5; } .on-dark:focus-visible{ box-shadow:0 0 0 3px rgba(38,51,31,.9), 0 0 0 4px var(--rose-lt); } /* a heading focused for screen readers must not paint a ring */ [tabindex="-1"]:focus{outline:none} .skip{ position:absolute; left:12px; top:-60px; z-index:60; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:var(--r-pill); font-weight:700; font-size:14px; transition:top var(--close) var(--ease); } .skip:focus{top:12px; color:var(--paper)} /* -------------------------------------------------------------------------- 5 · Buttons — pill, three sizes, four variants. One primary per block. -------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border:0; border-radius:var(--r-pill); background:var(--rose-fill); color:var(--on-rose-fill); font-weight:700; font-size:15px; letter-spacing:-.005em; cursor:pointer; transition:background var(--close) var(--ease), transform var(--close) var(--ease); } .btn:hover{background:var(--rose-fill-h); color:var(--on-rose-fill)} .btn:active{transform:translateY(1px)} .btn--lg{min-height:58px; padding:0 34px; font-size:16px} .btn--sm{min-height:42px; padding:0 20px; font-size:14px} .btn--gh{background:transparent; color:var(--ink); border:1px solid var(--line-2)} .btn--gh:hover{background:var(--paper-2); color:var(--ink); border-color:var(--line-3)} .btn--lt{background:var(--inv-1); color:var(--slab)} .btn--lt:hover{background:#fff; color:var(--slab)} .btn--ghost-inv{background:transparent; color:var(--inv-1); border:1px solid var(--inv-line)} .btn--ghost-inv:hover{background:rgba(241,243,236,.08); color:var(--inv-1)} .btn[disabled],.btn[aria-disabled="true"]{ background:var(--paper-2); color:var(--ink-3); cursor:not-allowed; border:1px solid var(--line); } .btn[disabled]:hover{background:var(--paper-2); color:var(--ink-3)} .btn__arrow{width:14px; height:8px; flex:none} /* -------------------------------------------------------------------------- 6 · Surfaces -------------------------------------------------------------------------- */ .card{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow); } @media(min-width:768px){ .card{padding:26px} } @media(min-width:1200px){ .card{padding:28px} } .card--flat{box-shadow:none} .card--tint{background:var(--moss-wash); border-color:var(--tint-line); box-shadow:none} .card--wash{background:var(--surface); box-shadow:none} .slab{ background:var(--moss); color:var(--inv-1); border-radius:var(--r-slab); padding:28px; position:relative; overflow:hidden; } .slab--deep{background:var(--slab)} .slab h1,.slab h2,.slab h3,.slab h4{color:var(--inv-1)} .slab p{color:var(--inv-2)} @media(min-width:768px){ .slab{padding:34px} } @media(min-width:1200px){ .slab{padding:40px; border-radius:34px} } /* placeholder block — striped, labelled, never stock imagery */ .ph{ position:relative; border:1px dashed var(--line-2); border-radius:var(--r-choice); background: repeating-linear-gradient(-45deg, rgba(155,53,82,.05) 0 6px, transparent 6px 14px), var(--surface); display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; } .ph .caps{color:var(--ink-3)} .ph--inv{ border-color:var(--inv-line); background:repeating-linear-gradient(-45deg, rgba(240,168,184,.09) 0 6px, transparent 6px 14px), transparent; } .ph--inv .caps{color:var(--inv-3)} /* status pill */ .pill{ display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .pill--soon{background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line)} .pill--rose{background:var(--rose-wash); color:var(--rose)} .pill--moss{background:var(--moss-wash); color:var(--moss-fg)} .pill--inv{background:rgba(241,243,236,.12); color:var(--inv-1)} .pill--now{background:var(--rose-wash); color:var(--rose)} /* -------------------------------------------------------------------------- 7 · App shell -------------------------------------------------------------------------- */ .shell{ position:relative; z-index:1; max-width:var(--shell); margin:0 auto; display:grid; grid-template-columns:1fr; min-height:100vh; } @media(min-width:1080px){ .shell{grid-template-columns:var(--nav-w) minmax(0,1fr)} } /* — global navigation, desktop — */ .nav{display:none} @media(min-width:1080px){ .nav{ display:block; position:sticky; top:0; align-self:start; height:100vh; padding:26px 18px 22px 26px; display:flex; flex-direction:column; gap:26px; } } .nav__brand{display:flex; align-items:center; gap:12px; padding:4px 10px 0; color:var(--ink)} .nav__list{display:flex; flex-direction:column; gap:2px} .nav__link{ position:relative; display:flex; align-items:center; gap:12px; min-height:44px; padding:0 14px; border-radius:var(--r-chip); color:var(--ink-2); font-weight:700; font-size:15px; letter-spacing:-.006em; transition:background var(--close) var(--ease), color var(--close) var(--ease); } .nav__link:hover{background:var(--paper-2); color:var(--ink)} .nav__link[aria-current="page"]{background:var(--rose-wash); color:var(--rose)} /* the widening rule: the active item grows a rose bar, it does not get a dot */ .nav__bar{display:block; width:3px; height:14px; border-radius:2px; background:transparent; flex:none; transition:height var(--open) var(--ease-slow), background var(--close) var(--ease)} .nav__link[aria-current="page"] .nav__bar{background:var(--rose); height:22px} .nav__soon{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)} .nav__foot{margin-top:auto; padding:16px 14px 0; border-top:1px solid var(--line)} /* — main column — */ .main{min-width:0; padding:0 20px 120px} @media(min-width:768px){ .main{padding:0 32px 96px} } @media(min-width:1080px){ .main{padding:0 40px 80px} } /* — the floating pill header. Not a bar with a line under it. — */ .top{ position:sticky; top:0; z-index:20; padding:12px 0 10px; padding-top:max(12px, env(safe-area-inset-top)); } .top__in{ display:flex; align-items:center; gap:14px; min-height:56px; padding:0 10px 0 18px; border-radius:var(--r-card); background:rgba(251,247,243,.82); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); } .top__where{display:flex; align-items:center; min-width:0} .top__where b{font-weight:700; font-size:14px; letter-spacing:-.005em} .top__right{margin-left:auto; display:flex; align-items:center; gap:8px} /* -------------------------------------------------------------------------- 8 · Mobile bottom navigation -------------------------------------------------------------------------- */ .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(247,241,236,.94); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); gap:2px; } @media(min-width:1080px){ .tabbar{display:none} } .tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:52px; padding:6px 2px; border-radius:14px; color:var(--ink-3); font-size:11px; font-weight:700; letter-spacing:-.002em; text-align:center; transition:color var(--close) var(--ease), background var(--close) var(--ease); } .tab:hover{color:var(--ink-2)} .tab[aria-current="page"]{color:var(--rose); background:var(--rose-wash)} .tab__glyph{width:20px; height:14px; display:block} .tab--help[aria-current="page"]{color:var(--inv-1); background:var(--slab)} /* -------------------------------------------------------------------------- 9 · Page rhythm -------------------------------------------------------------------------- */ .page{display:flex; flex-direction:column; gap:20px; padding-top:6px} @media(min-width:768px){ .page{gap:26px} } @media(min-width:1200px){ .page{gap:30px} } .page__head{padding:14px 2px 0} @media(min-width:1200px){ .page__head{padding:22px 2px 0} } .page__head .lead{margin-top:10px; max-width:54ch} .grid-2{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr; gap:24px} } .grid-2--wide{grid-template-columns:1fr} @media(min-width:900px){ .grid-2--wide{grid-template-columns:1.34fr 1fr} } .stack{display:flex; flex-direction:column; gap:16px} .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .row--between{justify-content:space-between} /* -------------------------------------------------------------------------- 10 · Today — the moss anchor -------------------------------------------------------------------------- */ .anchor{ display:grid; grid-template-columns:1fr; gap:24px; align-items:end; } @media(min-width:900px){ .anchor{grid-template-columns:minmax(0,1fr) 260px; gap:36px} } @media(min-width:1200px){ .anchor{grid-template-columns:minmax(0,1fr) 344px} } .anchor__copy{max-width:34rem} .anchor__copy .t-hero{margin:14px 0 12px} .anchor__cta{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px} .anchor__note{margin-top:14px; font-size:14px; color:var(--inv-3)} .anchor__evidence{display:none} @media(min-width:900px){ .anchor__evidence{display:block} } /* the widening light behind the anchor — a surface opening, not a gradient wash */ .anchor__glow{ position:absolute; right:-10%; top:-40%; width:70%; height:180%; background:radial-gradient(closest-side, rgba(240,168,184,.14), transparent 72%); pointer-events:none; } /* continue — the sequence, not a percentage */ .continue{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:760px){ .continue{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px} } /* the ten-step ladder, rendered as widening bars */ .ladder{display:flex; align-items:flex-end; gap:5px; height:38px} .ladder i{ display:block; width:10px; border-radius:3px; background:var(--line-2); transition:height var(--open) var(--ease-slow), background var(--close) var(--ease); } .ladder i[data-s="done"]{background:var(--moss-2)} .ladder i[data-s="now"]{background:var(--rose)} .ladder--inv i{background:var(--inv-line)} .ladder--inv i[data-s="done"]{background:rgba(241,243,236,.5)} .ladder--inv i[data-s="now"]{background:var(--rose-lt)} /* need words now — four situations */ .situations{display:grid; grid-template-columns:1fr; gap:10px} @media(min-width:620px){ .situations{grid-template-columns:1fr 1fr} } .sit{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; min-height:64px; padding:14px 16px; border-radius:var(--r-choice); background:var(--raised); border:1px solid var(--line); cursor:pointer; transition:transform var(--close) var(--ease), border-color var(--close) var(--ease), box-shadow var(--close) var(--ease); } .sit:hover{transform:translateY(-2px); border-color:var(--line-3); box-shadow:var(--shadow)} .sit__t{font-weight:700; font-size:16px; letter-spacing:-.008em; color:var(--ink)} .sit__s{display:block; font-size:13px; color:var(--ink-3); margin-top:2px} .sit__go{margin-left:auto; width:16px; height:9px; flex:none; color:var(--ink-3); transition:color var(--close) var(--ease), transform var(--close) var(--ease)} .sit:hover .sit__go{color:var(--rose); transform:translateX(3px)} /* saved */ .saved__item{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); color:var(--ink); } .saved__item:hover{color:var(--rose)} .saved__item:hover .saved__body b{color:var(--rose)} .saved__item:first-child{border-top:0; padding-top:2px} .saved__kind{flex:none; width:74px; padding-top:2px} .saved__body{min-width:0} .saved__body b{display:block; font-weight:700; font-size:15px; letter-spacing:-.006em; color:var(--ink); transition:color var(--close) var(--ease)} /* -------------------------------------------------------------------------- 11 · The surface grid — 5 x 4. The brand's own progress object. -------------------------------------------------------------------------- */ .surface{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-width:272px} .surface--wide{max-width:none} .cellwrap{position:relative} .cell{ position:relative; display:block; width:100%; aspect-ratio:1/1; border-radius:7px; border:1px solid var(--line-2); background:var(--surface); } .cell[data-k="moss"]{background:var(--moss-2); border-color:var(--moss-2)} .cell[data-k="rose"]{background:var(--rose); border-color:var(--rose)} /* meaning is never carried by colour alone: each filled state also carries a shape */ .cell[data-k="moss"]::after, .cell[data-k="rose"]::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .cell[data-k="moss"]::after{width:8px; height:2px; border-radius:2px; background:var(--on-moss-2); opacity:.85} .cell[data-k="rose"]::after{width:7px; height:7px; border-radius:50%; border:2px solid var(--on-rose); opacity:.9} .cell.just{animation:widen var(--open) var(--ease-slow) both} @keyframes widen{from{transform:scaleX(.2); opacity:.4} to{transform:scaleX(1); opacity:1}} .legend{display:flex; flex-wrap:wrap; gap:16px 22px; margin-top:16px} .legend__i{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2)} .legend__k{width:16px; height:16px; border-radius:5px; border:1px solid var(--line-2); background:var(--surface); flex:none; position:relative} .legend__k[data-k="moss"]{background:var(--moss-2); border-color:var(--moss-2)} .legend__k[data-k="rose"]{background:var(--rose); border-color:var(--rose)} .legend__k[data-k="moss"]::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7px; height:2px; border-radius:2px; background:var(--on-moss-2); opacity:.85} .legend__k[data-k="rose"]::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:6px; height:6px; border-radius:50%; border:2px solid var(--on-rose); opacity:.9} /* -------------------------------------------------------------------------- 12 · Course -------------------------------------------------------------------------- */ .stages{display:flex; flex-direction:column} .stage{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; width:100%; text-align:left; padding:16px 16px; border:0; background:transparent; border-radius:var(--r-choice); cursor:pointer; transition:background var(--close) var(--ease); } .stage + .stage{margin-top:2px} .stage:hover{background:var(--paper-2)} .stage[data-s="locked"]{cursor:not-allowed} .stage[data-s="locked"]:hover{background:transparent} .stage[aria-current="step"]{background:var(--rose-wash)} .stage__n{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line); } .stage[data-s="done"] .stage__n{background:var(--moss-2); color:var(--on-moss-2); border-color:var(--moss-2)} .stage[aria-current="step"] .stage__n{background:var(--rose); color:var(--on-rose); border-color:var(--rose)} .stage__t{font-weight:700; font-size:16px; letter-spacing:-.008em; color:var(--ink)} .stage[data-s="locked"] .stage__t{color:var(--ink-3)} .stage__d{display:block; font-size:13px; color:var(--ink-3); margin-top:2px} .stage__meta{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)} .lessonlist{display:flex; flex-direction:column; gap:2px; margin-top:6px} .lrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; width:100%; text-align:left; padding:14px 16px; border:0; border-radius:var(--r-chip); background:transparent; cursor:pointer; transition:background var(--close) var(--ease); } .lrow:hover{background:var(--paper-2)} .lrow[aria-current="page"]{background:var(--rose-wash)} .lrow__tick{width:20px; height:20px; flex:none; border-radius:6px; border:1px solid var(--line-2); background:var(--surface); display:grid; place-items:center} .lrow[data-done="1"] .lrow__tick{background:var(--moss-2); border-color:var(--moss-2)} .lrow__tick svg{width:11px; height:8px; color:var(--on-moss-2); opacity:0} .lrow[data-done="1"] .lrow__tick svg{opacity:1} .lrow__t{font-weight:700; font-size:15px; letter-spacing:-.006em} .lrow__m{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)} /* -------------------------------------------------------------------------- 13 · Lesson — sequence panel / reading column / context rail -------------------------------------------------------------------------- */ .lesson{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:1240px){ .lesson{grid-template-columns:200px minmax(0,var(--read)) minmax(0,236px); gap:24px; align-items:start} } .seqpanel{display:none} @media(min-width:1240px){ .seqpanel{display:block; position:sticky; top:84px} } .seq__row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border:0; border-radius:12px; background:transparent; cursor:pointer; font-size:13px; color:var(--ink-2); transition:background var(--close) var(--ease); } .seq__row:hover{background:var(--paper-2); color:var(--ink)} .seq__row[aria-current="true"]{background:var(--rose-wash); color:var(--rose); font-weight:700} .seq__row[data-s="locked"]{color:var(--ink-3); cursor:not-allowed} .seq__row[data-s="locked"]:hover{background:transparent} .seq__n{font-variant-numeric:tabular-nums; font-weight:700; width:14px; flex:none} .seq__row[data-done="1"] .seq__n{color:var(--moss-fg)} /* mobile: the sequence collapses into a compact progress control */ .seqbar{display:flex; align-items:center; flex-wrap:wrap; gap:12px 14px; padding:16px} .seqbar .ladder{order:3; flex-basis:100%; height:30px} .seqbar .sm{order:1} .seqbar .iconbtn{order:2; margin-left:auto} @media(min-width:1240px){ .seqbar{display:none} } .reading{min-width:0} .reading .lead{margin-bottom:0} .block{padding:26px 0; border-top:1px solid var(--line)} .block:first-of-type{border-top:0; padding-top:8px} .block__h{margin:10px 0 12px} .block p{max-width:62ch} .block .caps + p{margin-top:12px} .borrow{ background:var(--moss-wash); border-radius:var(--r-card); padding:22px 24px 22px 26px; border:1px solid var(--tint-line); border-left:3px solid var(--rose); } .borrow__s{font-size:19px; line-height:1.4; letter-spacing:-.012em; font-weight:700; color:var(--ink)} @media(min-width:768px){ .borrow__s{font-size:21px} } .responses{display:flex; flex-direction:column; gap:0} .resp{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:14px 0; border-top:1px solid var(--line)} .resp:first-child{border-top:0} .resp__k{width:14px; height:2px; border-radius:2px; background:var(--moss-2); margin-top:11px; flex:none} .resp b{display:block; font-weight:700; font-size:15px} .observe{display:flex; flex-direction:column; gap:0} .obsrow{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--line)} .obsrow:first-child{border-top:0} .obsrow__n{font-size:12px; font-weight:800; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:3px} .actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); } .lessonfoot{ display:flex; justify-content:space-between; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; } /* context rail */ .rail{display:flex; flex-direction:column; gap:14px} @media(min-width:1240px){ .rail{position:sticky; top:84px} } .railcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px} .railcard .caps{margin-bottom:9px} .railcard p{font-size:14px; line-height:1.55; color:var(--ink-2)} .railcard--key{background:var(--raised); box-shadow:var(--shadow)} .railcard__key{font-size:16px; line-height:1.42; font-weight:700; letter-spacing:-.008em; color:var(--ink)} .railcard--moss{background:var(--moss); border-color:var(--moss)} .railcard--moss .caps{color:var(--inv-3)} .railcard--moss p{color:var(--inv-2)} .railcard--moss b{color:var(--inv-1)} /* -------------------------------------------------------------------------- 14 · Tools -------------------------------------------------------------------------- */ .tools{display:grid; grid-template-columns:1fr; gap:16px} @media(min-width:680px){ .tools{grid-template-columns:1fr 1fr} } @media(min-width:1320px){ .tools{grid-template-columns:1fr 1fr 1fr} } .tool{ display:flex; flex-direction:column; gap:14px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow); } .tool__glyph{height:74px; border-radius:14px} .tool__t{margin-top:2px} .tool__p{font-size:14px; line-height:1.55; color:var(--ink-2); flex:1} .tool__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line)} .tool__when{font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.06em; text-transform:uppercase} /* -------------------------------------------------------------------------- 15 · Scripts -------------------------------------------------------------------------- */ .scriptlayout{display:grid; grid-template-columns:1fr; gap:20px} .scriptlayout > *{min-width:0} @media(min-width:1080px){ .scriptlayout{grid-template-columns:232px minmax(0,1fr); gap:28px; align-items:start} } .filters{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; min-width:0; -webkit-overflow-scrolling:touch; scrollbar-width:none} .filters::-webkit-scrollbar{display:none} @media(min-width:1080px){ .filters{position:sticky; top:84px; flex-direction:column; overflow:visible; padding:0} } .filter{ flex:none; min-height:40px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--raised); color:var(--ink-2); font-size:14px; font-weight:700; letter-spacing:-.004em; cursor:pointer; white-space:nowrap; transition:background var(--close) var(--ease), color var(--close) var(--ease), border-color var(--close) var(--ease); } @media(min-width:1080px){ .filter{width:100%; text-align:left; border-radius:12px; border-color:transparent; background:transparent; display:flex; align-items:center; gap:10px; white-space:normal; min-height:42px; padding:8px 12px} .filter__c{margin-left:auto} } .filter:hover{background:var(--paper-2); color:var(--ink)} .filter[aria-pressed="true"]{background:var(--rose-wash); color:var(--rose); border-color:transparent} .filter__c{margin-left:8px; font-size:12px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums} .filter[aria-pressed="true"] .filter__c{color:var(--rose)} .search{ display:flex; align-items:center; gap:10px; height:48px; padding:0 16px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-field); } .search input{ flex:1; min-width:0; border:0; background:transparent; font-size:15px; color:var(--ink); outline:none; } .search input::placeholder{color:var(--ink-3)} .search:focus-within{box-shadow:0 0 0 3px var(--rose-wash), 0 0 0 4px var(--rose)} .scripts{display:grid; grid-template-columns:1fr; gap:16px} @media(min-width:880px){ .scripts{grid-template-columns:1fr 1fr} } .script{ display:flex; flex-direction:column; gap:14px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow); } .script__line{ font-size:18px; line-height:1.42; letter-spacing:-.01em; font-weight:700; color:var(--ink); border-left:3px solid var(--rose); padding-left:16px; min-height:52px; } @media(min-width:768px){ .script__line{font-size:19px} } .script__ctx{font-size:14px; line-height:1.55; color:var(--ink-2); flex:1} .variants{display:flex; gap:6px; flex-wrap:wrap} .variant{ min-height:34px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:700; cursor:pointer; transition:background var(--close) var(--ease), color var(--close) var(--ease); } .variant:hover{background:var(--paper-2); color:var(--ink)} .variant[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)} .script__foot{display:flex; align-items:center; gap:8px; padding-top:14px; border-top:1px solid var(--line)} .iconbtn{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-size:14px; font-weight:700; cursor:pointer; transition:background var(--close) var(--ease), color var(--close) var(--ease), border-color var(--close) var(--ease); } .iconbtn:hover{background:var(--paper-2); color:var(--ink)} .iconbtn[aria-pressed="true"]{background:var(--moss-wash); border-color:var(--line-2); color:var(--moss-fg)} .iconbtn svg{width:15px; height:15px; flex:none} /* -------------------------------------------------------------------------- 16 · Your read -------------------------------------------------------------------------- */ .readgrid{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:980px){ .readgrid{grid-template-columns:1.15fr 1fr; gap:24px} } .number{display:flex; align-items:baseline; gap:10px; margin:6px 0 10px} .number b{font-size:46px; line-height:1; letter-spacing:-.03em; font-weight:800; color:var(--rose)} @media(min-width:1200px){ .number b{font-size:54px} } .number span{font-size:15px; color:var(--ink-2)} .trend{display:flex; align-items:flex-end; gap:8px; height:88px; margin:20px 0 10px} .trend i{flex:1; border-radius:4px 4px 0 0; background:var(--moss-2); display:block} .trend i:last-child{background:var(--rose)} .trendlabels{display:flex; gap:10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)} .trendlabels span{flex:1; text-align:center} .obs{display:flex; flex-direction:column} .obsitem{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 0; border-top:1px solid var(--line)} .obsitem:first-child{border-top:0; padding-top:4px} .obsitem__k{width:16px; height:16px; border-radius:5px; margin-top:3px; flex:none; position:relative; border:1px solid var(--line-2); background:var(--surface)} .obsitem__k[data-k="moss"]{background:var(--moss-2); border-color:var(--moss-2)} .obsitem__k[data-k="rose"]{background:var(--rose); border-color:var(--rose)} .obsitem__k[data-k="moss"]::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7px; height:2px; border-radius:2px; background:var(--on-moss-2); opacity:.85} .obsitem__k[data-k="rose"]::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:6px; height:6px; border-radius:50%; border:2px solid var(--on-rose); opacity:.9} .obsitem__w{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; padding-top:3px} .obsitem p{font-size:15px; margin:0; color:var(--ink)} .obsitem em{display:block; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:2px} /* -------------------------------------------------------------------------- 17 · Help now — the deep moss room -------------------------------------------------------------------------- */ .help__grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px} @media(min-width:680px){ .help__grid{grid-template-columns:1fr 1fr; gap:12px} } .helpcard{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; min-height:74px; padding:16px 18px; border-radius:var(--r-choice); background:rgba(241,243,236,.07); border:1px solid var(--inv-line); color:var(--inv-1); cursor:pointer; transition:background var(--close) var(--ease), transform var(--close) var(--ease); } .helpcard:hover{background:rgba(241,243,236,.13); transform:translateY(-2px)} .helpcard b{display:block; font-size:16px; font-weight:700; letter-spacing:-.008em} .helpcard span{display:block; font-size:13px; color:var(--inv-3); margin-top:2px} .helpcard__go{margin-left:auto; width:16px; height:9px; color:var(--rose-lt); flex:none} /* -------------------------------------------------------------------------- 18 · Community -------------------------------------------------------------------------- */ .principles{display:grid; grid-template-columns:1fr; gap:0; margin-top:8px} @media(min-width:760px){ .principles{grid-template-columns:1fr 1fr; gap:0 34px} } .principle{padding:18px 0; border-top:1px solid var(--inv-line)} .principle b{display:block; font-size:16px; font-weight:700; color:var(--inv-1); letter-spacing:-.008em} .principle span{display:block; font-size:14px; color:var(--inv-2); margin-top:4px; line-height:1.55} /* -------------------------------------------------------------------------- 19 · Toast -------------------------------------------------------------------------- */ .toast{ position:fixed; left:50%; bottom:88px; z-index:60; transform:translate(-50%,10px); background:var(--ink); color:var(--paper); border-radius:var(--r-pill); padding:12px 22px; font-size:14px; font-weight:700; opacity:0; pointer-events:none; transition:opacity var(--close) var(--ease), transform var(--close) var(--ease); box-shadow:var(--shadow-lift); max-width:calc(100vw - 32px); text-align:center; } @media(min-width:1080px){ .toast{bottom:34px} } .toast.on{opacity:1; transform:translate(-50%,0)} /* -------------------------------------------------------------------------- 20 · Reveal — a safety valve, content is never invisible for long -------------------------------------------------------------------------- */ .rv{opacity:0; transform:translateY(10px)} .rv.in{opacity:1; transform:none; transition:opacity var(--open) var(--ease), transform var(--open) var(--ease)} html:not(.js) .rv{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .rv{opacity:1; transform:none} } .noscript{margin:20px 0; padding:18px 20px; border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--surface)} /* utility */ .vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .mt-s{margin-top:10px} .mt-m{margin-top:18px} .mt-l{margin-top:26px} .hairline{height:1px; background:var(--line); border:0; margin:0} /* the widening figure inside a dark slab: top-right, out of the reading path */ .slabfig{display:none} @media(min-width:900px){ .slabfig{display:block; position:absolute; right:34px; top:34px; pointer-events:none} .slab .row .slabfig{position:static; right:auto; top:auto} } /* ========================================================================== 21 · Dark mode -------------------------------------------------------------------------- Designed, not inverted. The ground is a warm charcoal, the surfaces are dark moss and warm near-black, the type is a muted warm white, and rose stays the single accent. Every pair below was measured, not estimated. The resolved theme is written to by the boot script in each page's head, so there is exactly one selector and no flash. ========================================================================== */ :root[data-theme="dark"]{ color-scheme:dark; --paper:#14110F; --paper-2:#1A1614; --surface:#1C1815; --raised:#221E1B; --ink:#EDE6E1; --ink-2:#BFB3AC; --ink-3:#9C8F88; --ink-4:#7C716B; --line:#322B27; --line-2:#786861; --line-3:#8C7A72; --rose:#E8879E; --rose-h:#F0A8B8; --rose-lt:#F0A8B8; --rose-wash:#33222A; --moss:#2F3B28; --moss-2:#7CA06F; --moss-wash:#1F241C; --slab:#26301F; --inv-1:#E9EDE4; --foot:#11150E; --on-rose:#1A1210; --rose-fill:#BC4869; /* 4.92:1 with a white label, 3.82:1 against the ground */ --rose-fill-h:#A8395A; --on-rose-fill:#FFFFFF; --on-moss-2:#14170F; --moss-fg:#9CBE90; --tint-line:rgba(233,237,228,.10); --inv-2:rgba(233,237,228,.78); --inv-3:rgba(233,237,228,.66); --inv-line:rgba(233,237,228,.16); /* on a dark ground a shadow is a shape, not a glow: keep it low and wide */ --shadow:0 1px 0 rgba(255,255,255,.02), 0 14px 32px -20px rgba(0,0,0,.8); --shadow-lift:0 1px 0 rgba(255,255,255,.03), 0 26px 52px -24px rgba(0,0,0,.9); } /* the paper grain is a multiply on light stock; on dark it has to lift, gently */ :root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.055 } /* translucent chrome needs its own ground in each theme */ :root[data-theme="dark"] .top__in{ background:rgba(28,24,21,.82) } :root[data-theme="dark"] .tabbar{ background:rgba(20,17,15,.94) } /* placeholder stripes are invisible at 5% on charcoal */ :root[data-theme="dark"] .ph{ background: repeating-linear-gradient(-45deg, rgba(232,135,158,.10) 0 6px, transparent 6px 14px), var(--surface); } /* a light-on-dark button on a moss slab stays light — it is the same object */ :root[data-theme="dark"] .btn--lt{ background:var(--inv-1); color:#1B231A } :root[data-theme="dark"] .btn--lt:hover{ background:#fff; color:#1B231A } /* disabled controls keep their intent without pretending to be pressable */ :root[data-theme="dark"] .btn[disabled], :root[data-theme="dark"] .btn[aria-disabled="true"]{ background:var(--paper-2); color:var(--ink-3); border-color:var(--line); } /* the focus ring keeps its shape; only the wash changes */ :root[data-theme="dark"] :where(a,button,[tabindex]:not([tabindex="-1"]),input,select,summary):focus-visible{ box-shadow:0 0 0 3px var(--rose-wash), 0 0 0 4px var(--rose); } /* The empty cell must still read as a cell on a dark ground. Only the empty one: this selector outranks .cell[data-k="moss"], so it has to exclude the filled states explicitly or it wipes the whole grid. */ :root[data-theme="dark"] .cell:not([data-k="moss"]):not([data-k="rose"]), :root[data-theme="dark"] .legend__k:not([data-k="moss"]):not([data-k="rose"]), :root[data-theme="dark"] .obsitem__k:not([data-k="moss"]):not([data-k="rose"]){ background:var(--paper-2); border-color:var(--line-2); } /* The mark's neutral bars need more presence on a dark ground — but only the neutral ones. Overriding the accent and the state colours here was a real bug: the dark selector outranks .ladder i[data-s="done"]. */ :root[data-theme="dark"] .mark i:not(:nth-child(4)){ background:var(--line-3) } :root[data-theme="dark"] .ladder i:not([data-s]){ background:var(--line-2) } :root[data-theme="dark"] .ladder i[data-s="next"]{ background:var(--line-2) } /* form fields: the boundary carries 3:1 against its own fill */ :root[data-theme="dark"] .search{ border-color:var(--line-2) } :root[data-theme="dark"] .field__input{ border-color:var(--line-2) } /* ========================================================================== 22 · Account The sidebar block sits at the bottom-left, the mobile control at the top-right. Both open the same menu; only its presentation differs. ========================================================================== */ .acct{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); position:relative} .acct__btn{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; min-height:56px; padding:8px 10px; border:0; border-radius:var(--r-chip); background:transparent; cursor:pointer; color:var(--ink); transition:background var(--close) var(--ease); } .acct__btn:hover{background:var(--paper-2)} .acct__btn[aria-expanded="true"]{background:var(--paper-2)} .acct__av{ width:34px; height:34px; flex:none; border-radius:11px; overflow:hidden; display:grid; place-items:center; background:var(--moss-2); color:var(--on-moss-2); font-size:13px; font-weight:800; letter-spacing:-.01em; } .acct__av img{width:100%; height:100%; object-fit:cover; display:block} .acct__av--none{background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line)} .acct__id{min-width:0; flex:1} .acct__id b{display:block; font-size:14px; font-weight:700; letter-spacing:-.006em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .acct__id span{display:block; font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .acct__chev{width:12px; height:8px; flex:none; color:var(--ink-3); transition:transform var(--close) var(--ease)} .acct__btn[aria-expanded="true"] .acct__chev{transform:rotate(180deg)} /* The menu lives at body level and is positioned against whichever control opened it. That is what lets one menu serve the sidebar button and the mobile header button without duplicating an id into a hidden sidebar. */ .acctmenu{ position:fixed; z-index:50; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-card); padding:8px; box-shadow:var(--shadow-lift); max-height:calc(100vh - 120px); overflow-y:auto; } .acctmenu[hidden]{display:none} .acctmenu__head{padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px} .acctmenu__head b{display:block; font-size:14px; font-weight:700} .acctmenu__head span{display:block; font-size:12px; color:var(--ink-3); word-break:break-word} .acctmenu__item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:44px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--ink-2); font-size:14px; font-weight:700; letter-spacing:-.004em; cursor:pointer; transition:background var(--close) var(--ease), color var(--close) var(--ease); } .acctmenu__item:hover{background:var(--paper-2); color:var(--ink)} .acctmenu__item[aria-current="page"]{background:var(--rose-wash); color:var(--rose)} .acctmenu__sep{height:1px; background:var(--line); margin:6px 8px} .acctmenu__item--out{color:var(--ink-2)} .acctmenu__bar{display:block; width:3px; height:14px; border-radius:2px; background:transparent; flex:none} .acctmenu__item[aria-current="page"] .acctmenu__bar{background:var(--rose); height:20px} /* the same menu as a sheet on small screens */ .acctscrim{ position:fixed; inset:0; z-index:49; background:rgba(20,17,15,.44); opacity:0; transition:opacity var(--close) var(--ease); } .acctscrim[hidden]{display:none} .acctscrim.on{opacity:1} /* the scrim belongs to the mobile sheet; a desktop popover does not dim the page */ @media(min-width:1080px){ .acctscrim{display:none !important} } @media(max-width:1079px){ .acctmenu{ border-radius:var(--r-slab); padding:10px } .acctmenu__item{min-height:48px; font-size:15px} } /* the mobile account control in the pill header */ .sqbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:0 8px; border-radius:14px; border:1px solid var(--line); background:var(--raised); cursor:pointer; color:var(--ink); transition:background var(--close) var(--ease), border-color var(--close) var(--ease); } .sqbtn:hover{background:var(--paper-2)} .sqbtn .acct__av{width:28px; height:28px; border-radius:9px; font-size:12px} @media(min-width:1080px){ .top__acct{display:none} } .top__wm{display:flex; align-items:center; gap:10px; color:var(--ink); min-width:0} .top__wm .wordmark{font-size:16px} @media(min-width:1080px){ .top__wm{display:none} } @media(max-width:1079px){ .top__where{display:none} } @media(max-width:600px){ .top__day{display:none} } /* ========================================================================== 23 · Settings ========================================================================== */ .settings{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:1000px){ .settings{grid-template-columns:216px minmax(0,1fr); gap:28px; align-items:start} } .settings > *{min-width:0} .setnav{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:none} .setnav::-webkit-scrollbar{display:none} @media(min-width:1000px){ .setnav{position:sticky; top:84px; flex-direction:column; overflow:visible; padding:0; gap:2px} } .setnav a{ flex:none; display:flex; align-items:center; gap:10px; min-height:42px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--raised); color:var(--ink-2); font-size:14px; font-weight:700; white-space:nowrap; transition:background var(--close) var(--ease), color var(--close) var(--ease); } @media(min-width:1000px){ .setnav a{width:100%; border-radius:12px; border-color:transparent; background:transparent; padding:8px 12px} } .setnav a:hover{background:var(--paper-2); color:var(--ink)} .setnav a[aria-current="page"]{background:var(--rose-wash); color:var(--rose); border-color:transparent} .setsection + .setsection{margin-top:20px} .setrow{ display:grid; grid-template-columns:1fr; gap:12px; padding:18px 0; border-top:1px solid var(--line); } .setrow:first-of-type{border-top:0; padding-top:4px} @media(min-width:680px){ .setrow{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px} } .setrow__t{font-size:15px; font-weight:700; letter-spacing:-.006em; display:block} .setrow__d{font-size:14px; color:var(--ink-2); margin-top:4px; max-width:52ch} /* toggle — a widening bar, not a rounded knob that bounces */ .switch{ position:relative; width:52px; height:30px; flex:none; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); cursor:pointer; padding:0; transition:background var(--close) var(--ease), border-color var(--close) var(--ease); } .switch::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--ink-3); transition:transform var(--open) var(--ease-slow), background var(--close) var(--ease); } .switch[aria-checked="true"]{background:var(--rose-fill); border-color:var(--rose-fill)} .switch[aria-checked="true"]::after{transform:translateX(22px); background:var(--on-rose-fill)} .switch[disabled]{opacity:.5; cursor:not-allowed} /* theme picker */ .themes{display:grid; grid-template-columns:1fr; gap:12px} @media(min-width:620px){ .themes{grid-template-columns:repeat(3,1fr)} } .theme{ text-align:left; padding:0; border:1px solid var(--line); border-radius:var(--r-choice); background:var(--raised); cursor:pointer; overflow:hidden; transition:border-color var(--close) var(--ease), box-shadow var(--close) var(--ease); } .theme:hover{border-color:var(--line-3)} .theme[aria-checked="true"]{border-color:var(--rose); box-shadow:0 0 0 1px var(--rose)} .theme__swatch{height:76px; display:flex; align-items:flex-end; gap:0; padding:0} .theme__swatch i{display:block; flex:1; height:100%} .theme__body{display:flex; align-items:center; gap:10px; padding:13px 15px; border-top:1px solid var(--line)} .theme__body b{font-size:14px; font-weight:700} .theme__tick{ margin-left:auto; width:18px; height:18px; border-radius:50%; flex:none; border:1px solid var(--line-2); display:grid; place-items:center; } .theme[aria-checked="true"] .theme__tick{background:var(--rose); border-color:var(--rose)} .theme__tick svg{width:9px; height:7px; color:var(--on-rose); opacity:0} .theme[aria-checked="true"] .theme__tick svg{opacity:1} /* destructive actions get a bordered block, never a red field */ .danger{border:1px solid var(--line-2); border-radius:var(--r-card); padding:22px} .danger h3{margin-bottom:8px} .confirm{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)} .confirm[hidden]{display:none}