:root{
  --bg:#f6f8fb; --surface:#fff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eff6ff;
  --error:#b91c1c; --error-soft:#fef2f2; --success:#047857; --success-soft:#ecfdf5;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);font-size:.9375rem;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
.muted{color:var(--muted)} .small{font-size:13px} .inline{display:inline}
.spam-hint{font-size:1rem;line-height:1.5} /* "Check your spam or junk folder" on /check-email and /forgot (sent): as large as body text, not small print */
.spam-hl{background:#fef3c7;color:#78350f;padding:1px 6px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* soft yellow highlight; dark themes override below */
[data-theme=dark] .spam-hl,[data-theme=dark_blue] .spam-hl,[data-theme=slate_blue] .spam-hl{background:rgba(251,191,36,.2);color:#fde68a}
@media (prefers-color-scheme:dark){[data-theme=system] .spam-hl{background:rgba(251,191,36,.2);color:#fde68a}}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--text);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#2563eb 60%,#1e40af);position:relative;box-shadow:0 2px 6px rgba(37,99,235,.35)}
.brand-mark::after{content:"";position:absolute;inset:8px 7px 9px;border-radius:3px;background:#fff;opacity:.95}
.brand-lg{font-size:20px;margin-bottom:24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;padding:10px 16px;font:600 15px/1.2 var(--font);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;color:var(--text);background:var(--surface)}
.btn:hover{text-decoration:none}
.btn:focus-visible,input:focus-visible,.pw-toggle:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:1px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:var(--surface);border-color:var(--border)}
.btn-ghost:hover{background:#f9fafb;border-color:#d1d5db}
.btn-sm{padding:7px 12px;font-size:14px}
.btn-lg{padding:13px 22px;font-size:16px}
.btn-block{width:100%}

/* Auth pages */
.auth-body{min-height:100vh;display:flex;background:radial-gradient(1200px 600px at 50% -200px,#e0ecff 0,var(--bg) 60%)}
.auth-wrap{margin:auto;width:100%;max-width:420px;padding:40px 20px;display:flex;flex-direction:column;align-items:center}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.auth-card{width:100%;padding:32px}
.auth-title{font-size:22px;letter-spacing:-.01em}
.auth-switch{text-align:center;margin:20px 0 0;color:var(--muted);font-size:14px}
.auth-foot{color:var(--muted);font-size:13px;margin-top:20px}

/* Forms */
.form{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field-row{display:flex;justify-content:space-between;align-items:baseline}
.field-row a{font-weight:500}
.optional{font-style:normal;font-weight:400;color:var(--muted);margin-left:4px}
input[type=email],input[type=password],input[type=text],input[type=tel],input[type=search],input[type=url]{width:100%;font:400 15px var(--font);padding:11px 12px;border:1px solid #d1d5db;border-radius:9px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);outline:none}
.hint{font-weight:400;color:var(--muted);font-size:12.5px}
.field-error{font-weight:500;color:var(--error);font-size:13px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font:600 13px var(--font);padding:6px 8px;border-radius:6px;cursor:pointer}
.pw-toggle:hover{background:#f3f4f6;color:var(--text)}
.check{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:9px;cursor:pointer;background:#fafafa}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--primary)}
.check span{display:flex;flex-direction:column;font-size:14px}
.check small{color:var(--muted);font-size:12.5px}

/* Alerts */
.alert{padding:11px 14px;border-radius:9px;font-size:14px;margin-bottom:14px;border:1px solid}
.alert-error{background:var(--error-soft);border-color:#fecaca;color:var(--error)}
.alert-success{background:var(--success-soft);border-color:#a7f3d0;color:var(--success)}
.alert-info{background:var(--primary-soft);border-color:#bfdbfe;color:#1e40af}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topnav{display:flex;align-items:center;gap:16px}
.topnav > a:not(.btn),.topnav-more > a:not(.btn){color:var(--text);font-weight:500}
.user-chip{font-size:14px;color:var(--muted);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Home */
.hero{max-width:760px;margin:0 auto;padding:88px 24px 48px;text-align:center}
.hero h1{font-size:44px;letter-spacing:-.025em}
.lead{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 28px}
.lead-line{display:block}.lead-line+.lead-line{margin-top:7px} /* homepage hero: two lines with a small gap */
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* How-to animations (assets/js/anim.js): a fixed 16:10 box, so nothing shifts when the stage iframe replaces the poster.
   The poster shows without JS, with reduced motion and on narrow screens; the iframe never takes clicks or focus. */
.hpa-embed{position:relative;width:100%;aspect-ratio:1280/800;border-radius:10px;overflow:hidden;background:#25324a;box-shadow:0 24px 60px -12px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.08)}
.hpa-embed>.hpa-poster{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.hpa-embed>iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .4s}
.hpa-embed.is-live>iframe{opacity:1}
/* homepage sequence (anim.js): the stage on screen, and the short card between the two animations */
.hpa-embed>iframe.on{opacity:1}.hpa-embed>iframe.cut{transition:none}
.hpa-card{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:6%;background:#eef1f6;opacity:0;visibility:hidden;pointer-events:none}
.hpa-card-panel{max-width:78%;padding:calc(var(--hpa-w,600px)*.05) calc(var(--hpa-w,600px)*.06);border-radius:14px;background:#1e293b;color:#f8fafc;text-align:center;box-shadow:0 18px 40px -16px rgba(15,23,42,.55)}
.hpa-card-icon{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--hpa-w,600px)*.075);height:calc(var(--hpa-w,600px)*.075);margin-bottom:calc(var(--hpa-w,600px)*.022);border-radius:50%;background:#2563eb;color:#fff;font-size:calc(var(--hpa-w,600px)*.04);line-height:1}
.hpa-card-msg{margin:0;font-size:max(15px,calc(var(--hpa-w,600px)*.037));font-weight:600;line-height:1.35;letter-spacing:-.01em}
.hpa-card-sub{margin:calc(var(--hpa-w,600px)*.016) 0 0;font-size:max(13px,calc(var(--hpa-w,600px)*.029));color:#93c5fd;font-weight:500}
@media (prefers-reduced-motion:reduce){.hpa-embed>iframe{display:none}}
.hpa-fig{max-width:720px;margin:18px 0 22px}
.hpa-fig .hpa-embed{box-shadow:0 10px 30px -10px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.08)}
.hpa-fig figcaption{margin-top:8px;font-size:.875rem;color:var(--muted)}
/* Home hero with the animation: one column (animation under the buttons) until there's room to put it beside the copy. */
.hero.has-anim{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "l" "c" "w" "p" "a"}
.has-anim>h1{grid-area:h}.has-anim>.lead{grid-area:l}.has-anim>.hero-cta{grid-area:c}.has-anim>.privacy-promise{grid-area:p}.has-anim>.hero-watch{grid-area:w}
.has-anim>.hpa-embed{grid-area:a;max-width:680px;margin:36px auto 0}
@media (min-width:1100px){
  .hero.has-anim{max-width:1240px;grid-template-columns:minmax(0,488px) minmax(0,1fr);grid-template-areas:"h a" "l a" "c a" "w a" "p a";column-gap:52px;align-items:center;align-content:center;text-align:left;padding:64px 32px 56px}
  .has-anim>h1{align-self:end}.has-anim>.lead{margin-left:0}.has-anim>.hero-cta{justify-content:flex-start}.has-anim>.hero-watch{justify-content:flex-start}.has-anim .watch-menu{left:-6px;transform:none}.has-anim .watch-btn{text-align:left}.has-anim>.privacy-promise{align-self:start;margin-left:0}
  .has-anim>.hpa-embed{max-width:none;margin:0}
}
/* "See a Live demo": outline partner to the blue primary CTA (same .btn .btn-lg size, radius and font; the 2px border takes 1px
   off the padding so both buttons are the same height). #2563eb on the page background (#f6f8fb) is 4.9:1 (AA); hover text
   #1d4ed8 on #eff6ff is 6.2:1. Dark system theme: white outline + white text (17.9:1 on #0f172a). */
.btn.btn-demo{background:transparent;border:2px solid #2563eb;color:#2563eb;padding:12px 21px}
.btn.btn-demo:hover{background:#eff6ff;border-color:#1d4ed8;color:#1d4ed8;text-decoration:none}
.btn.btn-demo:active{background:#dbeafe}
.btn.btn-demo:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:2px}
@media (prefers-color-scheme:dark){
  [data-theme=system] .btn.btn-demo{border-color:#fff;color:#fff}
  [data-theme=system] .btn.btn-demo:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
  [data-theme=system] .btn.btn-demo:active{background:rgba(255,255,255,.2)}
  [data-theme=system] .btn.btn-demo:focus-visible{outline-color:rgba(255,255,255,.5)}
}
.features{max-width:1000px;margin:0 auto;padding:24px 24px 72px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.feature h3{font-size:16px}
.feature p{color:var(--muted);margin:0;font-size:14.5px}
.feature-icon{width:40px;height:40px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.site-foot{text-align:center;color:var(--muted);font-size:13px;padding:24px;border-top:1px solid var(--border)}

/* App */
.app-main{max-width:1200px;margin:0 auto;padding:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:26px;margin:0}
.page-head p{margin:4px 0 0}
.search-wrap{width:320px;max-width:100%}
.empty{text-align:center;padding:56px 24px}
.empty-icon{font-size:34px;color:var(--primary);width:64px;height:64px;margin:0 auto 16px;border-radius:16px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center}
.empty p{max-width:460px;margin:0 auto}
.sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.section{padding:18px}

@media (max-width:720px){
  .hero{padding-top:56px}.hero h1{font-size:32px}
  .features{grid-template-columns:1fr}
  .topbar{padding:12px 16px}
  .app-main{padding:20px 16px}
  .user-chip{display:none}
  .auth-card{padding:24px}
}

/* ---------- Step 2 additions ---------- */
select{width:100%;font:400 15px var(--font);padding:10px 12px;border:1px solid #d1d5db;border-radius:9px;background:var(--surface);color:var(--text)}
input[type=number]{width:100%;font:400 15px var(--font);padding:11px 12px;border:1px solid #d1d5db;border-radius:9px;background:var(--surface);color:var(--text)}
code{font:12.5px ui-monospace,SFMono-Regular,Consolas,monospace;background:rgba(127,127,127,.12);padding:1px 5px;border-radius:5px;word-break:break-word}
.legal{font-size:12.5px;color:var(--muted);margin:0;text-align:center}
.captcha{min-height:65px}
.site-foot a,.auth-foot a{color:var(--muted);text-decoration:underline}
.page-alert{max-width:760px;margin:16px auto 0}
.prose{max-width:720px;margin:0 auto;padding:56px 24px}
.prose h1{font-size:34px}.prose h2{font-size:19px;margin-top:28px}.prose li{margin:6px 0}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;vertical-align:middle;border:1px solid transparent}
.badge-ok{background:var(--success-soft);color:var(--success);border-color:#a7f3d0}
.badge-warn{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge-bad{background:var(--error-soft);color:var(--error);border-color:#fecaca}
.badge-admin{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
.input-sm{margin-top:8px;padding:7px 10px!important;font-size:14px!important;max-width:300px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{padding:24px;margin-bottom:20px}
.panel h2{font-size:17px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline}
.panel-danger{border-color:#fecaca}
.list{list-style:none;margin:0 0 12px;padding:0}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:0}
.row-actions{display:flex;gap:8px;margin-top:10px}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;width:max-content}
.segmented label{cursor:pointer}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented span{display:block;padding:9px 16px;font-weight:500;border-right:1px solid var(--border)}
.segmented label:last-child span{border-right:0}
.segmented input:checked + span{background:var(--primary);color:#fff}
.segmented input:focus-visible + span{outline:3px solid rgba(37,99,235,.35)}
/* Account settings theme picker: eight themes (4 + 4 on desktop, 2 per row on phones) wrap into rows that fit the column (was one max-content row that ran off the card) */
.segmented.seg-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));width:100%;max-width:520px}
@media (max-width:480px){.segmented.seg-themes{grid-template-columns:repeat(2,1fr)}}
.seg-themes span{border-right:0;box-shadow:1px 0 0 var(--border),0 1px 0 var(--border);text-align:center;padding:9px 8px;white-space:nowrap}
.settings{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.settings-nav{position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}
.settings-nav a{color:var(--text);padding:8px 12px;border-radius:8px;font-weight:500}
.settings-nav a:hover{background:rgba(127,127,127,.1);text-decoration:none}
.danger-link{color:var(--error)!important}
/* Admin */
.admin-shell{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 57px)}
.admin-nav{background:var(--surface);border-right:1px solid var(--border);padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.admin-nav a{color:var(--text);padding:9px 12px;border-radius:8px;font-weight:500}
.admin-nav a:hover{background:rgba(127,127,127,.1);text-decoration:none}
.admin-nav a.active{background:var(--primary-soft);color:var(--primary)}
.admin-main{padding:28px;max-width:1200px;width:100%}
.admin-main h1{font-size:24px;margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{padding:18px}.stat-num{font-size:28px;font-weight:700}.stat-label{color:var(--muted);font-size:13px}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--border)}
.table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table .details{max-width:320px}.nowrap{white-space:nowrap}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input[type=search]{max-width:360px}.toolbar select{width:auto}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:12px 0}
.dl{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0;font-size:14px}
.dl dt{color:var(--muted)}.dl dd{margin:0}
.admin-grid{align-items:start}
.action-list{display:flex;flex-direction:column}
.action-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.action-row:last-child{border-bottom:0}
.action-danger strong{color:var(--error)}
@media (max-width:860px){
  .settings,.admin-shell,.grid-2{grid-template-columns:1fr}
  .settings-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .admin-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border)}
  .dl{grid-template-columns:1fr}
}
/* Dark theme */
[data-theme=dark]{--bg:#0f172a;--surface:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:#1f2937;--primary:#3b82f6;--primary-hover:#60a5fa;--primary-soft:rgba(59,130,246,.15);--error:#f87171;--error-soft:rgba(248,113,113,.12);--success:#34d399;--success-soft:rgba(52,211,153,.12);--shadow:none}
@media (prefers-color-scheme:dark){
  [data-theme=system]{--bg:#0f172a;--surface:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:#1f2937;--primary:#3b82f6;--primary-hover:#60a5fa;--primary-soft:rgba(59,130,246,.15);--error:#f87171;--error-soft:rgba(248,113,113,.12);--success:#34d399;--success-soft:rgba(52,211,153,.12);--shadow:none}
}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] .check{background:#0b1220;border-color:#334155;color:var(--text)}
[data-theme=dark] .auth-body{background:var(--bg)}
[data-theme=dark] .btn-ghost:hover{background:#1f2937}
@media (prefers-color-scheme:dark){
  [data-theme=system] input,[data-theme=system] select,[data-theme=system] .check{background:#0b1220;border-color:#334155;color:var(--text)}
  [data-theme=system] .auth-body{background:var(--bg)}
  [data-theme=system] .btn-ghost:hover{background:#1f2937}
}

/* ---------- Step 3: font sizes, dark blue theme, homepage ---------- */
html{font-size:16px}
html[data-font=small]{font-size:14px}
html[data-font=large]{font-size:18px}
html[data-font=xl]{font-size:20px}
[data-theme=dark_blue]{--bg:#0a1730;--surface:#0f2244;--text:#e8effc;--muted:#9fb2d6;--border:#1c3763;--primary:#4c8dff;--primary-hover:#74a7ff;--primary-soft:rgba(76,141,255,.16);--error:#ff8a8a;--error-soft:rgba(255,138,138,.12);--success:#4ade80;--success-soft:rgba(74,222,128,.12);--shadow:0 1px 2px rgba(0,0,0,.3)}
[data-theme=dark_blue] input,[data-theme=dark_blue] select,[data-theme=dark_blue] textarea,[data-theme=dark_blue] .check{background:#0b1b38;border-color:#27477a;color:var(--text)}
[data-theme=dark_blue] .auth-body{background:var(--bg)}
[data-theme=dark_blue] .btn-ghost:hover{background:#16305c}
/* Slate blue theme: deep, muted slate page (#324362), darker slate cards (#23324e), light text. --primary is the light
   link/accent colour (4.7:1 on the page, 6.9:1 on cards); controls that put white text on a primary fill use
   --primary-fill instead (white on #1f55c9 is 6.6:1). Focus rings are amber so they show on every blue. */
[data-theme=slate_blue]{color-scheme:dark;--bg:#324362;--surface:#23324e;--text:#f4f7fd;--muted:#d2ddf0;--border:#4d6491;--primary:#c3d7ff;--primary-hover:#e0eaff;--primary-soft:rgba(195,215,255,.16);--primary-fill:#1f55c9;--primary-fill-hover:#1a47a8;--focus:#ffd166;--error:#ffcccc;--error-soft:rgba(255,204,204,.14);--success:#a6f0c2;--success-soft:rgba(166,240,194,.14);--shadow:0 1px 2px rgba(10,20,45,.25),0 8px 24px rgba(10,20,45,.18);--bot-text:#ddd3ff;--bot:#b9a6ff;--bot-soft:rgba(185,166,255,.18);--bot-border:rgba(185,166,255,.7)}
[data-theme=slate_blue] input,[data-theme=slate_blue] select,[data-theme=slate_blue] textarea,[data-theme=slate_blue] .check{background:#1a2640;border-color:#8ea6d2;color:var(--text)}
[data-theme=slate_blue] input::placeholder,[data-theme=slate_blue] textarea::placeholder{color:#b7c6e2;opacity:1}
[data-theme=slate_blue] input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(255,209,102,.3)}
[data-theme=slate_blue] .auth-body{background:var(--bg)}
[data-theme=slate_blue] .btn-ghost:hover{background:#3b4f73}
[data-theme=slate_blue] .pw-toggle:hover{background:#3b4f73;color:var(--text)}
[data-theme=slate_blue] .btn:focus-visible,[data-theme=slate_blue] input:focus-visible,[data-theme=slate_blue] .pw-toggle:focus-visible,[data-theme=slate_blue] .seg button:focus-visible,[data-theme=slate_blue] a:focus-visible,[data-theme=slate_blue] summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-theme=slate_blue] .btn-primary,[data-theme=slate_blue] .segmented input:checked + span,[data-theme=slate_blue] .seg button[aria-pressed=true],[data-theme=slate_blue] .avatar,[data-theme=slate_blue] .lk-count,[data-theme=slate_blue] .lk.combine-target::after,[data-theme=slate_blue] .drop-hint,[data-theme=slate_blue] .wz-num,[data-theme=slate_blue] .bookmarklet{background:var(--primary-fill);color:#fff}
[data-theme=slate_blue] .btn-edit[aria-pressed=true]{background:var(--primary-fill);border-color:#fff;color:#fff}
[data-theme=slate_blue] .btn-primary:hover{background:var(--primary-fill-hover)}
[data-theme=slate_blue] .cl-item.done .cl-check{background:#15803d;border-color:#15803d}
[data-theme=slate_blue] .lk-badge:not(.lk-badge-bot){color:#fff}
[data-theme=slate_blue] .sec-grip{opacity:.8}
[data-theme=slate_blue] body.editing .sec-grip{opacity:.95}
[data-theme=slate_blue] .note-btn{opacity:.7}
[data-theme=slate_blue] .icon-btn:hover{background:rgba(255,255,255,.12)}
/* Chestnut theme: deep, muted brown page (#412c1f), darker brown cards (#2a1a10), warm off-white text, beige muted text.
   Orange is the accent: white text sits on the deep --primary-fill orange (#c2410c, 5.2:1; hover #9a3412, 7.3:1),
   focus rings and done ticks use a brighter orange. --primary (links, hover borders) is a light tan/cream so links
   never read like the amber section titles (--sec-title-color). */
[data-theme=chestnut]{color-scheme:dark;--bg:#412c1f;--surface:#2a1a10;--text:#fbf1e6;--muted:#e6d0bb;--border:#684a37;--primary:#f5dfc0;--primary-hover:#fff1dc;--primary-soft:rgba(245,223,192,.16);--primary-fill:#c2410c;--primary-fill-hover:#9a3412;--focus:#ffa94d;--error:#ffcccc;--error-soft:rgba(255,204,204,.14);--success:#a6f0c2;--success-soft:rgba(166,240,194,.14);--shadow:0 1px 2px rgba(30,15,5,.3),0 8px 24px rgba(30,15,5,.2);--bot-text:#ddd3ff;--bot:#c4b5fd;--bot-soft:rgba(196,181,253,.18);--bot-border:rgba(196,181,253,.7)}
[data-theme=chestnut] input,[data-theme=chestnut] select,[data-theme=chestnut] textarea,[data-theme=chestnut] .check{background:#1f130b;border-color:#b8916f;color:var(--text)}
[data-theme=chestnut] input::placeholder,[data-theme=chestnut] textarea::placeholder{color:#d2b89f;opacity:1}
[data-theme=chestnut] input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(255,169,77,.3)}
[data-theme=chestnut] .auth-body{background:var(--bg)}
[data-theme=chestnut] .btn-ghost:hover{background:#4f3526}
[data-theme=chestnut] .pw-toggle:hover{background:#4f3526;color:var(--text)}
[data-theme=chestnut] .btn:focus-visible,[data-theme=chestnut] input:focus-visible,[data-theme=chestnut] .pw-toggle:focus-visible,[data-theme=chestnut] .seg button:focus-visible,[data-theme=chestnut] a:focus-visible,[data-theme=chestnut] summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-theme=chestnut] .btn-primary,[data-theme=chestnut] .segmented input:checked + span,[data-theme=chestnut] .seg button[aria-pressed=true],[data-theme=chestnut] .avatar,[data-theme=chestnut] .lk-count,[data-theme=chestnut] .lk.combine-target::after,[data-theme=chestnut] .drop-hint,[data-theme=chestnut] .wz-num,[data-theme=chestnut] .bookmarklet{background:var(--primary-fill);color:#fff}
[data-theme=chestnut] .segmented input:checked + span,[data-theme=chestnut] .seg button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #fb923c}
[data-theme=chestnut] .btn-edit[aria-pressed=true]{background:var(--primary-fill);border-color:#fff;color:#fff}
[data-theme=chestnut] .btn-primary:hover{background:var(--primary-fill-hover)}
[data-theme=chestnut] .cl-item.done .cl-check{background:var(--primary-fill);border-color:#fb923c}
[data-theme=chestnut] .cl-bar span{background:linear-gradient(90deg,#c2410c,#fb923c)}
[data-theme=chestnut] .lk-badge:not(.lk-badge-bot){color:#fff}
[data-theme=chestnut] .sec-grip{opacity:.8}
[data-theme=chestnut] body.editing .sec-grip{opacity:.95}
[data-theme=chestnut] .note-btn{opacity:.7}
[data-theme=chestnut] .icon-btn:hover{background:rgba(255,255,255,.12)}
[data-theme=chestnut] .bookmarklet{box-shadow:0 2px 8px rgba(194,65,12,.35)}
/* Hunter green theme: deep, muted hunter green page (#243d2b), darker forest cards (#18291c), cream text, sage muted text.
   Gold/amber is the accent: white text on the --primary-fill amber (#b45309, 5.0:1; hover #92400e, 7.1:1), gold focus
   rings and ticks. --primary (links) is a pale mint (#cfe8d6, 11.8:1 on cards) so links never read like the pale-gold
   small-caps section titles. The shared green .btn-tour gets a pale-green edge here so it stands out on the green page. */
[data-theme=hunter_green]{color-scheme:dark;--bg:#243d2b;--surface:#18291c;--text:#f5f1e3;--muted:#d3dcc6;--border:#416849;--primary:#cfe8d6;--primary-hover:#eaf7ee;--primary-soft:rgba(207,232,214,.16);--primary-fill:#b45309;--primary-fill-hover:#92400e;--focus:#f2c94c;--error:#ffcccc;--error-soft:rgba(255,204,204,.14);--success:#a6f0c2;--success-soft:rgba(166,240,194,.14);--shadow:0 1px 2px rgba(5,20,10,.3),0 8px 24px rgba(5,20,10,.2);--bot-text:#ddd3ff;--bot:#c4b5fd;--bot-soft:rgba(196,181,253,.18);--bot-border:rgba(196,181,253,.7)}
[data-theme=hunter_green] input,[data-theme=hunter_green] select,[data-theme=hunter_green] textarea,[data-theme=hunter_green] .check{background:#0f1d13;border-color:#8fb096;color:var(--text)}
[data-theme=hunter_green] input::placeholder,[data-theme=hunter_green] textarea::placeholder{color:#b9c7b0;opacity:1}
[data-theme=hunter_green] input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(242,201,76,.3)}
[data-theme=hunter_green] .auth-body{background:var(--bg)}
[data-theme=hunter_green] .btn-ghost:hover{background:#2f5038}
[data-theme=hunter_green] .pw-toggle:hover{background:#2f5038;color:var(--text)}
[data-theme=hunter_green] .btn:focus-visible,[data-theme=hunter_green] input:focus-visible,[data-theme=hunter_green] .pw-toggle:focus-visible,[data-theme=hunter_green] .seg button:focus-visible,[data-theme=hunter_green] a:focus-visible,[data-theme=hunter_green] summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-theme=hunter_green] .btn-primary,[data-theme=hunter_green] .segmented input:checked + span,[data-theme=hunter_green] .seg button[aria-pressed=true],[data-theme=hunter_green] .avatar,[data-theme=hunter_green] .lk-count,[data-theme=hunter_green] .lk.combine-target::after,[data-theme=hunter_green] .drop-hint,[data-theme=hunter_green] .wz-num,[data-theme=hunter_green] .bookmarklet{background:var(--primary-fill);color:#fff}
[data-theme=hunter_green] .segmented input:checked + span,[data-theme=hunter_green] .seg button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #fbbf24}
[data-theme=hunter_green] .btn-edit[aria-pressed=true]{background:var(--primary-fill);border-color:#fff;color:#fff}
[data-theme=hunter_green] .btn-primary:hover{background:var(--primary-fill-hover)}
[data-theme=hunter_green] .cl-item.done .cl-check{background:var(--primary-fill);border-color:#fbbf24}
[data-theme=hunter_green] .cl-bar span{background:linear-gradient(90deg,#b45309,#fbbf24)}
[data-theme=hunter_green] .lk-badge:not(.lk-badge-bot){color:#fff}
[data-theme=hunter_green] .sec-grip{opacity:.8}
[data-theme=hunter_green] body.editing .sec-grip{opacity:.95}
[data-theme=hunter_green] .note-btn{opacity:.7}
[data-theme=hunter_green] .icon-btn:hover{background:rgba(255,255,255,.12)}
[data-theme=hunter_green] .bookmarklet{box-shadow:0 2px 8px rgba(180,83,9,.35)}
/* Metal theme: light-to-medium cool grey page (#c9ccd1), lighter grey cards (#e4e6e9), near-black charcoal text,
   muted grey (#444a52, 7.2:1 on cards / 5.6:1 on the page). Dark grey is the accent: white text on the --primary-fill
   charcoal (#3f444b, 9.8:1; hover #2b2f34, 13.5:1) for primary buttons, selected options, ticks and counts. --primary
   (links, selected tab, hover borders) is a dark steel (#34495f, 7.4:1 on cards); text links are underlined so they
   never read like body text or the steel small-caps section titles (#2f3a48). Focus ring is a steel blue (#3d6a96,
   4.5:1 on cards, 3.5:1 on the page). Inputs are a lighter grey with a #7c828b edge (3.1:1 on cards). */
[data-theme=metal]{color-scheme:light;--bg:#c9ccd1;--surface:#e4e6e9;--text:#16191d;--muted:#444a52;--border:#c4c8ce;--primary:#34495f;--primary-hover:#22303f;--primary-soft:rgba(52,73,95,.08);--primary-fill:#3f444b;--primary-fill-hover:#2b2f34;--focus:#3d6a96;--error:#a3161a;--error-soft:#f3dcdc;--success:#036146;--success-soft:#d7ebe3;--shadow:0 1px 2px rgba(20,25,35,.08),0 8px 24px rgba(20,25,35,.08);--sec-title-color:#2f3a48;--bot-text:#4f2fd0;--bot:#5b3ee6;--bot-soft:rgba(91,62,230,.10);--bot-border:rgba(91,62,230,.55)}
[data-theme=metal] :is(input[type=email],input[type=password],input[type=text],input[type=tel],input[type=search],input[type=url],input[type=number]),[data-theme=metal] select,[data-theme=metal] textarea,[data-theme=metal] .sec-picker select{background:#f0f1f3;border-color:#7c828b;color:var(--text)}
[data-theme=metal] .check{background:#eceef0;border-color:#b3b8bf}
[data-theme=metal] input::placeholder,[data-theme=metal] textarea::placeholder{color:#5a6069;opacity:1}
[data-theme=metal] input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(61,106,150,.28)}
[data-theme=metal] .auth-body{background:var(--bg)}
[data-theme=metal] .btn-ghost{border-color:#aeb3ba}
[data-theme=metal] .btn-ghost:hover{background:#d3d6db;border-color:#7c828b}
[data-theme=metal] .pw-toggle:hover{background:#d3d6db;color:var(--text)}
[data-theme=metal] .btn:focus-visible,[data-theme=metal] input:focus-visible,[data-theme=metal] .pw-toggle:focus-visible,[data-theme=metal] .seg button:focus-visible,[data-theme=metal] a:focus-visible,[data-theme=metal] summary:focus-visible,[data-theme=metal] [role=tab]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-theme=metal] .segmented input:focus-visible + span{outline:3px solid var(--focus);outline-offset:-3px}
[data-theme=metal] .btn-primary,[data-theme=metal] .segmented input:checked + span,[data-theme=metal] .seg button[aria-pressed=true],[data-theme=metal] .avatar,[data-theme=metal] .lk-count,[data-theme=metal] .lk.combine-target::after,[data-theme=metal] .drop-hint,[data-theme=metal] .wz-num,[data-theme=metal] .bookmarklet{background:var(--primary-fill);color:#fff}
[data-theme=metal] .btn-edit[aria-pressed=true]{background:var(--primary-fill);border-color:var(--primary-fill);color:#fff}
[data-theme=metal] .btn-primary:hover{background:var(--primary-fill-hover)}
[data-theme=metal] .cl-item.done .cl-check{background:var(--primary-fill);border-color:var(--primary-fill)}
[data-theme=metal] .cl-check{border-color:#8a9099}
[data-theme=metal] .cl-bar span{background:linear-gradient(90deg,#2b2f34,#6b727c)}
[data-theme=metal] .lk-badge:not(.lk-badge-bot){background:#d2d6db;color:var(--primary)}
[data-theme=metal] .tabs [role=tab][aria-selected=true]{color:var(--text);border-bottom-color:var(--primary-fill)}
[data-theme=metal] .alert-info{border-color:#9aa3ae;color:#22303f}
/* Info boxes (e.g. the Save window's "This site is already in … Add it anyway?"): the base colour #1e40af is for the light theme only and was
   dark-blue-on-dark-blue (unreadable) on the five dark themes. Use each theme's normal text colour there; names stay bold (pt341u). */
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=slate_blue],[data-theme=chestnut],[data-theme=hunter_green]) .alert-info{color:var(--text)}
[data-theme=metal] :is(.prose,p,li,.hint,.small) a:not(.btn):not(.bookmarklet):not(.menu-item){text-decoration:underline;text-underline-offset:2px}
[data-theme=metal] .local-help{background:#ece3c6;border-color:#c2a44f;color:#5b2c0c}
[data-theme=metal] .local-help a{color:#7c2d12}
[data-theme=metal] .bookmarklet{box-shadow:0 2px 8px rgba(30,35,45,.3)}
[data-theme=metal] .hp-banner{border-color:#aeb3ba}
/* Dark, Dark blue and System-in-dark-mode: AA fills for white text. --primary stays the link/accent colour;
   anything that puts white text on an accent fill uses the deeper --primary-fill (Dark: white on #2563eb 5.2:1,
   hover #1d4ed8 6.7:1; Dark blue: white on #2a68dd 5.1:1, hover #245bc4 6.2:1). Accent text on accent-soft chips
   uses --chip-text. The rules below are shared by all three; System only differs by being inside the dark media
   query. The var() fallbacks are the base light-theme values, so System in light mode renders exactly as before.
   KEEP the [data-theme=dark] and the System dark values identical (hpc-test/style_snap.py compares them). */
[data-theme=dark]{--primary-fill:#2563eb;--primary-fill-hover:#1d4ed8;--success-fill:#047857;--chip-text:#60a5fa}
@media (prefers-color-scheme:dark){[data-theme=system]{--primary-fill:#2563eb;--primary-fill-hover:#1d4ed8;--success-fill:#047857;--chip-text:#60a5fa}}
[data-theme=dark_blue]{--primary-fill:#2a68dd;--primary-fill-hover:#245bc4;--success-fill:#15803d;--chip-text:#74a7ff}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=system]) :is(.btn-primary,.segmented input:checked + span,.seg button[aria-pressed=true],.avatar,.lk-count,.lk.combine-target::after,.drop-hint,.wz-num,.bookmarklet){background:var(--primary-fill,var(--primary));color:#fff}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=system]) .btn-edit[aria-pressed=true]{background:var(--primary-fill,var(--primary));border-color:var(--primary-fill,var(--primary));color:#fff}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=system]) .btn-primary:hover{background:var(--primary-fill-hover,var(--primary-hover))}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=system]) .cl-item.done .cl-check{background:var(--success-fill,var(--success));border-color:var(--success-fill,var(--success))}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=system]) :is(.lk-badge:not(.lk-badge-bot),.dd-sw .btn.is-on){color:var(--chip-text,var(--primary))}
[data-theme=dark] textarea{background:#0b1220;border-color:#334155;color:var(--text)}
@media (prefers-color-scheme:dark){[data-theme=system] textarea{background:#0b1220;border-color:#334155;color:var(--text)}}
textarea{width:100%;font:400 .9375rem var(--font);padding:10px 12px;border:1px solid #d1d5db;border-radius:9px;background:var(--surface);color:var(--text);resize:vertical}
.btn,.btn-sm{font-size:.875rem}
.btn-danger-text{color:var(--error)!important}

/* Dashboard shell */
.dash-body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.dash-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 20px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.brand-text{white-space:nowrap}
.search-box{position:relative;flex:1;max-width:560px;margin:0 auto}
.search-box input{padding-left:38px;padding-right:36px;border-radius:999px;height:40px;background:var(--bg)}
.search-ico{position:absolute;left:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.kbd{display:inline-block;font:600 11px ui-monospace,Consolas,monospace;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted);background:var(--surface)}
.search-box .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.search-box input:focus + .kbd{display:none}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;min-width:32px;height:32px;padding:0 6px;cursor:pointer;font:600 .875rem var(--font);display:inline-flex;align-items:center;justify-content:center;list-style:none}
.icon-btn:hover{background:rgba(127,127,127,.12);color:var(--text)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn .sm{font-size:.85em;margin-left:1px}
.font-quick{display:flex;border:1px solid var(--border);border-radius:9px}
.menu{position:relative}
.menu > summary{list-style:none;cursor:pointer}
.menu > summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px;z-index:60}
.menu-right{right:0}
.menu-item{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:7px;color:var(--text);font:500 .875rem var(--font);cursor:pointer}
.menu-item:hover{background:rgba(127,127,127,.12);text-decoration:none}
.menu-item.danger{color:var(--error)}
.menu-pop hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.menu-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:8px 4px 6px}
.menu-who{display:flex;flex-direction:column;padding:6px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;font-size:.875rem;max-width:280px;overflow:hidden}
.menu-who span{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.menu-check{display:flex;gap:8px;align-items:center;padding:10px 4px 4px;font-size:.875rem;cursor:pointer}
#view-menu .menu-pop{width:300px}
.seg{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg button{flex:1;border:0;border-right:1px solid var(--border);background:transparent;color:var(--text);padding:7px 4px;font:500 .8rem var(--font);cursor:pointer}
.seg button:last-child{border-right:0}
/* View menu theme picker: 8 themes in two rows of 4 with 1px dividers (long names like "Hunter green" may wrap onto 2 lines) */
#view-menu .seg[data-pref=theme]{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
#view-menu .seg[data-pref=theme] button{border-right:0;padding:7px 2px;line-height:1.2;min-height:2.4em}
#view-menu .seg[data-pref=theme] button:not([aria-pressed=true]){background:var(--surface)}
.seg button[aria-pressed=true]{background:var(--primary);color:#fff}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.board-wrap{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:22px 20px 40px}
.search-status{margin:0 0 14px;color:var(--muted);font-size:.875rem}

/* Sections */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;align-items:start}
/* Masonry-like packing (home.js adds .masonry and a per-section grid-row-end span when there are 2+ columns). */
.board.masonry{grid-auto-rows:4px;row-gap:0}
@media print{.board.masonry{grid-auto-rows:auto;row-gap:18px}.board.masonry>.sec{grid-row-end:auto!important}}
.sec{--tile:104px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);border-top:3px solid var(--sec-accent,transparent)}
.sec .sec{box-shadow:none;background:transparent;border-radius:10px;margin-top:12px}
/* Section color: an optional 3px top trim, chosen from the section's ⋯ menu (Edit mode). The stored value is a canonical
   hex (home.js SEC_COLORS); each theme draws it with its own shade so it stays >=3:1 against that theme's page and cards.
   Yellow is a lemon yellow and Orange a red-orange, so neither reads as the Edit-mode amber. Bright Yellow and Lime green
   can't reach 3:1 on the light themes and still look yellow/lime, so there they get a 1px darker edge (--sec-edge, >=3:1)
   under the trim; Black gets a soft light edge on the dark themes. A subsection doesn't inherit its parent's trim. */
html{--acc-blue:#2563eb;--acc-teal:#0d9488;--acc-green:#15803d;--acc-purple:#7c3aed;--acc-red:#dc2626;--acc-pink:#db2777}
html{--acc-black:#111111;--acc-yellow:#facc15;--acc-orange:#ea580c;--acc-lime:#84cc16;--acc-electric:#0080ff;--edge-black:transparent;--edge-yellow:#a16207;--edge-lime:#4d7c0f}
html[data-theme=metal]{--acc-blue:#1d4ed8;--acc-teal:#0f766e;--acc-green:#15803d;--acc-purple:#6d28d9;--acc-red:#b91c1c;--acc-pink:#be185d}
html[data-theme=metal]{--acc-orange:#c2410c;--acc-electric:#0070e0;--edge-yellow:#854d0e;--edge-lime:#3f6212}
html:is([data-theme=dark],[data-theme=dark_blue],[data-theme=slate_blue],[data-theme=chestnut],[data-theme=hunter_green]){--acc-blue:#60a5fa;--acc-teal:#2dd4bf;--acc-green:#4ade80;--acc-purple:#a78bfa;--acc-red:#f87171;--acc-pink:#f472b6}
html:is([data-theme=dark],[data-theme=dark_blue],[data-theme=slate_blue],[data-theme=chestnut],[data-theme=hunter_green]){--acc-black:#000000;--acc-yellow:#facc15;--acc-orange:#fb923c;--acc-lime:#a3e635;--acc-electric:#22b5ff;--edge-black:rgba(255,255,255,.55);--edge-yellow:transparent;--edge-lime:transparent}
@media (prefers-color-scheme:dark){html[data-theme=system]{--acc-blue:#60a5fa;--acc-teal:#2dd4bf;--acc-green:#4ade80;--acc-purple:#a78bfa;--acc-red:#f87171;--acc-pink:#f472b6}}
@media (prefers-color-scheme:dark){html[data-theme=system]{--acc-black:#000000;--acc-yellow:#facc15;--acc-orange:#fb923c;--acc-lime:#a3e635;--acc-electric:#22b5ff;--edge-black:rgba(255,255,255,.55);--edge-yellow:transparent;--edge-lime:transparent}}
.sec{--sec-accent:transparent;--sec-edge:transparent}
.sec[data-accent=blue],.sec-sw[data-accent=blue]{--sec-accent:var(--acc-blue)}
.sec[data-accent=teal],.sec-sw[data-accent=teal]{--sec-accent:var(--acc-teal)}
.sec[data-accent=green],.sec-sw[data-accent=green]{--sec-accent:var(--acc-green)}
.sec[data-accent=purple],.sec-sw[data-accent=purple]{--sec-accent:var(--acc-purple)}
.sec[data-accent=red],.sec-sw[data-accent=red]{--sec-accent:var(--acc-red)}
.sec[data-accent=pink],.sec-sw[data-accent=pink]{--sec-accent:var(--acc-pink)}
.sec[data-accent=black],.sec-sw[data-accent=black]{--sec-accent:var(--acc-black);--sec-edge:var(--edge-black)}
.sec[data-accent=yellow],.sec-sw[data-accent=yellow]{--sec-accent:var(--acc-yellow);--sec-edge:var(--edge-yellow)}
.sec[data-accent=orange],.sec-sw[data-accent=orange]{--sec-accent:var(--acc-orange)}
.sec[data-accent=lime],.sec-sw[data-accent=lime]{--sec-accent:var(--acc-lime);--sec-edge:var(--edge-lime)}
.sec[data-accent=electric],.sec-sw[data-accent=electric]{--sec-accent:var(--acc-electric)}
/* The 1px edge sits just under the trim (top of the padding box), drawn as a background so it never fights the theme shadows. */
.sec[data-accent]{background-image:linear-gradient(var(--sec-edge),var(--sec-edge));background-size:100% 1px;background-repeat:no-repeat;background-origin:padding-box}
.sec-menu .menu-pop{min-width:252px}
.sec-color-wrap{padding:2px 6px 6px}
.sec-color-wrap .menu-label{margin:6px 0 8px}
.sec-colors{display:flex;flex-wrap:wrap;gap:8px}
.sec-sw{position:relative;width:24px;height:24px;flex:none;padding:0;border-radius:50%;border:0;cursor:pointer;background:var(--sec-accent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sec-sw[data-accent=none]{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--muted) calc(50% - 1px),var(--muted) calc(50% + 1px),transparent calc(50% + 1px));box-shadow:inset 0 0 0 2px var(--muted)}
.sec-sw:hover{transform:scale(1.1)}
.sec-sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.sec-sw[data-accent=none][aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--muted),0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.sec-sw[aria-pressed=true]:not([data-accent=none])::before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--surface);font:800 14px/1 var(--font)}
.sec-sw:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:5px}
.sec-sw[data-accent=yellow],.sec-sw[data-accent=lime]{box-shadow:inset 0 0 0 1px var(--sec-edge,rgba(0,0,0,.18)),inset 0 0 0 1px rgba(0,0,0,.18)}
.sec-sw[data-accent=black]{box-shadow:inset 0 0 0 1px var(--sec-edge),inset 0 0 0 1px rgba(0,0,0,.18)}
.sec-sw[data-accent=black][aria-pressed=true],.sec-sw[data-accent=yellow][aria-pressed=true],.sec-sw[data-accent=lime][aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--sec-edge),0 0 0 2px var(--surface),0 0 0 4px var(--text)}
/* Check marks: dark on the bright Yellow/Lime (white would vanish on the light themes), white on Black in every theme. */
.sec-sw:is([data-accent=yellow],[data-accent=lime])[aria-pressed=true]::before{color:#1a1a1a}
.sec-sw[data-accent=black][aria-pressed=true]::before{color:#fff}
@media (pointer:coarse){.sec-menu .menu-pop{min-width:292px}.sec-colors{gap:7px}.sec-sw{width:30px;height:30px}.sec-sw::after{content:"";position:absolute;inset:-4px}}
.sec.is-hidden{opacity:.6;border-style:dashed}
.sec-head{display:flex;align-items:center;gap:6px;padding:10px 10px 6px 6px;min-height:44px}
.sec-title{font-weight:650;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);cursor:text}
.sec .sec .sec-title{font-size:.9rem}
.sec-title.untitled{color:var(--muted);font-weight:500;font-style:italic}
.sec-title-link{cursor:pointer}
/* Section titles: small-caps label with a subtle 1px divider under the header (heading look, distinct from links) */
.sec-head{margin:0 12px 6px;padding:10px 0 7px;border-bottom:1px solid var(--border)}
.sec-title{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text);color:var(--sec-title-color,color-mix(in srgb,var(--text) 88%,var(--surface)))}
/* Per-theme title tint: a subtle shift toward each theme's accent hue, kept clearly apart from link text and link blue (all >= 7:1 on the card). */
:root{--sec-title-color:#353f7a}
[data-theme=dark]{--sec-title-color:#aab4f0}
[data-theme=dark_blue]{--sec-title-color:#b8c2f5}
[data-theme=slate_blue]{--sec-title-color:#f2e2b3}
[data-theme=chestnut]{--sec-title-color:#ffb273}
[data-theme=hunter_green]{--sec-title-color:#ecd58f}
[data-theme=metal]{--sec-title-color:#2f3a48}
@media (prefers-color-scheme:dark){[data-theme=system]{--sec-title-color:#aab4f0}}
.sec .sec > .sec-head{margin:0 10px 4px;padding:8px 0 6px}
.sec .sec .sec-title{font-size:.74rem;letter-spacing:.06em}
.sec-title.untitled{text-transform:none;letter-spacing:0;font-size:.9rem}
.sec .sec .sec-title.untitled{font-size:.84rem}
.sec.is-collapsed > .sec-head,.sec.is-linkonly > .sec-head{border-bottom-color:transparent;margin-bottom:0}
.sec-title-link:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
body.editing .sec-title-link:hover{text-decoration:none}
.ext{color:var(--muted);font-size:.8em}
.sec-grip{cursor:grab;border:0;background:none;color:var(--muted);opacity:.5;font-size:.8rem;letter-spacing:-2px;padding:6px 4px;border-radius:6px}
.sec-grip:hover,.sec-grip:focus-visible{opacity:1;background:rgba(127,127,127,.12)}
.sec-rename{flex:1;padding:6px 8px!important;font-weight:600}
.spacer{flex:1}
.sec-body{padding:4px 12px 14px}
.sec .sec .sec-body{padding:4px 4px 8px}
.sec-linkonly{display:flex;align-items:center;gap:12px;margin:0 12px 14px;padding:14px;border:1px dashed var(--border);border-radius:10px;color:var(--text)}
.sec-linkonly:hover{border-color:var(--primary);text-decoration:none}
.add-inline{width:100%;border:1px dashed var(--border);background:transparent;color:var(--muted);border-radius:10px;padding:12px;cursor:pointer;font:500 .875rem var(--font)}
.add-inline:hover{border-color:var(--primary);color:var(--primary)}
.subsecs:empty{display:none}

/* Links */
.links{display:grid;gap:10px;min-height:8px}
.lk{position:relative;border-radius:10px}
.lk-a{display:flex;color:var(--text);text-decoration:none;border-radius:10px;outline-offset:2px}
.lk-a:hover{text-decoration:none}
.lk-title{overflow:hidden;text-overflow:ellipsis;font-size:.85rem;font-weight:500;line-height:1.25}
.fav{width:28px;height:28px;border-radius:6px;object-fit:contain;flex:none}
.fav-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary);font-weight:700}
.fav-lg{width:36px;height:36px}
.lk-badge{position:absolute;top:5px;left:5px;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:5px;background:var(--primary-soft);color:var(--primary);pointer-events:none}
.lk-edit{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:6px;border:0;background:var(--surface);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .12s;font-weight:700;box-shadow:0 0 0 1px var(--border)}
.lk:hover .lk-edit,.lk:focus-within .lk-edit{opacity:1}
.lk-edit:hover{color:var(--text)}
.rs{position:absolute;right:1px;bottom:1px;width:14px;height:14px;cursor:nwse-resize;opacity:0;touch-action:none;background:linear-gradient(135deg,transparent 50%,var(--muted) 50%,var(--muted) 60%,transparent 60%,transparent 70%,var(--muted) 70%,var(--muted) 80%,transparent 80%);border-radius:0 0 8px 0}
.lk:hover .rs,.resizing .rs{opacity:.8}
@media (hover:none){.lk-edit{opacity:.85}.rs{opacity:.5;width:20px;height:20px}}

/* tiles */
.layout-tiles{grid-template-columns:repeat(auto-fill,minmax(min(var(--tile),40vw),1fr))}
.layout-tiles .lk-a{flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:calc(var(--tile) * .82);padding:12px 8px;background:var(--bg);border:1px solid var(--border);text-align:center}
.layout-tiles .lk-a:hover{border-color:var(--primary);background:var(--primary-soft)}
.layout-tiles .fav{width:calc(var(--tile) * .3);height:calc(var(--tile) * .3);min-width:20px;min-height:20px;max-width:64px;max-height:64px}
.layout-tiles .lk-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%}
/* circles */
.layout-circles{grid-template-columns:repeat(auto-fill,minmax(min(var(--tile),40vw),1fr));gap:14px 8px}
.layout-circles .lk-a{flex-direction:column;align-items:center;gap:7px;text-align:center;padding:4px}
.layout-circles .fav{width:calc(var(--tile) * .62);height:calc(var(--tile) * .62);border-radius:50%;padding:calc(var(--tile) * .14);background:var(--bg);border:1px solid var(--border);box-sizing:border-box}
.layout-circles .fav-letter{font-size:calc(var(--tile) * .2)}
.layout-circles .lk-a:hover .fav{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.layout-circles .lk-title{max-width:100%;white-space:nowrap}
.layout-circles .lk-badge{left:50%;transform:translateX(-50%);top:0}
/* images */
.layout-images{grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--tile) * 1.5),40vw),1fr))}
.layout-images .lk-a{flex-direction:column;border:1px solid var(--border);overflow:hidden;background:var(--bg)}
.layout-images .lk-a:hover{border-color:var(--primary)}
.layout-images .lk-img,.layout-images .fav{width:100%;height:var(--tile);border-radius:0;background-size:cover;background-position:center;display:block}
.layout-images .fav{object-fit:none;background:var(--primary-soft);padding:0}
.layout-images img.fav{object-fit:contain;padding:calc(var(--tile) * .25);box-sizing:border-box}
.layout-images .fav-letter{display:flex;font-size:calc(var(--tile) * .3)}
.layout-images .lk-title{padding:8px 10px;white-space:nowrap}
/* text list */
.layout-text{grid-template-columns:minmax(0,1fr);gap:2px}
.layout-text .lk{min-width:0}
.layout-text .lk-a{align-items:center;gap:10px;padding:7px 34px 7px 8px;min-width:0}
.layout-text .lk-a:hover{background:var(--primary-soft)}
.layout-text .fav{width:18px;height:18px;border-radius:4px}
.layout-text .fav-letter{font-size:.7rem}
/* long titles: one line with an ellipsis inside the section; the domain on the right keeps its full width */
.layout-text .lk-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
.layout-text .lk-host{flex:0 0 auto;max-width:60%;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.layout-text .lk-badge{position:static;margin-left:6px;flex:none}
.layout-text .lk-edit{top:50%;transform:translateY(-50%)}

/* drag & search states */
.drag-ghost{opacity:.35}
.drag-chosen .lk-a{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sortable-fallback{opacity:.9!important}
.searching .no-match{display:none!important}
.searching .sec-body[hidden]{display:block!important}

/* dialogs & toast */
.dlg{border:1px solid var(--border);border-radius:16px;padding:0;width:min(560px,calc(100vw - 24px));background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.3)}
.dlg-sm{width:min(420px,calc(100vw - 24px))}
#dlg-dup .dup-msg{margin:0}
#dlg-dup .dup-url{margin:-4px 0 0;overflow-wrap:anywhere}
.dlg::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.dlg form{padding:22px;margin:0}
.dlg h2{font-size:1.15rem;margin:0}
.dlg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.dlg-error{color:var(--error);background:var(--error-soft);border-radius:8px;padding:8px 12px;font-size:.875rem}
.move-btns{display:inline-flex;gap:4px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111827;color:#fff;padding:10px 16px;border-radius:10px;font-size:.875rem;opacity:0;pointer-events:none;transition:all .2s;z-index:100;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-error{background:#b91c1c}
.toast-success{background:#047857}

@media (max-width:860px){
  .dash-top{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .search-box{order:3;flex-basis:100%;max-width:none}
  .top-actions{margin-left:auto}
  .font-quick,.brand-text{display:none}
  .board-wrap{padding:14px 12px 32px}
  .board{gap:12px}
}
@media (max-width:420px){ #btn-add-section{padding:7px 9px} }

@media (max-width:600px){.layout-tiles .lk-a{min-height:calc(min(var(--tile),40vw) * .82)}.layout-images .lk-img,.layout-images .fav{height:min(var(--tile),30vw)}}

/* ===== Step 4: edit mode, tile groups, notes, drop-to-add, auto-save, homepage prompt ===== */
.btn-xs{padding:4px 9px;font-size:.78rem;border-radius:7px}
body:not(.editing) .edit-only{display:none!important}
body.editing .view-only{display:none!important}
.btn-edit{border:1px solid var(--border);background:var(--surface)}
.btn-edit[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.edit-hint{margin:0 0 14px;padding:9px 14px;border-radius:10px;background:var(--primary-soft);color:var(--text);font-size:.85rem;border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
body.editing .sec{outline:1px dashed color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:-1px}
body.editing .layout-tiles .lk-a,body.editing .layout-images .lk-a{cursor:grab}
.sec:focus{outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:1px}
.sec-empty{margin:4px 2px 8px;color:var(--muted);font-size:.82rem}
/* save indicator */
.save-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);white-space:nowrap;min-width:0}
.save-status .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;transition:background .2s}
.save-status[data-state=idle] .txt{opacity:1}
.save-status[data-state=saving] .dot{background:#f59e0b;animation:hpcpulse 1s infinite}
.save-status[data-state=offline] .dot,.save-status[data-state=retrying] .dot{background:#f97316}
.save-status[data-state=error] .dot{background:#dc2626}
.save-status[data-state=error] .txt,.save-status[data-state=offline] .txt,.save-status[data-state=retrying] .txt{color:#c2410c;font-weight:600}
@keyframes hpcpulse{50%{opacity:.35}}
/* homepage banner */
.hp-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 20px 0;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,var(--primary-soft),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);box-shadow:var(--shadow)}
.hp-banner[hidden]{display:none}
.hp-ico{font-size:1.4rem}
.hp-text{flex:1;min-width:200px}
.hp-close{margin-left:-4px}
.dlg-wide{width:min(680px,calc(100vw - 24px))}
.dlg > .form{padding:22px}
.dlg h3{font-size:.95rem;margin:16px 0 6px}
.copy-row{display:flex;gap:8px;margin:10px 0 14px}
.copy-row input{flex:1;font:500 .95rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-top:6px}
.tabs [role=tab]{border:0;background:none;padding:9px 14px;font:600 .9rem var(--font);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tabs [role=tab][aria-selected=true]{color:var(--primary);border-bottom-color:var(--primary)}
.tabpanel{padding-top:4px}
.steps{margin:0;padding-left:22px}
.steps li{margin:5px 0}
.steps code{font-size:.82rem;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
/* tile groups */
.fav-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-sizing:border-box;object-fit:initial}
.fav-grid .fav-mini{width:100%;height:100%;min-width:0;border-radius:3px;object-fit:contain;font-size:.55rem;display:flex;align-items:center;justify-content:center}
.layout-tiles .fav-grid{min-width:30px;min-height:30px}
.layout-circles .fav-grid{border-radius:50%;padding:calc(var(--tile) * .13)}
.layout-images .fav-grid{border-radius:0;padding:calc(var(--tile) * .14) calc(var(--tile) * .3);border:0}
.lk-count{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
.layout-circles .lk-count{right:calc(50% - var(--tile) * .38)}
body.editing .lk-count{right:30px}
.lk.pop-open .lk-a{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.lk.combine-target .lk-a{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 40%,transparent);transform:scale(1.04);transition:transform .12s}
.lk.combine-target::after{content:"Combine";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:8px;pointer-events:none}
.lk.just-added .lk-a{animation:hpcflash 1.6s ease}
@keyframes hpcflash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,#22c55e 55%,transparent)}100%{box-shadow:none}}
.tile-pop{position:fixed;z-index:80;width:min(300px,calc(100vw - 16px));max-height:min(420px,70vh);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);padding:6px}
.tile-pop[hidden]{display:none}
.pop-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 8px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.pop-row{display:flex;align-items:center;gap:2px}
.pop-item{flex:1;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:7px 8px;border-radius:8px;color:var(--text);min-width:0}
.pop-item .fav{width:22px;height:22px;grid-row:span 2}
#popover.pop-dragging{opacity:.35;pointer-events:none}  /* let drops reach the tiles under it while a link is dragged out */
.pop-item:hover,.pop-item:focus{background:var(--primary-soft);text-decoration:none;outline:none}
.pop-title{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-host{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-act{flex:none}
.pop-foot{display:flex;gap:6px;justify-content:flex-end;padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:4px}
/* sticky notes */
.sec-note{margin:0 12px 10px;border-radius:10px;padding:0;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(0,0,0,.05);--n:#fef3c7;--nb:#fde68a;background:var(--n);color:#1f2937}
.note-yellow{--n:#fef3c7;--nb:#fcd34d}.note-green{--n:#dcfce7;--nb:#86efac}.note-blue{--n:#dbeafe;--nb:#93c5fd}
.note-pink{--n:#fce7f3;--nb:#f9a8d4}.note-purple{--n:#ede9fe;--nb:#c4b5fd}.note-gray{--n:#f3f4f6;--nb:#d1d5db}
.note-snow{--n:#fff;--nb:#94a3b8}.note-metal{--n:#e4e6e9;--nb:#8b95a3}
.note-shade{--n:#111827;--nb:#aab4f0}.note-navy{--n:#0f2244;--nb:#b8c2f5}.note-slate{--n:#23324e;--nb:#f2e2b3}
.note-chestnut{--n:#2a1a10;--nb:#ffb273}.note-hunter{--n:#18291c;--nb:#ecd58f}
.sec-note{border-left:4px solid var(--nb)}
.note-view{padding:9px 12px;white-space:pre-wrap;word-break:break-word;font-size:.88rem;line-height:1.5;cursor:text;min-height:2.2em;border-radius:10px}
.note-view:focus-visible{outline:2px solid var(--nb)}
.note-view a{color:#1d4ed8;text-decoration:underline}
.note-ph{color:#6b7280;font-style:italic}
.note-edit-wrap{padding:6px}
.note-edit{display:block;width:100%;border:0;background:rgba(255,255,255,.55);border-radius:7px;padding:7px 8px;font:inherit;font-size:.88rem;line-height:1.5;color:#111827;resize:vertical;min-height:70px}
.note-edit:focus{outline:2px solid var(--nb)}
.note-tools{display:flex;align-items:center;gap:6px;padding:6px 2px 0}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.12);background:var(--n);cursor:pointer;padding:0}
.swatch.on{border-color:#111827;box-shadow:0 0 0 2px #fff inset}
.note-btn{opacity:.45;font-size:.95rem}
.note-btn.on{opacity:.95}
.sec:hover .note-btn,.note-btn:focus-visible{opacity:.9}
[data-theme=dark] .sec-note:not(.note-theme),[data-theme=dark_blue] .sec-note:not(.note-theme){filter:saturate(.9) brightness(.92)}
@media (prefers-color-scheme:dark){[data-theme=system] .sec-note:not(.note-theme){filter:saturate(.9) brightness(.92)}}
/* Theme-matched note colours (Notes picker, "Match a theme:"). Each is exactly that theme's section background, so the
   dimming filter above is skipped for them (.note-theme, added in home.js). The left bar uses the theme's heading colour,
   and a faint outline keeps the note's edge visible when it sits on a section of the same colour.
   Dark ones (Shade, Navy, Slate, Chestnut, Hunter) get light text: #f1f5f9 is 11.7:1 or better on all five,
   links #93c5fd 7.1:1 or better, placeholder #b6c0cf 7.0:1 or better. On Metal the placeholder is darkened to stay above 4.5:1. */
.note-metal .note-ph{color:#4b5563}
.sec-note.note-theme{border-color:color-mix(in srgb,var(--nb) 35%,transparent);border-left-color:var(--nb)}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter){color:#f1f5f9;box-shadow:none}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-view a{color:#93c5fd}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-ph{color:#b6c0cf}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-edit{background:rgba(255,255,255,.08);color:#f8fafc}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-edit::placeholder{color:#b6c0cf}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-theme-lbl{color:#cbd5e1}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .swatch.on{border-color:#fff;box-shadow:0 0 0 2px #111827 inset}
.sec-note:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter) .note-tools .btn-ghost{color:#f1f5f9;border-color:rgba(255,255,255,.35);background:transparent}
.note-theme-row{flex-wrap:wrap;gap:5px;padding-top:7px}
.note-theme-lbl{font-size:.74rem;font-weight:600;color:#475569;margin-right:2px}
.swatch.swatch-theme{width:auto;height:22px;border-radius:999px;padding:0 8px;font:600 .72rem/18px system-ui,sans-serif;color:#1f2937;border:2px solid color-mix(in srgb,var(--nb) 70%,#64748b)}
.swatch-theme:is(.note-shade,.note-navy,.note-slate,.note-chestnut,.note-hunter){color:#f1f5f9}
.swatch.swatch-theme.on{border-color:#111827;box-shadow:0 0 0 2px #fff inset}
.swatch.swatch-theme:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
/* drop to add */
.drop-hint{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:90;background:var(--primary);color:#fff;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.88rem;box-shadow:0 10px 30px rgba(37,99,235,.35);pointer-events:none}
.drop-hint[hidden]{display:none}
.sec.drop-target{outline:3px dashed var(--primary);outline-offset:2px;background:color-mix(in srgb,var(--primary-soft) 60%,var(--surface))}
body.drop-anywhere .board-wrap{outline:3px dashed color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:-8px;border-radius:16px}
@media (max-width:860px){
  .save-status .txt{display:none}
  .date-sep{display:none}
  /* The "Add & Edit" label shows on phones too (t265s1129); see the phone sizing near the end of this file. */
  .hp-banner{margin:10px 12px 0}
  .hp-banner .btn{width:100%}
  body.editing .btn-edit .lbl{display:inline}
}
.hp-banner{position:relative}
@media (max-width:860px){.hp-close{position:absolute;top:6px;right:6px;margin:0}.hp-text{padding-right:26px}}

/* ===== Step 5: import wizard, save page, help ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wizard{display:flex;flex-direction:column;gap:18px;max-width:980px}
.wz-step h2{display:flex;align-items:center;gap:10px}
.wz-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:.9rem;flex:none}
.wz-more{margin-top:10px}.wz-more summary{cursor:pointer;color:var(--primary);font-size:.9rem}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;border:2px dashed var(--border);border-radius:14px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over,.dropzone:focus-within{border-color:var(--primary);background:var(--primary-soft)}
.dropzone.busy{opacity:.7;cursor:progress}
.dz-ico{font-size:1.8rem;color:var(--primary)}
.link-like{color:var(--primary);text-decoration:underline}
.wz-status{margin-top:12px;padding:10px 12px;border-radius:9px;font-size:.9rem;background:var(--bg);border:1px solid var(--border)}
.wz-status.wz-error{background:var(--error-soft);border-color:#fecaca;color:var(--error)}
.wz-status.wz-ok{background:var(--success-soft);border-color:#a7f3d0;color:var(--success)}
.wz-summary{font-size:.95rem}
.wz-done{font-size:1.05rem;font-weight:600}
.imp-undo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:980px}
.imp-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.imp-mode{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface)}
.imp-mode:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.imp-mode input{margin-top:4px;accent-color:var(--primary)}
.imp-mode span{display:flex;flex-direction:column}.imp-mode small{color:var(--muted);font-size:.8rem}
.imp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.imp-tools .spacer{flex:1}
.imp-secs{display:flex;flex-direction:column;gap:8px;margin:10px 0 70px}
.imp-sec{border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.imp-sec.off{opacity:.55}
.imp-head{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap}
.imp-head input[type=checkbox],.imp-item input[type=checkbox]{width:17px;height:17px;accent-color:var(--primary);flex:none}
.imp-tog{border:0;background:none;cursor:pointer;color:var(--muted);font:600 .8rem var(--font);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:6px;min-width:112px}
.imp-tog:hover{background:var(--bg);color:var(--text)}
.imp-name{flex:1;min-width:160px;font-weight:600!important;padding:7px 10px!important}
.imp-where{white-space:nowrap}
.imp-merge,.imp-move-sel{font:400 .85rem var(--font);padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);max-width:220px}
.imp-items{list-style:none;margin:0;padding:4px 10px 10px 36px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}
.imp-item{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.88rem}
.imp-item.off .imp-title{color:var(--muted);text-decoration:line-through}
.imp-item.dup{opacity:.6}
.imp-label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.imp-fav{width:16px;height:16px;border-radius:3px;flex:none}
.imp-fav-local{font-size:13px;line-height:16px;text-align:center}
.imp-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.imp-host{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;flex:none}
.imp-move{flex:none}
.imp-empty{padding:4px 0}
.imp-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 0;background:var(--surface);border-top:1px solid var(--border);margin:0 -2px;z-index:5;flex-wrap:wrap}
.imp-bar .spacer{flex:1}
.local-help{border:1px solid #fcd34d;background:#fffbeb;color:#78350f;border-radius:10px;padding:12px 14px;margin:8px 0;font-size:.88rem}
.local-help-title{font-size:.95rem;margin:0 0 6px}
.local-help ul{margin:0;padding-left:18px}.local-help li{margin:4px 0}
.local-help a{color:#92400e;text-decoration:underline}
.local-help code{font-size:.8rem}
[data-theme=dark] .local-help,[data-theme=dark_blue] .local-help,[data-theme=slate_blue] .local-help,[data-theme=chestnut] .local-help,[data-theme=hunter_green] .local-help{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35);color:#fde68a}
[data-theme=dark] .local-help a,[data-theme=dark_blue] .local-help a,[data-theme=slate_blue] .local-help a,[data-theme=chestnut] .local-help a,[data-theme=hunter_green] .local-help a{color:#fcd34d}
@media (prefers-color-scheme:dark){[data-theme=system] .local-help{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35);color:#fde68a}[data-theme=system] .local-help a{color:#fcd34d}}
.bookmarklet{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--primary);color:#fff!important;font-weight:700;font-size:.9rem;cursor:grab;box-shadow:0 2px 8px rgba(37,99,235,.35);white-space:nowrap;text-decoration:none!important}
.bookmarklet:active{cursor:grabbing}
.bookmarklet::after{content:"to " attr(data-site)}  /* visible only: not part of the saved bookmark's name ("☁ Save") */
.bm-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}
.menu-bm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:4px 0}
.menu-bm .bookmarklet{font-size:.82rem;padding:6px 12px}
.bm-tip-actions{display:inline-flex;gap:8px;flex-wrap:wrap}
.bm-tip{background:linear-gradient(90deg,rgba(16,185,129,.10),var(--surface))}
.bm-tip-off{font-weight:500}
/* save page + popup */
.save-card,.save-help,.save-done{max-width:640px}
.save-help{margin-top:18px}
.save-h{font-size:1.25rem}
.sec-picker select{width:100%;font:400 .95rem var(--font);border:1px solid #d1d5db;border-radius:9px;padding:4px;background:var(--surface);color:var(--text)}
.sec-picker select option{padding:5px 8px;border-radius:6px}
.sec-filter{margin-bottom:6px}
textarea{width:100%;font:400 15px var(--font);padding:10px 12px;border:1px solid #d1d5db;border-radius:9px;background:var(--surface);color:var(--text)}
.save-done{text-align:center;padding:28px 20px}
.save-done .row-actions{justify-content:center}
.save-check{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:30px;line-height:56px;font-weight:700}
.save-done-title{word-break:break-word}
.popup-body{background:var(--bg);min-height:100vh}
.popup-top{padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.popup-top .brand{font-size:15px}.popup-top .brand-mark{width:22px;height:22px}
.popup-main{padding:14px}
.popup-main .card{box-shadow:none}
.popup-main .panel{padding:16px}
.popup-main .form{gap:12px;margin-top:8px}
.help-toc{margin:6px 0 18px;font-size:.92rem}
.help h2{margin-top:1.6em}
@media (max-width:720px){
  .imp-modes{grid-template-columns:1fr}
  .imp-head{gap:6px}
  .imp-name{min-width:0;flex-basis:100%;order:3}
  .imp-where{order:4}.imp-merge{order:5;max-width:none;flex:1}
  .imp-items{padding-left:12px}
  .imp-host{display:none}
  .imp-bar .btn{flex:1}
}
.row-actions{flex-wrap:wrap}

/* ---------- Step 6: Grok Bot tiles ---------- */
:root{--bot-text:#4f2fd0;--bot:#6d4aff;--bot-soft:rgba(109,74,255,.12);--bot-border:rgba(109,74,255,.55)}
[data-theme=dark],[data-theme=dark_blue]{--bot-on:#1e1b4b;--bot-text:#c4b5fd;--bot:#a78bfa;--bot-soft:rgba(167,139,250,.16);--bot-border:rgba(167,139,250,.6)}
@media (prefers-color-scheme:dark){[data-theme=system]{--bot-on:#1e1b4b;--bot-text:#c4b5fd;--bot:#a78bfa;--bot-soft:rgba(167,139,250,.16);--bot-border:rgba(167,139,250,.6)}}
/* Slate blue: re-assert its own bot colours here, otherwise the :root rule above overrides them (same specificity, later wins) */
[data-theme=slate_blue]{--bot-on:#1e1b4b;--bot-text:#ddd3ff;--bot:#b9a6ff;--bot-soft:rgba(185,166,255,.18);--bot-border:rgba(185,166,255,.7)}
[data-theme=chestnut]{--bot-on:#1e1b4b;--bot-text:#ddd3ff;--bot:#c4b5fd;--bot-soft:rgba(196,181,253,.18);--bot-border:rgba(196,181,253,.7)}
[data-theme=hunter_green]{--bot-on:#1e1b4b;--bot-text:#ddd3ff;--bot:#c4b5fd;--bot-soft:rgba(196,181,253,.18);--bot-border:rgba(196,181,253,.7)}
[data-theme=metal]{--bot-text:#4f2fd0;--bot:#5b3ee6;--bot-soft:rgba(91,62,230,.10);--bot-border:rgba(91,62,230,.55)}
/* --bot-on = badge text on the --bot fill: white on the deep light-theme purple, dark navy on the lighter purples */
.lk-badge-bot{background:var(--bot);color:var(--bot-on,#fff);letter-spacing:.02em}
.lk-badge-bot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bot-on,#fff);margin-right:3px;vertical-align:1px;opacity:.85}
.layout-tiles .lk.is-bot .lk-a{border:1.5px solid var(--bot-border);background:linear-gradient(180deg,var(--bot-soft),var(--bg) 70%)}
.layout-tiles .lk.is-bot .lk-a:hover{border-color:var(--bot);background:var(--bot-soft)}
.layout-circles .lk.is-bot .fav{border:2px solid var(--bot-border);box-shadow:0 0 0 3px var(--bot-soft)}
.layout-circles .lk.is-bot .lk-a:hover .fav{border-color:var(--bot)}
.layout-circles .lk.is-bot .fav.fav-bot{padding:calc(var(--tile) * .08)}
.layout-images .lk.is-bot .lk-a{border:1.5px solid var(--bot-border)}
.layout-images .lk.is-bot .lk-a:hover{border-color:var(--bot)}
.layout-images .lk.is-bot .fav{background:var(--bot-soft)}
.layout-images .lk.is-bot .lk-title{border-top:3px solid var(--bot)}
.layout-text .lk.is-bot .lk-a{box-shadow:inset 3px 0 0 var(--bot)}
.layout-text .lk.is-bot .lk-a:hover{background:var(--bot-soft)}
.layout-text .lk.is-bot .lk-host{color:var(--bot)}
.lk.has-bot .fav-grid{outline:2px solid var(--bot-border);outline-offset:1px}
.fav.fav-bot{border-radius:22%}
.pop-item.is-bot .pop-host{color:var(--bot)}
.bot-note{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:7px 8px 7px 10px;border:1px solid var(--bot-border);background:var(--bot-soft);border-radius:10px;font-size:.82rem;color:var(--text)}
.bot-note-ico{flex:none;border-radius:5px}
.bot-note-txt{flex:1;min-width:0}
.bot-note a,.bot-pop a.bot-app-link{color:var(--bot-text);font-weight:600}
.bot-note-x{flex:none;width:26px;height:26px;font-size:.8rem}
.bot-pop{position:fixed;z-index:90;width:min(320px,calc(100vw - 16px));background:var(--surface);color:var(--text);border:1px solid var(--bot-border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.25);padding:10px 12px;font-size:.85rem}
.bot-pop p{margin:6px 0 0;color:var(--muted)}
.bot-pop-head{display:flex;align-items:center;gap:8px}
.bot-pop-head img{border-radius:5px}
.bot-pop-head strong{flex:1}
.bot-pop-x{width:26px;height:26px;font-size:.8rem}
.bot-pop-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bot-pop[data-kind=fallback]{border-color:var(--bot)}
.bot-pop.bot-pop-sheet{left:8px!important;right:8px;bottom:12px;top:auto!important;width:auto}
#dlg-bot .bot-help{margin:-4px 0 12px}
.bot-icons{border:0;padding:0;margin:0 0 12px}
.bot-icons legend{font-size:.85rem;font-weight:600;margin-bottom:6px;padding:0}
.bot-ico-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.bot-ico-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border:2px solid var(--border);border-radius:12px;cursor:pointer;padding:3px;background:var(--bg)}
.bot-ico-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bot-ico-opt img{border-radius:9px;display:block}
.bot-ico-opt:has(input:checked){border-color:var(--bot);box-shadow:0 0 0 3px var(--bot-soft)}
.bot-ico-opt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.bot-ico-url span{font-size:.8rem;padding:0 8px;color:var(--muted)}
.hint.hint-error{color:var(--error)}
#form-bot [data-role=botnorm]{word-break:break-all}
@media (max-width:600px){.top-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}#btn-add-bot{padding-left:9px;padding-right:9px}}
.field[hidden],.bot-pop[hidden],#form-bot input[hidden]{display:none!important}
.layout-circles .fav.fav-bot{border-radius:50%;padding:calc(var(--tile) * .1)}

/* Optional browser extension: its content script sets data-hpc-extension on <html> */
.ext-only{display:none!important}
html[data-hpc-extension] .ext-only{display:block!important}
html[data-hpc-extension] .ext-hide{display:none!important}
.ext-installed{color:var(--success);font-weight:600}
.ext-scan{margin-bottom:1rem;border-left:4px solid var(--primary)}
.ext-scan h2{margin-top:0}
.imp-ext summary{cursor:pointer;padding:.15rem 0}
.imp-ext[open] summary{margin-bottom:.5rem}

/* ---------- Step 7: date, checklist, smart sections, tour, sync, backup ---------- */
/* Date sits just left of the save status in the header, same type treatment */
.board-date{font-size:.78rem;color:var(--muted);white-space:nowrap}
.date-sep{font-size:.78rem;color:var(--muted);margin:0 -2px}
.checklist{padding:16px 18px;margin-bottom:18px;max-width:760px}
.checklist[hidden]{display:none}
.cl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cl-head h2{font-size:1.05rem;margin:0 0 2px}
.cl-bar{height:6px;border-radius:99px;background:var(--bg);border:1px solid var(--border);margin:10px 0 6px;overflow:hidden}
.cl-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#60a5fa);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.cl-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.cl-item{display:flex;align-items:center;gap:10px;min-height:40px}
.cl-item .btn{margin-left:auto}
.cl-check{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.cl-item.done .cl-check{background:var(--success);border-color:var(--success)}
.cl-item.done .cl-label{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.cl-item.just-done .cl-check{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.cl-all{border-color:color-mix(in srgb,var(--success) 40%,var(--border));background:linear-gradient(90deg,var(--success-soft),var(--surface))}
/* New starter accounts: one dismissible hint line above the board, and the Get set up checklist inside the bottom
   "Getting started" section (engage.js moves it there). Colours come from the theme variables, so every theme matches. */
.starter-hint{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:7px 6px 7px 14px;border-radius:12px;background:linear-gradient(90deg,var(--primary-soft),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);box-shadow:var(--shadow);color:var(--text);font-size:.92rem;line-height:1.4}
.starter-hint[hidden]{display:none}
.sh-ico{flex:none;font-size:1rem}
.sh-text{flex:1;min-width:0}
.sh-close{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:400 22px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sh-close:hover{background:var(--primary-soft);color:var(--text)}
.sh-close:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
[data-theme=metal] .starter-hint{border-color:#aeb3ba}
.checklist.cl-in-sec{margin:0 0 12px;max-width:none;padding:12px 12px 8px;border-radius:10px;box-shadow:none;background:color-mix(in srgb,var(--bg) 45%,var(--surface))}
.cl-in-sec .cl-head h2{font-size:.98rem}
.cl-in-sec .cl-list{grid-template-columns:1fr;gap:0}
.cl-in-sec .cl-item{min-height:36px;gap:8px}
@media (max-width:600px){.starter-hint{font-size:.88rem;padding:6px 4px 6px 12px;margin-bottom:10px}.sh-close{width:40px;height:40px}}
.smart{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;margin-bottom:18px}
.smart[hidden],.smart.is-searching,body.editing .smart{display:none}
.smart-sec{border-top:3px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.smart-sec .sec-head{padding-left:0}
.smart-sec .sec-body{padding:0 12px 12px}
.smart-sec .sec-empty{margin:4px 2px}
.sync-banner{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:0 10px 30px rgba(16,24,40,.18);font-size:.9rem;max-width:calc(100vw - 24px)}
.sync-banner[hidden]{display:none}
.bk-tip .hp-ico{filter:saturate(.8)}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
.empty-ctas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.keys{border-collapse:collapse;width:100%;margin:4px 0 10px}
.keys td{padding:7px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.keys td:first-child{white-space:nowrap;width:1%;padding-right:14px}
/* tour */
.tour-ring{position:absolute;z-index:200;border-radius:12px;box-shadow:0 0 0 3px var(--primary),0 0 0 9999px rgba(15,23,42,.38);pointer-events:none;transition:all .25s ease}
.tour-tip{position:absolute;z-index:201;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:14px 16px 12px;box-shadow:0 18px 40px rgba(15,23,42,.28);animation:rise .25s ease both}
.tour-tip:focus{outline:none}
.tour-tip h3{margin:2px 0 6px;font-size:1.02rem}
.tour-tip p{margin:0 0 12px;font-size:.92rem;line-height:1.45}
.tour-actions{display:flex;align-items:center;gap:6px}
.tour-actions .spacer{flex:1}
/* backup page */
.backup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:0 20px;align-items:start}
.backup-grid h2{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin-top:0}
.bk-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:15px}
.bk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.bk-notes{padding-left:18px;margin:8px 0}
.bk-notes li{margin:4px 0}
.bk-preview{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.bk-preview h3{margin:0 0 4px;font-size:1rem}
.bk-counts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0}
.bk-counts li{padding:4px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:.85rem;font-weight:600}
.bk-done{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.bk-done[hidden],.bk-preview[hidden]{display:none}
.drive-soon{padding:12px 14px;border-radius:10px;background:var(--bg);border:1px dashed var(--border)}
.link{color:var(--primary);text-decoration:underline}
/* motion (off for prefers-reduced-motion) */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
body.intro .board>.sec,body.intro .checklist,body.intro .smart>.sec{animation:rise .38s cubic-bezier(.2,.8,.2,1) both}
body.intro .board>.sec:nth-child(2){animation-delay:.04s}body.intro .board>.sec:nth-child(3){animation-delay:.08s}
body.intro .board>.sec:nth-child(4){animation-delay:.12s}body.intro .board>.sec:nth-child(n+5){animation-delay:.16s}
.layout-tiles .lk-a{transition:transform .15s ease,border-color .15s,background .15s,box-shadow .15s}
.layout-tiles .lk-a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.08)}
body.editing .layout-tiles .lk-a:hover{transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.layout-tiles .lk-a:hover{transform:none}}
@media (max-width:600px){.checklist{padding:14px}.cl-list{grid-template-columns:1fr}.sync-banner{top:auto;bottom:16px;left:12px;right:12px;transform:none;max-width:none}.sync-banner>span{flex:1}}
/* Step 7: touch screens get >=40px tap targets (invisible hit areas where the visual must stay small) */
@media (pointer:coarse){
  .icon-btn{min-width:40px;height:40px}
  .btn-sm,.btn-xs{min-height:40px}
  .btn-xs{padding:6px 12px}
  .menu-item{min-height:44px;padding:11px 12px}
  .menu-check{min-height:44px;display:flex;align-items:center}
  .sec-grip{min-width:40px;min-height:40px}
  .pw-toggle{min-height:40px;min-width:44px}
  .lk-edit{width:32px;height:32px;opacity:.85}
  .lk-edit::after{content:"";position:absolute;inset:-6px}
  .rs{width:24px;height:24px;opacity:.6}
  .rs::after{content:"";position:absolute;inset:-10px -10px -6px -10px}
  .swatch{width:28px;height:28px;position:relative}
  .swatch.swatch-theme{width:auto;height:28px;line-height:24px;padding:0 10px}
  .swatch::after{content:"";position:absolute;inset:-7px}
  .bot-note-x{width:40px;height:40px}
  .site-foot a,.linklike{display:inline-block;padding:10px 4px;min-width:40px;text-align:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .btn{min-height:40px}
  .btn-edit{min-width:44px}
  .brand{min-height:40px;min-width:40px}
  .avatar{width:40px;height:40px}
  .user-chip{display:inline-block;line-height:40px;min-height:40px;min-width:40px;max-width:min(240px,30vw);text-align:center;vertical-align:middle}
  .topnav > a:not(.btn),.topnav-more > a:not(.btn){display:inline-flex;align-items:center;min-height:40px;min-width:40px;justify-content:center}
  .help-toc a{display:inline-block;padding:11px 2px;min-width:40px;text-align:center}
  .settings-nav a{min-height:44px;display:flex;align-items:center}
  .tabs [role=tab]{min-height:42px}
  summary:not(.icon-btn):not(.btn){min-height:40px;padding-top:9px;padding-bottom:9px}
  .layout-text .lk-a{min-height:42px}
  .bot-app-link{display:inline-block;padding:12px 0;margin:-12px 0}
  .bookmarklet{min-height:40px}
  .menu-bm a.small{display:inline-flex;align-items:center;min-height:40px;padding:0 8px}
  .danger-link{display:inline-flex;align-items:center;min-height:40px}
}
/* Step 7: How-to Guide */
.guide{max-width:860px}
.guide .lead{font-size:1.05rem}
.g-cta{display:flex;gap:8px;flex-wrap:wrap}
.guide-toc{line-height:1.9}
.g-fig{margin:14px 0 20px}
.g-fig img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border);box-shadow:0 6px 24px rgba(15,23,42,.08);background:var(--surface)}
.g-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.g-narrow img{max-width:min(100%,520px)}
.g-phone img{max-width:min(100%,300px)}
.g-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:640px){.g-row{grid-template-columns:1fr}}
.guide h2{scroll-margin-top:16px}

.prose p a:not(.btn),.prose li a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.dash-body > main{min-height:100vh}  /* keeps the footer below the fold until the board renders (no layout shift) */
/* Step 8: paste a list + setup page */
.paste-box{width:100%;font:13px/1.5 ui-monospace,Consolas,monospace;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);resize:vertical;min-height:140px}
.paste-box:focus{outline:2px solid var(--primary);outline-offset:1px}
.paste-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.setup-steps li{margin:10px 0}
.setup-honest{margin:12px 0}
.grok-flow{list-style:none;padding:0;margin:14px 0 6px;display:flex;gap:28px;flex-wrap:wrap}
.grok-flow li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 50px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.grok-flow li+li::before{content:"→";position:absolute;left:-22px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.1rem}
.grok-flow .gf-num{position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--primary-fill,var(--primary));color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.grok-steps li{margin:8px 0}
.grok-example{display:flex;align-items:center;gap:14px;margin:10px 0 6px}
.grok-example .ge-col{flex:1 1 0;min-width:0}
.ge-label{margin:0 0 6px}
.grok-example .prompt-text{margin:0}
.ge-arrow{font-size:1.4rem;color:var(--muted)}
.ge-page{display:flex;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
.ge-sec{flex:1 1 140px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 10px}
.ge-sec-name{font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.ge-tiles{display:flex;gap:6px;flex-wrap:wrap}
.ge-tile{font-size:.85rem;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
@media (max-width:720px){.grok-flow{flex-direction:column;gap:22px}.grok-flow li+li::before{content:"↓";left:50%;top:-20px;transform:translateX(-50%)}.grok-example{flex-direction:column;align-items:stretch}.ge-arrow{text-align:center;transform:rotate(90deg)}}
.prompts{display:grid;gap:14px;margin:14px 0 8px}
.prompt{padding:14px 16px}
.prompt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prompt-head h3{margin:0;font-size:1rem;flex:1;min-width:0}
.prompt-text{white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,Consolas,monospace;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:10px 12px;margin:10px 0 0;color:var(--text);max-height:none}
/* Guide: animated "drag from the address bar" demo (views/_dragdrop_demo.php). One 10 s timeline shared by every part. */
.dd{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:18px;align-items:center;margin:14px 0 22px}
.dd-stage{min-width:0}
.dd-svg{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:linear-gradient(160deg,#eef2f7,#e2e8f0);box-shadow:0 6px 24px rgba(15,23,42,.08)}
.dd-ctrl{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.dd-sw{display:inline-flex;margin-left:auto}
.dd-sw .btn{border-radius:0}.dd-sw .btn:first-child{border-radius:8px 0 0 8px}.dd-sw .btn:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.dd-sw .btn.is-on{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.dd-steps{margin:0;padding:0;list-style:none;counter-reset:dd}
.dd-steps li{counter-increment:dd;position:relative;padding:10px 12px 10px 46px;margin:0 0 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:background .25s,border-color .25s}
.dd-steps li::before{content:counter(dd);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.dd-ico{width:1.05em;height:1.05em;vertical-align:-.15em}
.dd-frames{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dd-frames figure{margin:0}.dd-frames figcaption{font-size:.85rem;color:var(--muted);margin-top:4px;text-align:center}
.dd-alt{margin-top:0}
@media (max-width:760px){.dd{grid-template-columns:1fr}.dd-frames{grid-template-columns:1fr}}
/* browser icon switch */
.dd[data-browser=chrome] .dd-g-edge,.dd[data-browser=edge] .dd-g-chrome{display:none}
/* resting state (also = frame before the loop starts) */
.dd-svg .dd-hl,.dd-svg .dd-hint,.dd-svg .dd-toast,.dd-svg .dd-ring,.dd-svg .dd-hold,.dd-svg .dd-chip,.dd-svg .dd-iconbg,.dd-svg .dd-new{opacity:0}
.dd-svg .dd-hand{transform:translate(360px,250px)}
.dd-svg .dd-cursor,.dd-svg .dd-new,.dd-svg .dd-ring{transform-box:fill-box;transform-origin:center}
.dd-svg .dd-cursor{transform-origin:0 0}
/* static frames (reduced motion) */
.dd-f1 .dd-hand{transform:translate(102px,60px)}.dd-f1 .dd-ring,.dd-f1 .dd-hold,.dd-f1 .dd-iconbg{opacity:1}
.dd-f2 .dd-hand{transform:translate(484px,394px)}.dd-f2 .dd-chip,.dd-f2 .dd-hl,.dd-f2 .dd-hint{opacity:1}
.dd-f3 .dd-hand{transform:translate(512px,430px)}.dd-f3 .dd-new,.dd-f3 .dd-toast{opacity:1}
@media (prefers-reduced-motion:reduce){.dd-live{display:none}.dd-frames{display:grid}.dd{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .dd-run .dd-hand{animation:dd-hand 10s infinite}
  .dd-run .dd-cursor{animation:dd-press 10s infinite}
  .dd-run .dd-ring{animation:dd-ring 10s infinite}
  .dd-run .dd-iconbg{animation:dd-iconbg 10s infinite}
  .dd-run .dd-hold{animation:dd-hold 10s infinite}
  .dd-run .dd-chip{animation:dd-chip 10s infinite}
  .dd-run .dd-hl{animation:dd-hl 10s infinite}
  .dd-run .dd-hint{animation:dd-hl 10s infinite}
  .dd-run .dd-new{animation:dd-new 10s infinite}
  .dd-run .dd-toast{animation:dd-toast 10s infinite}
  .dd-go .dd-s1{animation:dd-st1 10s infinite}
  .dd-go .dd-s2{animation:dd-st2 10s infinite}
  .dd-go .dd-s3{animation:dd-st3 10s infinite}
  .dd.is-paused .dd-run *,.dd.is-off .dd-run *,.dd.is-paused .dd-steps li,.dd.is-off .dd-steps li{animation-play-state:paused}
}
@keyframes dd-hand{
  0%{transform:translate(360px,250px);opacity:0;animation-timing-function:ease-in-out}
  4%{transform:translate(360px,250px);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}
  16%{transform:translate(102px,60px)}
  31%{transform:translate(102px,60px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  34%{transform:translate(122px,82px);animation-timing-function:cubic-bezier(.4,.05,.6,1)}
  48%{transform:translate(545px,318px);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  56%{transform:translate(484px,394px)}
  62%{transform:translate(484px,394px);animation-timing-function:ease-out}
  70%{transform:translate(512px,430px);opacity:1}
  92%{transform:translate(512px,430px);opacity:1}
  97%,100%{transform:translate(512px,430px);opacity:0}
}
}
@keyframes dd-press{0%,17%{transform:scale(1)}19%,61%{transform:scale(.86)}63%,100%{transform:scale(1)}}
@keyframes dd-ring{0%,17%{opacity:0;transform:scale(.6)}19%{opacity:1;transform:scale(1)}27%{opacity:.9;transform:scale(1.25)}31%,100%{opacity:0;transform:scale(1.5)}}
@keyframes dd-iconbg{0%,13%{opacity:0}16%,34%{opacity:1}38%,100%{opacity:0}}
@keyframes dd-hold{0%,18%{opacity:0}21%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes dd-chip{0%,30%{opacity:0}32%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes dd-hl{0%,46%{opacity:0}47.5%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes dd-new{0%,61%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.12)}68%,93%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(1)}}
@keyframes dd-toast{0%,64%{opacity:0}67%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes dd-st1{0%,30%{border-color:var(--primary);background:var(--primary-soft)}33%,100%{border-color:var(--border);background:var(--surface)}}
@keyframes dd-st2{0%,30%{border-color:var(--border);background:var(--surface)}33%,61%{border-color:var(--primary);background:var(--primary-soft)}64%,100%{border-color:var(--border);background:var(--surface)}}
@keyframes dd-st3{0%,61%{border-color:var(--border);background:var(--surface)}64%,97%{border-color:var(--primary);background:var(--primary-soft)}100%{border-color:var(--border);background:var(--surface)}}
/* Header: on phones, extra nav items fold into a small menu (needs JS: html.has-js; without JS they wrap to a second row) */
.topnav-more{display:flex;align-items:center;gap:16px}
.nav-toggle{display:none}
@media (max-width:560px){
  .topbar{padding:10px 12px;gap:8px;flex-wrap:wrap;row-gap:6px}
  .topbar .brand{min-height:44px;font-size:16px;gap:8px;white-space:nowrap}
  .topnav{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .topnav-more{gap:8px;flex-wrap:wrap}
  .topnav a:not(.btn),.topnav .btn{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
  .topnav .btn{padding:0 14px}
  .topnav .user-chip{max-width:min(240px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .has-js .topbar{flex-wrap:nowrap}
  .has-js .topnav{flex-wrap:nowrap;position:static}
  .has-js .has-more .nav-toggle{display:inline-flex;order:3;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;padding:0}
  .has-js .has-more .nav-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .has-js .has-more.is-open .nav-toggle{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
  .nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
  .has-js .has-more .topnav-more{display:none;position:absolute;right:12px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;min-width:220px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:60}
  .has-js .has-more.is-open .topnav-more{display:flex}
  .has-js .topnav-more a:not(.btn){display:flex;justify-content:flex-start;width:100%;padding:0 12px;border-radius:8px;color:var(--text);font-weight:500}
  .has-js .topnav-more a:not(.btn):hover,.has-js .topnav-more a:not(.btn):focus-visible{background:rgba(127,127,127,.12);text-decoration:none}
  .has-js .topnav-more .user-chip{display:flex;max-width:none;line-height:1.2;text-align:left;color:var(--muted)}
  .has-js .topnav-more form{display:block;border-top:1px solid var(--border);margin-top:4px;padding-top:6px}
  .has-js .topnav-more form .btn{width:100%;justify-content:flex-start;padding:0 12px;border-color:transparent}
}
/* Narrow phones: let settings columns shrink instead of pushing the page wider than the screen */
.settings > *,.grid-2 > *{min-width:0}
.field select{max-width:100%}
@media (max-width:400px){.segmented{max-width:100%}.segmented span{padding:9px 11px}}
.dd-f1 .dd-cursor,.dd-f2 .dd-cursor{transform:scale(.86)}
/* Tour: drag-and-drop animation steps (first and last) */
.tour-tip.tour-wide{padding:16px 18px 14px}
.tour-tip .dd{margin:4px 0 10px}
.dd-compact{grid-template-columns:1fr}
.dd-compact .dd-svg{box-shadow:none}
.tour-dd-note{display:none;margin:0 0 10px!important}
@media (max-width:760px),(hover:none){.tour-dd-note{display:block}}
@media (prefers-reduced-motion:reduce){.dd-compact .dd-frames{grid-template-columns:repeat(3,minmax(0,1fr))}.dd-compact .dd-frames figcaption{font-size:.75rem}}
/* Edit mode: the whole section header is the drag handle */
body.editing .sec-head{cursor:grab;border-radius:10px;transition:background .15s;user-select:none;-webkit-user-select:none}
body.editing .sec-head:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
body.editing .sec-head .sec-title{cursor:grab}
body.editing .sec-head button,body.editing .sec-head summary,body.editing .sec-head .menu-pop,body.editing .sec-head input{cursor:pointer}
body.editing .sec-head .sec-rename{cursor:text;user-select:text}
/* Edit mode: long press picks things up, so no native link/image menu, text selection or image drag on tiles and section bars (t195u) */
body.editing :is(.lk,.lk *,.sec-head,.sec-head *,.pop-list,.pop-list *){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body.editing :is(.lk a,.lk img,.sec-head a,.sec-head img,.pop-list img){-webkit-user-drag:none}
body.editing .sec-head .sec-rename,body.editing .sec-head :is(input,textarea){-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
body.editing .sec-grip{touch-action:none}
body.editing .sec-head:hover .sec-grip{opacity:1;color:var(--primary)}
body.editing .sec-grip{opacity:.75}
.sec-drag-hint{display:none;font-size:.7rem;color:var(--primary);font-weight:600;white-space:nowrap;flex:0 1000 auto;min-width:0;overflow:hidden;opacity:0;transition:opacity .15s}  /* shrinks away before it could push the header buttons */
body.editing .sec-head.hint-fit:hover .sec-drag-hint{display:inline;opacity:.9}
body.editing .sec-head.hint-measure .sec-drag-hint{display:inline;visibility:hidden}
body.editing .sec-head > .sec-title{flex:0 1 auto;min-width:0}
body.sec-dragging .sec-drag-hint{display:none!important}
body.is-dragging,body.is-dragging *,body.sec-dragging,body.sec-dragging *{cursor:grabbing!important}
.sortable-fallback{cursor:grabbing}
body.editing .lk-a{cursor:grab}
body.editing .lk-a:active{cursor:grabbing}
@media (max-width:600px),(hover:none){body.editing .sec-head .sec-drag-hint,body.editing .sec-head.hint-fit:hover .sec-drag-hint,body.editing .sec-head.hint-measure .sec-drag-hint{display:none!important}}
.sec.drag-ghost{opacity:.45;outline:2px dashed var(--primary)!important;outline-offset:-2px}
.sec.sortable-fallback{box-shadow:0 18px 44px rgba(15,23,42,.28);border-radius:14px}
body.sec-dragging .sec.sortable-fallback > .sec-head{background:color-mix(in srgb,var(--primary) 10%,transparent)}
@media (hover:hover) and (pointer:fine){.sec-grip{padding:6px 2px}}
body.editing .sec-head{column-gap:4px}
/* Shared pointer sprite for the how-to animations */
.demo-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Guide/tour: "rearrange in Edit mode" animation (views/_editmove_demo.php). 10 s timeline.
   Slots: S1 (24,96) S2 (366,96) S3 (24,258). Shopping S3→S1 while Work S1→S2 and News S2→S3. */
.em-svg .em-work{transform:translate(24px,96px)}
.em-svg .em-news{transform:translate(366px,96px)}
.em-svg .em-shop{transform:translate(24px,258px)}
.em-svg .em-ph{transform:translate(24px,258px)}
.em-svg .em-hand{transform:translate(560px,380px)}
.em-svg .em-c-open,.em-svg .em-c-closed,.em-svg .em-label,.em-svg .em-grip,.em-svg .em-rename{opacity:0}
.em-svg .em-dbl{transform:translate(66px,112px)}
.em-f1 .em-hand{transform:translate(64px,276px)}.em-f1 .em-c-arrow{opacity:0}.em-f1 .em-c-open,.em-f1 .em-label,.em-f1 .em-grip{opacity:1}.em-f1 .em-tint{opacity:.12}
.em-f2 .em-work{transform:translate(366px,96px)}.em-f2 .em-news{transform:translate(24px,258px)}.em-f2 .em-shop{transform:translate(40px,124px)}.em-f2 .em-ph{transform:translate(24px,96px);opacity:1}
.em-f2 .em-hand{transform:translate(80px,142px)}.em-f2 .em-c-arrow{opacity:0}.em-f2 .em-c-closed,.em-f2 .em-grip{opacity:1}.em-f2 .em-tint{opacity:.12}.em-f2 .em-shadow{opacity:.16}
.em-f3 .em-work{transform:translate(366px,96px)}.em-f3 .em-news{transform:translate(24px,258px)}.em-f3 .em-shop{transform:translate(24px,96px)}
.em-f3 .em-hand{transform:translate(118px,118px)}.em-f3 .em-rename{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .dd-run .em-hand{animation:em-hand 10s infinite}
  .dd-run .em-c-arrow{animation:em-arrow 10s infinite}
  .dd-run .em-c-open{animation:em-open 10s infinite}
  .dd-run .em-c-closed{animation:em-closed 10s infinite}
  .dd-run .em-tint{animation:em-tint 10s infinite}
  .dd-run .em-grip{animation:em-grip 10s infinite}
  .dd-run .em-label{animation:em-label 10s infinite}
  .dd-run .em-shadow{animation:em-shadow 10s infinite}
  .dd-run .em-ph{animation:em-ph 10s infinite}
  .dd-run .em-work{animation:em-work 10s infinite}
  .dd-run .em-news{animation:em-news 10s infinite}
  .dd-run .em-shop{animation:em-shop 10s infinite}
  .dd-run .em-board{animation:em-board 10s infinite}
  .dd-run .em-rename{animation:em-rename 10s infinite}
  .dd-run .em-dbl{animation:em-dbl 10s infinite}
  .dd-go .em-s1{animation:em-st1 10s infinite}.dd-go .em-s2{animation:em-st2 10s infinite}.dd-go .em-s3{animation:em-st3 10s infinite}
}
@keyframes em-hand{
  0%{transform:translate(560px,380px);opacity:0}
  4%{transform:translate(560px,380px);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}
  14%,27%{transform:translate(64px,276px);animation-timing-function:cubic-bezier(.45,.05,.3,1)}
  45%,53%{transform:translate(64px,114px)}
  55%{transform:translate(64px,114px);animation-timing-function:ease-out}
  62%{transform:translate(170px,150px);animation-timing-function:ease-in-out}
  66%,86%{transform:translate(66px,112px);opacity:1}
  88%{transform:translate(118px,118px);opacity:1}
  92%,100%{transform:translate(118px,118px);opacity:0}
}
@keyframes em-arrow{0%,14%{opacity:1}15%,59%{opacity:0}60%,100%{opacity:1}}
@keyframes em-open{0%,14%{opacity:0}15%,24%{opacity:1}24.5%,54.5%{opacity:0}55%,59%{opacity:1}60%,100%{opacity:0}}
@keyframes em-closed{0%,24%{opacity:0}24.5%,54.5%{opacity:1}55%,100%{opacity:0}}
@keyframes em-tint{0%,14%{opacity:0}16%,54%{opacity:.12}57%,100%{opacity:0}}
@keyframes em-grip{0%,14%{opacity:0}16%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes em-label{0%,14%{opacity:0}16%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes em-shadow{0%,25%{opacity:0}28%,52%{opacity:.16}56%,100%{opacity:0}}
@keyframes em-ph{0%{transform:translate(24px,258px);opacity:0}25%{opacity:0}28%,37%{transform:translate(24px,258px);opacity:1}38.5%{transform:translate(24px,258px);opacity:0}39%{transform:translate(24px,96px);opacity:0}41%,52%{transform:translate(24px,96px);opacity:1}55%,100%{transform:translate(24px,96px);opacity:0}}
@keyframes em-work{0%,38%{transform:translate(24px,96px);animation-timing-function:cubic-bezier(.3,0,.2,1)}44%,96%{transform:translate(366px,96px)}97%,100%{transform:translate(24px,96px)}}
@keyframes em-news{0%,38%{transform:translate(366px,96px);animation-timing-function:cubic-bezier(.3,0,.2,1)}44%,96%{transform:translate(24px,258px)}97%,100%{transform:translate(366px,96px)}}
@keyframes em-shop{0%,27%{transform:translate(24px,258px);animation-timing-function:cubic-bezier(.45,.05,.3,1)}45%,96%{transform:translate(24px,96px)}97%,100%{transform:translate(24px,258px)}}
@keyframes em-board{0%,92%{opacity:1}95%,97%{opacity:0}100%{opacity:1}}
@keyframes em-rename{0%,70.5%{opacity:0}71.5%,86%{opacity:1}88%,100%{opacity:0}}
@keyframes em-dbl{0%,67.5%{opacity:0;transform:translate(66px,112px) scale(.5)}68.5%{opacity:1;transform:translate(66px,112px) scale(1)}69.5%{opacity:0;transform:translate(66px,112px) scale(1.4)}70%{opacity:0;transform:translate(66px,112px) scale(.5)}70.8%{opacity:1;transform:translate(66px,112px) scale(1)}71.8%,100%{opacity:0;transform:translate(66px,112px) scale(1.4)}}
@keyframes em-st1{0%,24%{border-color:var(--primary);background:var(--primary-soft)}27%,100%{border-color:var(--border);background:var(--surface)}}
@keyframes em-st2{0%,24%{border-color:var(--border);background:var(--surface)}27%,54%{border-color:var(--primary);background:var(--primary-soft)}57%,100%{border-color:var(--border);background:var(--surface)}}
@keyframes em-st3{0%,54%{border-color:var(--border);background:var(--surface)}57%,97%{border-color:var(--primary);background:var(--primary-soft)}100%{border-color:var(--border);background:var(--surface)}}

/* .btn-tour: shared green for tour actions (tour Next/Finish and the guide's "Replay the quick tour").
   White on #15803d is 5.0:1 (AA). On hover/active it gets the same 1px border highlight as the ghost buttons
   (border space already reserved by .btn, same 9px radius, same .15s transition), in white, with a 1px green edge
   so the white line shows on light and dark surfaces. No underline, like the site's other buttons. */
.btn.btn-tour,.prose p a.btn.btn-tour{background:#15803d;border-color:#15803d;color:#fff;text-decoration:none}
.btn.btn-tour:hover,.prose p a.btn.btn-tour:hover{background:#166534;border-color:#fff;box-shadow:0 0 0 1px #166534;color:#fff;text-decoration:none}
.btn.btn-tour:active{background:#14532d;border-color:#fff;box-shadow:0 0 0 1px #14532d}
.btn.btn-tour:focus-visible{outline:3px solid rgba(21,128,61,.55);outline-offset:2px}
/* Hunter green: #15803d is only 2.4:1 against the green page / 3.1:1 on the cards, so the tour buttons get a pale-green
   1px edge (#86efac, 10.9:1 on the cards) and a gold focus ring; hover/active keep the white edge. */
[data-theme=hunter_green] .btn.btn-tour,[data-theme=hunter_green] .prose p a.btn.btn-tour{border-color:#86efac}
[data-theme=hunter_green] .btn.btn-tour:hover,[data-theme=hunter_green] .prose p a.btn.btn-tour:hover,[data-theme=hunter_green] .btn.btn-tour:active{border-color:#fff}
[data-theme=hunter_green] .btn.btn-tour:focus-visible{outline-color:var(--focus)}
/* Edit mode colour: amber in every theme (the banner ring, the fainter section rings and the ✓ Save & Exit edit mode button share it).
   --edit-ring is the pulse (>=3:1 on the theme's page and cards); --edit-fill/-h/-a is the button fill at rest/hover/press with
   #1f1300 text (>=5.7:1 on every fill; white would fail on amber); --edit-edge outlines the button where the fill alone is faint
   on the page. Snow/Metal use deeper rings; Slate and Hunter use the deeper, oranger #f59e0b so Edit mode never looks like their
   gold focus rings (#ffd166 / #f2c94c). Drag/drop highlights use --primary (never amber), and the dragged card, its placeholder
   and the drop target drop the ring. */
html{--edit-ring:#b45309;--edit-fill:#f59e0b;--edit-fill-h:#e8900a;--edit-fill-a:#d97706;--edit-edge:#b45309;--edit-text:#1f1300}
html:is([data-theme=dark],[data-theme=dark_blue],[data-theme=chestnut]){--edit-ring:#fbbf24;--edit-fill:#fbbf24;--edit-fill-h:#f59e0b;--edit-fill-a:#e8900a;--edit-edge:#fbbf24}
html[data-theme=chestnut]{--edit-ring:#fcd34d}
html:is([data-theme=slate_blue],[data-theme=hunter_green]){--edit-ring:#f59e0b;--edit-fill:#f59e0b;--edit-fill-h:#e8900a;--edit-fill-a:#d97706;--edit-edge:#f59e0b}
html[data-theme=metal]{--edit-ring:#92400e;--edit-edge:#92400e}
@media (prefers-color-scheme:dark){html[data-theme=system]{--edit-ring:#fbbf24;--edit-fill:#fbbf24;--edit-fill-h:#f59e0b;--edit-fill-a:#e8900a;--edit-edge:#fbbf24}}
/* The exit button: the html prefix outranks the per-theme .btn-edit[aria-pressed=true] fills above. Hover/press follow the other
   buttons' pattern (deeper fill plus an outline), with a dark #1f1300 edge inside a 1px ring of the fill so the outline shows
   on amber. Focus uses the theme's text colour with a gap, so it shows against the amber and against the page. */
html .btn.btn-edit[aria-pressed=true]{background:var(--edit-fill);border-color:var(--edit-edge);color:var(--edit-text)}
html .btn.btn-edit[aria-pressed=true]:hover{background:var(--edit-fill-h);border-color:var(--edit-text);box-shadow:0 0 0 1px var(--edit-fill-h);color:var(--edit-text)}
html .btn.btn-edit[aria-pressed=true]:active{background:var(--edit-fill-a);border-color:var(--edit-text);box-shadow:0 0 0 1px var(--edit-fill-a)}
html .btn.btn-edit[aria-pressed=true]:focus-visible{outline:3px solid var(--text);outline-offset:2px}
/* "Save & Exit edit mode" shows from 1280px; narrower screens show "Save & Exit" (aria-label keeps the full name). */
.btn-edit .lbl{white-space:nowrap}
@media (max-width:1279.98px){.btn-edit .lbl-x{display:none}}
/* Under 360px (e.g. 320px phones) the ✓ is dropped from "Save & Exit" so the account button stays on the same row. */
@media (max-width:359.98px){.btn-edit[aria-pressed=true] .ico{display:none}}
/* Edit mode banner: an amber ring (--edit-ring) that softly fades (2.4s ease-in-out, opacity 1 -> .3 -> 1) as a reminder that
   the page is in Edit mode. Drawn by box-shadow on an overlay, so nothing moves. Light themes use a tighter, fainter glow. With
   reduced motion the global rule removes the animation and the ring stays on (static amber border). */
.edit-hint{position:relative}
.edit-hint::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 3px var(--edit-ring),0 0 14px 2px color-mix(in srgb,var(--edit-ring) 45%,transparent);animation:edit-ring 2.4s ease-in-out infinite}
:is([data-theme=light],[data-theme=system],[data-theme=metal]) .edit-hint::after{box-shadow:0 0 0 3px var(--edit-ring),0 2px 12px 1px color-mix(in srgb,var(--edit-ring) 28%,transparent)}
@media (prefers-color-scheme:dark){[data-theme=system] .edit-hint::after{box-shadow:0 0 0 3px var(--edit-ring),0 0 14px 2px color-mix(in srgb,var(--edit-ring) 45%,transparent)}}
@keyframes edit-ring{0%,100%{opacity:1}50%{opacity:.3}}
/* Edit mode: every top-level section card gets the same pulse, softer than the banner's (2px at 72-76%, >=3:1 on the page at the peak, vs the banner's 3px at 100%, (same keyframes and
   clock: home.js pins every edit-ring animation to one start time so they stay in step). Only an opacity fade on a
   pseudo-element, so it's composited and nothing reflows. The ring sits on the card's outer edge, outside the 12px gap
   around the yellow sticky notes, so the two never touch. */
body.editing .sec{position:relative}
body.editing .sec::after{content:"";position:absolute;inset:-1px;top:-3px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--edit-ring) 72%,transparent),0 0 8px color-mix(in srgb,var(--edit-ring) 22%,transparent);animation:edit-ring 2.4s ease-in-out infinite}
:is([data-theme=light],[data-theme=system]) body.editing .sec::after{box-shadow:0 0 0 2px color-mix(in srgb,var(--edit-ring) 75%,transparent),0 1px 6px color-mix(in srgb,var(--edit-ring) 14%,transparent)}
[data-theme=metal] body.editing .sec::after{box-shadow:0 0 0 2px color-mix(in srgb,var(--edit-ring) 76%,transparent),0 1px 6px color-mix(in srgb,var(--edit-ring) 14%,transparent)}
@media (prefers-color-scheme:dark){[data-theme=system] body.editing .sec::after{box-shadow:0 0 0 2px color-mix(in srgb,var(--edit-ring) 72%,transparent),0 0 8px color-mix(in srgb,var(--edit-ring) 22%,transparent)}}
body.editing .sec .sec::after,body.editing .sec.drop-target::after,body.editing .sec.drag-ghost::after,body.editing .sec.drag-chosen::after,body.editing .sec.sortable-fallback::after{content:none}

/* Saving pages: extension card first, the ☁ Save bookmarklet as a smaller backup (/save, /help) */
.save-opt{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--surface)}
.save-opt-ext{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-soft)}
.save-opt-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.05rem}
.save-opt-h .badge{font-size:.7rem;background:var(--primary-soft);color:var(--primary)}
.save-opt-h2{margin:0 0 4px;font-size:.92rem;font-weight:600;color:var(--muted)}
.save-opt-list{margin:4px 0 10px;padding-left:20px}
.save-opt-list li{margin:2px 0}
.save-opt-bm{padding:10px 16px}
.save-opt-bm .bm-row{margin:6px 0 2px}

/* Guide #11: homepage steps with copyable settings addresses */
.hp-steps{padding-left:22px}
.hp-steps>li{margin:10px 0 14px}
.hp-copy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 4px}
.hp-copy code{font-size:.85rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere;user-select:all}
.hp-copy .btn{min-width:6.2em;justify-content:center;text-align:center;white-space:nowrap}
/* "Make HomePageCloud your homepage" dialog: big green copy button, live "Copied!" note, numbered steps, phone box */
.hp-step-label{margin:12px 0 0}
.hp-copy-main{flex-wrap:wrap;margin-top:6px}
.hp-copy-main input{min-width:0;flex:1 1 220px}
.hp-copy-main .btn{white-space:nowrap}
.hp-copied{min-height:1.4em;margin:-6px 0 8px;font-weight:600;color:var(--text)}
.hp-copied:not(:empty)::before{content:"✓ "}
.hp-copied:empty{min-height:0;margin:-6px 0 -6px}
.hp-copy-main .btn{min-width:13.5em;justify-content:center}
#dlg-homepage h3{margin:14px 0 6px;font-size:1rem}
#dlg-homepage .hp-num>li{margin:8px 0}
#dlg-homepage .hp-num>li::marker{font-weight:700}
#dlg-homepage .hp-num .muted.small{display:block;margin-top:4px}
#dlg-homepage .hp-copy{margin:6px 0 2px}
.hp-phone{border:1px solid var(--border);border-radius:10px;padding:4px 14px 8px;margin:4px 0 8px;background:var(--bg)}
.hp-phone p{margin:6px 0}
#hp-desktop[hidden],#hp-phone[hidden]{display:none}
@media (max-width:520px){.hp-copy-main .btn{width:100%;justify-content:center}#dlg-homepage .tabs [role=tab]{padding:9px 10px}}
.hp-fig{margin:8px 0 4px}
.hp-fig img{max-width:min(100%,716px)}

/* Privacy promise (landing, sign-up, /privacy) */
.privacy-promise{display:flex;gap:10px;align-items:flex-start;max-width:640px;margin:22px auto 0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--surface));border-radius:12px;font-size:.92rem;line-height:1.5;text-align:left;color:var(--text)}
.privacy-promise .pp-icon{flex:none;line-height:1.5}
.privacy-promise a{white-space:nowrap}
.auth-card .privacy-promise{margin:12px 0 16px;font-size:.86rem}
.prose .privacy-promise{margin:12px 0 20px}
/* Import card ("Bring your bookmarks over"): same family as the homepage banner; its secondary text and ✕ are
   nudged toward the body text colour so they stay AA (4.5:1) on the tinted end of the gradient in every theme. */
.imp-card :is(.hp-text .muted,.hp-close){color:color-mix(in srgb,var(--muted) 78%,var(--text))}
[data-theme=slate_blue] .imp-card :is(.hp-text .muted,.hp-close){color:var(--text)}
[data-theme=chestnut] .imp-card :is(.hp-text .muted,.hp-close){color:var(--text)}
[data-theme=hunter_green] .imp-card :is(.hp-text .muted,.hp-close){color:var(--text)}
/* Home page: common questions */
.home-faq{padding-top:0;padding-bottom:64px}
.home-faq h2{margin-top:0}
.home-faq h3{font-size:16px;margin:20px 0 4px}
.home-faq p{margin:0 0 8px}

/* ---------- Optional header weather (left of the date, same type size; off by default) ---------- */
.wx{position:relative;display:inline-flex;align-items:center;flex:none}
.wx[hidden]{display:none}
.wx-chip{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:.78rem;line-height:1.2;color:var(--muted);background:none;border:0;border-radius:6px;padding:2px 4px;margin:0 -2px 0 -4px;cursor:default;white-space:nowrap}
.wx-chip:hover,.wx-chip[aria-expanded=true]{color:var(--text)}
.wx-chip:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.wx-i{font-size:.9rem;line-height:1}
.wx-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:65;display:flex;flex-direction:column;gap:3px;min-width:210px;max-width:min(260px,calc(100vw - 24px));padding:10px 12px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);font-size:.8rem;line-height:1.35;white-space:normal;text-align:left}
.wx-pop[hidden]{display:none}
.wx-pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.wx-p-now{font-weight:600;font-size:.88rem}
.wx-p-hl,.wx-p-up{color:var(--muted)}
.wx-p-src{margin-top:4px;padding-top:6px;border-top:1px solid var(--border);font-size:.72rem}
.wx-p-src a{color:var(--muted);white-space:nowrap}
.wx-p-src a:hover{color:var(--primary)}
/* narrow headers: weather.js adds .wx-tight (temperature only) when the icon would make the header wrap */
.wx.wx-tight .wx-i{display:none}
/* Account settings → Weather */
.wx-find{display:flex;gap:8px;flex-wrap:wrap;font-weight:400}
.wx-find input{flex:1 1 220px;width:auto}
.wx-find .btn{flex:none}
.wx-results{display:flex;flex-wrap:wrap;gap:6px;font-weight:400}
.wx-results[hidden]{display:none}
.hint.wx-bad{color:var(--error)}
.wx-units{border:0;padding:0;margin:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.wx-units legend{padding:0;margin-bottom:6px;width:100%}
.wx-units .check{padding:8px 14px;font-weight:500;align-items:center}
.wx-units .check input{margin:0}

/* Account settings: green "Done" in the top bar (back to the dashboard); stays outside the phone menu */
.topbar-done{flex:none;white-space:nowrap}
.btn.btn-sm.topbar-done{padding:7px 18px}
@media (max-width:560px){.has-js .has-more .topbar-done{order:2;min-height:44px}.topnav .btn.topbar-done{padding:0 16px}}
/* Account menu: Sign out sits below a faint divider in a softer (muted) tone; full text colour on hover/focus */
.menu-item.menu-signout{color:var(--muted)}
.menu-item.menu-signout:hover,.menu-item.menu-signout:focus-visible{color:var(--text);background:rgba(127,127,127,.12)}
/* Header search ~85% of its original width on desktop (≥1024px): two invisible spacers take 15% of the room it used to
   fill (it was flex:1 up to 560px), keeping it centred between the logo and the buttons. Phones/tablets unchanged. */
@media (min-width:1024px){
  .dash-top > .brand{order:-2}
  .dash-top::before,.dash-top::after{content:"";flex:1.5 1 0;min-width:0;margin-left:-16px}
  .dash-top::before{order:-1}
  .dash-top::after{order:1}
  .dash-top > .search-box{flex:21 1 0;max-width:476px;min-width:0}
  .dash-top > .top-actions{order:2}
}
/* Weather ↔ date: the same faint "·" used between the date and the save status (wide headers); a bit more room on narrow ones */
.wx::after{content:"·" / "";font-size:.78rem;color:var(--muted);margin:0 1px 0 9px}
@media (max-width:860px){.wx::after{content:none}.wx{margin-right:12px}}
/* Smallest phones (<365px, e.g. 320px): tighten spacing so logo + weather/date + buttons stay on one row (touch targets unchanged) */
@media (max-width:364px){
  .dash-top{column-gap:4px}
  .top-actions{gap:4px}
  .wx{margin-right:7px}
  .top-actions > .menu > summary.btn-sm{padding-left:6px;padding-right:6px}
}
/* Tablet-sized windows (861–1023px): search gets its own full-width row like on phones, so "Search this page" is never cut off.
   Header only: the board/masonry below keeps its desktop spacing. Desktop single-row header starts at 1024px. */
@media (min-width:861px) and (max-width:1023px){
  .dash-top{flex-wrap:wrap;row-gap:10px}
  .dash-top > .search-box{order:3;flex-basis:100%;max-width:none;margin:0}
  .dash-top > .top-actions{margin-left:auto}
}
/* Feedback / Contact us (/feedback) */
.prose.feedback{max-width:640px}
.feedback-card{padding:24px;margin-top:20px}
.feedback-card .form{margin-top:0}
.feedback-card .lead{margin-top:0}
.feedback-card input[type=text],.feedback-card input[type=email]{width:100%}
.feedback .hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fb-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.fb-count{white-space:nowrap;flex:none}
.fb-count.near{color:var(--error)}
.fb-reply{margin:0;font-size:14px}
.fb-send{align-self:flex-start}
@media (max-width:600px){.prose.feedback{padding:28px 16px}.feedback-card{padding:18px}.fb-send{align-self:stretch}}
.fb-admin-msg{min-width:260px;max-width:520px;overflow-wrap:anywhere}
@media (max-width:367px){.prose.feedback{padding-left:12px;padding-right:12px}.feedback-card{padding:14px}.feedback-card .captcha{max-width:100%;overflow:hidden}.feedback-card .cf-turnstile{transform:scale(.88);transform-origin:0 0;margin-bottom:-8px}}
/* #install anchor (save page): land below the sticky topbar */
#install{scroll-margin-top:80px}
/* Dashboard header menus (account, View): never taller than the visible viewport; scroll inside.
   --mp-top is the menu's top edge in px, set by home.js when it opens; the 72px default is a safe guess. */
.dash-top .menu-pop{max-height:calc(100vh - var(--mp-top,72px) - 12px - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - var(--mp-top,72px) - 12px - env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Account menu on phones (touch-only, up to 860px wide): hide desktop-only items and use the phone label.
   Tablets, desktops and narrow desktop windows don't match, so they keep the full menu. */
#account-menu .phone-only{display:none}
@media (hover:none) and (pointer:coarse) and (max-width:860px){
  #account-menu .desk-only{display:none!important}
  #account-menu .phone-only{display:inline}
}
/* Save popup (bookmarklet window): fit the form in the window so Save shows without scrolling.
   Compact spacing, the section list gives up height first, and Cancel/Save stay pinned at the bottom. */
.popup-body .popup-top{padding:6px 14px}
.popup-body .popup-main{padding:8px 10px}
.popup-body .popup-main .save-card{padding:10px 14px 0;margin-bottom:0}
.popup-body .save-h{font-size:1.1rem;margin:0 0 2px}
.popup-body .popup-main .form{gap:8px;margin-top:4px}
.popup-body .save-card .field{gap:4px}
.popup-body .save-card :is(input[type=text],input[type=search]){padding:7px 10px}
.popup-body .save-card textarea{padding:6px 10px;min-height:0}
.popup-body .save-card .sec-filter{margin-bottom:4px}
.popup-body .save-card .sec-list{max-height:max(4.6em,min(8.2em,calc(100vh - 2.5rem - 414px)));padding:3px}
.popup-body .save-card .sec-list option{padding:3px 8px;line-height:1.3}
.popup-body .save-dup{margin:6px 0 0;padding:8px 10px}
.popup-body #save-form .dlg-actions{position:sticky;bottom:0;z-index:2;background:var(--surface);margin:0 -14px;padding:8px 14px 10px;border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius)}
/* Save form: the Save button uses the shared green .btn-tour (above); while the form posts it is dimmed and keeps its resting look. */
#save-form .btn.btn-tour:disabled,#save-form .btn.btn-tour:disabled:hover{opacity:.65;cursor:default;background:#15803d;border-color:#15803d;box-shadow:none}
[data-theme=hunter_green] #save-form .btn.btn-tour:disabled{border-color:#86efac}

/* Edit mode banner (t192u, views/dashboard.php #edit-hint): 3 sections side by side from 1280px
   (tips | links | how to finish + Exit), 2+1 on tablets, stacked on phones with the tips folded behind a "Tips" toggle.
   Below 1280px the buttons read "Save & Exit", so the text drops " edit mode". Touch phones get the touch wording. */
.edit-hint{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:0;padding:10px 46px 10px 0}
.edit-hint.eh-dismissed{display:none!important}
.edit-hint .eh-close{position:absolute;top:4px;right:4px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:8px;background:none;color:var(--edit-lead,var(--edit-fill));font-size:30px;line-height:1;font-weight:700;cursor:pointer}
.edit-hint .eh-close span{display:block;margin-top:-3px}
.edit-hint .eh-close:hover{background:color-mix(in srgb,var(--edit-lead,var(--edit-fill)) 16%,transparent)}
.edit-hint .eh-close:focus-visible{outline:2px solid var(--edit-ring);outline-offset:1px}
.edit-hint .eh-col{padding:0 16px;min-width:0}
.edit-hint .eh-col+.eh-col{border-left:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.edit-hint .eh-head{display:flex;align-items:center;gap:10px}
.edit-hint .eh-lead{color:var(--edit-lead,var(--edit-fill));font-weight:800;font-size:.95rem;letter-spacing:.01em}
.edit-hint .eh-list{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:22px;row-gap:1px;line-height:1.5}
.edit-hint .eh-list li{position:relative;padding-left:12px}
.edit-hint .eh-list li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--edit-lead,var(--edit-fill))}
.edit-hint .eh-tips-btn{display:none;margin-left:auto;font:inherit;font-size:.82rem;font-weight:600;color:var(--text);background:none;border:1px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:999px;padding:3px 10px;cursor:pointer}
.edit-hint .eh-tips-btn:focus-visible{outline:2px solid var(--edit-ring);outline-offset:2px}
.edit-hint .eh-links{white-space:nowrap}
.edit-hint .eh-link{color:var(--text);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:3px}
.edit-hint .eh-link:hover{text-decoration-thickness:2px}
.edit-hint .eh-link:focus-visible{outline:2px solid var(--edit-ring);outline-offset:2px}
.edit-hint .eh-sep{color:inherit}
.edit-hint .eh-finish{display:flex;align-items:center;gap:12px;line-height:1.4;color:color-mix(in srgb,var(--muted) 70%,var(--text))}
.edit-hint .eh-done{max-width:16em;line-height:1.4}
@media (max-width:1279.98px){.edit-hint .eh-done{max-width:none;white-space:nowrap}}
.edit-hint .eh-finish .kbd{font-size:10px;padding:0 5px}
.edit-hint .eh-touch{display:none}
@media (max-width:1279.98px){
  .edit-hint .eh-x{display:none}
  .edit-hint{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .edit-hint .eh-tips{grid-column:1/-1}
  .edit-hint .eh-links{border-left:0!important}
}
@media (hover:none) and (pointer:coarse) and (max-width:860px){.edit-hint .eh-desk{display:none}.edit-hint .eh-touch{display:inline}}
@media (max-width:600px){
  .edit-hint{grid-template-columns:1fr;padding:8px 0;row-gap:6px}
  .edit-hint .eh-tips .eh-head{padding-right:34px}
  .edit-hint .eh-close{top:2px;right:2px}
  .edit-hint .eh-col{padding:0 12px}
  .edit-hint .eh-col+.eh-col{border-left:0;border-top:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding-top:6px}
  .edit-hint .eh-tips-btn{display:inline-flex;gap:4px;align-items:center}
  .edit-hint .eh-list{display:none;grid-template-columns:1fr}
  .edit-hint.tips-open .eh-list{display:grid}
  .edit-hint.tips-open .eh-tips-btn span{display:inline-block;transform:rotate(180deg)}
  .edit-hint .eh-links{white-space:normal}
  .edit-hint .eh-finish{justify-content:space-between}
}

/* Title-only banner (pt284u preview): three equal-weight parts, title centred in the middle, links on the right, the
   left part empty so the title sits in the true centre. On narrow screens the empty part drops out and the title and
   links stack. */
.edit-hint.eh-titled{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:12px 46px;row-gap:0}
.edit-hint.eh-titled .eh-center{text-align:center;padding:0 28px}
.edit-hint.eh-titled .eh-title{font-size:1.05rem;white-space:nowrap}
.edit-hint.eh-titled .eh-col+.eh-col{border-left:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.edit-hint.eh-titled .eh-links{border-left:1px solid color-mix(in srgb,var(--text) 18%,transparent)!important;justify-self:stretch;text-align:right}
@media (max-width:860px){
  .edit-hint.eh-titled{grid-template-columns:1fr;padding:10px 0;row-gap:6px}
  .edit-hint.eh-titled .eh-side{display:none}
  .edit-hint.eh-titled .eh-center{padding:0 44px;text-align:center;border-top:0;padding-top:0}
  .edit-hint.eh-titled .eh-title{white-space:normal}
  .edit-hint.eh-titled .eh-col+.eh-col{border-left:0!important}
  .edit-hint.eh-titled .eh-links{border-top:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding-top:6px;text-align:center;white-space:normal}
}
/* Edit banner tip (pt290u): fills the left part in small muted text that wraps inside it, so it never pushes the centred
   title. Up to 860px the bar is one column: the tip moves to a small line under the title (order), above the links. */
.edit-hint.eh-titled .eh-tip{font-size:.8rem;line-height:1.4;color:color-mix(in srgb,var(--muted) 60%,var(--text));text-align:left}
.edit-hint.eh-titled .eh-tip-label{color:var(--text);font-weight:700}
.edit-hint.eh-titled .eh-watch{font-weight:600;white-space:nowrap}
@media (max-width:860px){
  .edit-hint.eh-titled .eh-side.eh-tip{display:block;order:1;text-align:center;padding:0 16px;font-size:.78rem}
  .edit-hint.eh-titled .eh-center{order:0}
  .edit-hint.eh-titled .eh-links{order:2}
}
/* Rename tip: phones read "Double-tap" (double-tap on a section name opens the rename box, tested in Chrome and Edge touch emulation). */
/* --edit-lead: the button amber where it passes 4.5:1 on the banner; otherwise the nearest amber that does (measured on each banner background). */
html{--edit-lead:#b45309}
html[data-theme=metal]{--edit-lead:#78350f}
html:is([data-theme=dark],[data-theme=dark_blue],[data-theme=chestnut],[data-theme=hunter_green]){--edit-lead:#fbbf24}
html[data-theme=slate_blue]{--edit-lead:#fcd34d}
@media (prefers-color-scheme:dark){html[data-theme=system]{--edit-lead:#fbbf24}}
/* Toast close button (the Edit mode toast): the toast itself never takes clicks, only its × does, so drops and taps on tiles underneath still work. */
.toast .toast-x{pointer-events:auto;margin-left:12px;background:none;border:0;color:inherit;font-size:1.1rem;line-height:1;padding:2px 4px;cursor:pointer;opacity:.8;vertical-align:middle;border-radius:4px}
.toast .toast-x:hover{opacity:1}
.toast .toast-x:focus-visible{outline:2px solid #fbbf24;outline-offset:1px}
.toast:not(.show) .toast-x{pointer-events:none}

/* ---------- Public demo (/demo): one slim, calm bar above the header; nothing else changes on the page ---------- */
.demo-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:6px 16px;font-size:.875rem;line-height:1.3;color:var(--text);background:color-mix(in srgb,var(--primary) 8%,var(--surface));border-bottom:1px solid var(--border)}
.demo-bar-sub{color:var(--muted)}
.demo-bar-actions{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.demo-bar .demo-cta{padding:5px 12px;font-size:.85rem}
.demo-bar .demo-signin{color:var(--primary);font-weight:600;text-decoration:none}
.demo-bar .demo-signin:hover{text-decoration:underline}
.demo-bar .demo-reset{background:none;border:0;padding:2px 0;color:var(--muted);font:inherit;font-size:.82rem;text-decoration:underline;cursor:pointer}
.demo-bar .demo-reset:hover{color:var(--text)}
body.demo #save-status,body.demo .date-sep{display:none}
.demo-avatar{background:var(--muted);font-size:1rem}
.menu-item.menu-demo-cta{color:var(--success);font-weight:700}
#dlg-demo .demo-gate-msg{margin:.4rem 0 .6rem}
#dlg-demo .dlg-actions a.btn{text-decoration:none}
@media (max-width:600px){
  .demo-bar{gap:4px 10px;padding:6px 10px;font-size:.82rem}
  .demo-bar .demo-cta{padding:4px 10px;font-size:.8rem}
}

/* homepage "▶ Watch" menu + modal player (views/_watch.php, assets/js/watch.js) */
.hero-watch{position:relative;display:flex;justify-content:center;margin-top:10px}
.watch-btn{display:inline-block;background:none;border:0;padding:6px;margin:0 -6px;border-radius:8px;color:var(--primary);font:inherit;font-size:.9375rem;font-weight:500;line-height:1.45;cursor:pointer;text-align:center;max-width:calc(100% + 12px)}
.watch-btn:hover{text-decoration:underline;text-underline-offset:3px}
.watch-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.watch-caret{display:inline-block;margin-left:5px;font-size:1.3em;line-height:1;vertical-align:-.05em;transition:transform .15s}
.watch-btn[aria-expanded=true] .watch-caret{transform:rotate(180deg)}
.watch-menu{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);z-index:30;list-style:none;margin:0;padding:6px;width:max-content;max-width:min(400px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px -8px rgba(15,23,42,.28);text-align:left}
.watch-menu[hidden]{display:none}
.watch-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.9375rem;line-height:1.3}
.watch-menu a:hover,.watch-menu a:focus{background:color-mix(in srgb,var(--primary) 10%,transparent);outline:none}
.watch-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--primary)}
.watch-play{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:.65rem;padding-left:2px}
.watch-title{flex:1}
.watch-len{flex:none;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums;margin-left:8px}
.watch-dlg{width:min(1000px,calc(100vw - 32px))}
.watch-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px}
.watch-x{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer}
.watch-x:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.watch-x:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.watch-stage{border-radius:0;box-shadow:none}
.watch-note{margin:0;padding:10px 20px 14px;font-size:.875rem;color:var(--muted)}
@media (max-width:600px){
  .watch-menu{width:calc(100vw - 32px)}
  .watch-dlg{width:100vw;max-width:100vw;margin:auto 0;border-radius:0;border-left:0;border-right:0}
  .watch-dlg-head{padding:8px 8px 8px 16px}.watch-dlg-head h2{font-size:1rem}
}

/* Add & Edit on phones: a slightly smaller button, and the date hides on narrow phones (normal mode only) so the header stays on one row. */
@media (max-width:860px){body:not(.editing) .btn-edit{padding-left:9px;padding-right:9px;font-size:.84rem;gap:4px}}
@media (max-width:420px){body:not(.editing) .board-date{display:none}}

/* Edit mode: the options buttons on section headers and tiles show a bold three-dot (kebab) icon ⋮ (pt326u; was ＋, which read as "add"
   though the menu also holds Delete). The dots are drawn in CSS so they are equally bold in every font; same menus, labels and button sizes. Dots are 3.5–5px across
   (pt330u: ~20% smaller than the first ⋮; still well above the old ⋯ dots of about 2px), so they are easy to see and tap (pt327u). */
.kebab-btn{line-height:1}
.kebab-btn>.kebab{display:block;flex:none;font-size:0;width:var(--kd,4px);height:var(--kd,4px);border-radius:50%;background:currentColor;
  box-shadow:0 calc(-1 * var(--kg,6px)) 0 currentColor,0 var(--kg,6px) 0 currentColor}
.sec-menu>summary.kebab-btn{min-width:34px;height:34px;color:var(--text);--kd:4px;--kg:6px}
.lk-edit.kebab-btn{width:28px;height:28px;color:var(--text);display:flex;align-items:center;justify-content:center;padding:0;--kd:3.5px;--kg:5px}
.lk-edit.kebab-btn:hover{background:var(--primary);color:#fff;box-shadow:none}
@media (pointer:coarse){
  .sec-menu>summary.kebab-btn{min-width:44px;height:44px;--kd:5px;--kg:7.5px}
  .lk-edit.kebab-btn{width:34px;height:34px;--kd:4px;--kg:6px}
  .lk-edit.kebab-btn::after{inset:-6px}
}
/* High-contrast (forced colours) drops backgrounds and shadows: show the ⋮ character instead */
@media (forced-colors:active){.kebab-btn>.kebab{font-size:1.3rem;font-weight:900;width:auto;height:auto;background:none;box-shadow:none;border-radius:0}}


/* Edit link: icon address + Browse… (upload your own picture), preview and Remove */
.icon-field label{display:flex;flex-direction:column}
.icon-row{display:flex;gap:8px;align-items:center}
.icon-row input[type=text]{flex:1;min-width:0}
.icon-row .btn{flex:none;white-space:nowrap}
.icon-prev{display:flex;align-items:center;gap:10px;font-weight:500}
.icon-prev[hidden]{display:none}
.icon-prev img{width:40px;height:40px;object-fit:contain;border-radius:8px;border:1px solid var(--border);background:var(--surface)}
.icon-prev .btn{margin-left:auto}
.icon-hint{font-weight:400}
.icon-field input[readonly]{opacity:.75}
/* Bigger dropdown arrows (Ward: "make the drop down arrows larger"): section collapse ▾/▸ and the ▾ on View, Tips, Import groups and grouped text links */
.collapse-btn{font-size:1.4rem;line-height:1}
/* Section arrow ~1.5x bigger again and pointing at the name when collapsed (Ward t293u): ▾ expanded, turned to ◂ when
   collapsed (the arrow sits at the right end of the header, the name at the left). Same 32px button. */
.collapse-btn .cl-caret{display:inline-block;font-size:1.5em;line-height:1;transition:transform .15s}
.sec.is-collapsed > .sec-head > .collapse-btn .cl-caret{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.collapse-btn .cl-caret{transition:none}}
/* Clicking a section's name folds/unfolds it (outside Edit mode); a linked name keeps a small ↗ that opens the site */
.sec-tog{cursor:pointer;border-radius:4px}
.sec-tog:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.sec-tog:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sec-ext{color:var(--muted);text-decoration:none;font-size:.85rem;line-height:1;padding:4px;margin-left:-4px;border-radius:6px}
.sec-ext:hover{color:var(--primary)}
.sec-ext:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.dd-caret{display:inline-block;font-size:1.5em;line-height:0;margin-left:2px;vertical-align:-.04em}
/* Edit mode on a computer: the tile ⋮ is always shown, like the section ⋮ (it used to appear only on hover). Touch screens keep their own rule above. */
@media (hover:hover) and (pointer:fine){body.editing .lk-edit.kebab-btn{opacity:1}}

/* Section "Start scrolling after ___ items" (⋮ menu). home.js sets --cap on .links.scroll-cap to the bottom of the row
   holding the Nth item; only outside Edit mode (home.js doesn't add the class there) and not while searching. The 3px
   padding / -3px margin keeps hover borders and focus rings from being clipped without moving the tiles. */
.links.scroll-cap{max-height:var(--cap,none);overflow-y:auto;overflow-x:hidden;padding:3px 6px 3px 3px;margin:-3px -6px -3px -3px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent;scroll-padding:3px}
.links.scroll-cap:hover{scrollbar-color:color-mix(in srgb,var(--muted) 75%,transparent) transparent}
.links.scroll-cap.cap-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),rgba(0,0,0,.35));mask-image:linear-gradient(#000 calc(100% - 14px),rgba(0,0,0,.35))}
.searching .links.scroll-cap{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
@media print{.links.scroll-cap{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}}
.sa-row{padding:4px 10px 6px}
.sa-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:500 .875rem var(--font);color:var(--text);cursor:default}
.sa-input{width:4.6em;padding:5px 6px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font:500 .875rem var(--font);text-align:center}
.sa-lbl,.sa-num{white-space:nowrap}
.sa-num{display:inline-flex;align-items:center;gap:8px}
.sa-input:focus{border-color:var(--primary)}
.sa-input[aria-invalid=true]{border-color:var(--error)}
.sa-hint{margin-top:4px;font-size:.72rem;line-height:1.35;color:var(--muted);max-width:232px}
.sa-hint.sa-err{color:var(--error)}
@media (pointer:coarse){.sa-input{min-height:40px;font-size:1rem;width:5em}.sa-hint{max-width:268px}}

/* Edit-mode add buttons (pt286u preview): + Link, + Bot and + Section are solid green with white text and a 2px white
   border in every theme. #15803d with white text is 5.0:1 (hover #166534, 7.1:1). ID selectors so no theme's
   .btn-primary / .btn-ghost colours win. */
#btn-add-link,#btn-add-bot,#btn-add-section{background:#15803d;color:#fff;border:2px solid #fff}
#btn-add-link:hover,#btn-add-bot:hover,#btn-add-section:hover{background:#166534;border-color:#fff;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
#btn-add-link:active,#btn-add-bot:active,#btn-add-section:active{background:#14532d}
#btn-add-link:focus-visible,#btn-add-bot:focus-visible,#btn-add-section:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
:is([data-theme=dark],[data-theme=dark_blue],[data-theme=slate_blue],[data-theme=chestnut],[data-theme=hunter_green]) :is(#btn-add-link,#btn-add-bot,#btn-add-section):focus-visible{outline-color:#fde047}
@media (prefers-color-scheme:dark){[data-theme=system] :is(#btn-add-link,#btn-add-bot,#btn-add-section):focus-visible{outline-color:#fde047}}
/* Light themes (Light, Metal, System in light mode): a thin dark-green ring outside the white border so the border
   reads against the light bar (t286s1230). Hover keeps the ring and adds the shadow. */
:is([data-theme=light],[data-theme=metal]) :is(#btn-add-link,#btn-add-bot,#btn-add-section){box-shadow:0 0 0 1px #14532d}
:is([data-theme=light],[data-theme=metal]) :is(#btn-add-link,#btn-add-bot,#btn-add-section):hover{box-shadow:0 0 0 1px #14532d,0 2px 6px rgba(0,0,0,.25)}
@media (prefers-color-scheme:light){
  [data-theme=system] :is(#btn-add-link,#btn-add-bot,#btn-add-section){box-shadow:0 0 0 1px #14532d}
  [data-theme=system] :is(#btn-add-link,#btn-add-bot,#btn-add-section):hover{box-shadow:0 0 0 1px #14532d,0 2px 6px rgba(0,0,0,.25)}
}
/* Edit mode line (pt328u): the boxed banner replaced by a clean, unboxed line. Overrides the .edit-hint box rules above
   (background, border, padding, pulsing ring, grid). Title colour --edit-lead measured on each theme's page background
   (--bg): light 4.72, metal 5.63, slate 6.89, hunter 7.08, chestnut 7.84, dark/dark blue/system dark 10.7 : 1, so all pass
   WCAG AA (4.5:1, and 3:1 for large text) without changes. */
.edit-hint.eh-clean{display:block;position:relative;background:none;border:0;border-radius:0;padding:2px 40px 0;margin:0 0 12px;text-align:center;box-shadow:none}
.edit-hint.eh-clean::after{content:none;display:none}
.edit-hint.eh-clean .eh-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px}
.edit-hint.eh-clean .eh-title{color:var(--edit-lead,var(--edit-fill));font-weight:800;font-size:1.1rem;letter-spacing:.01em;line-height:1.3}
.edit-hint.eh-clean .eh-done{font:inherit;font-size:.8rem;font-weight:700;line-height:1;padding:5px 11px;border-radius:999px;cursor:pointer;background:none;color:var(--edit-lead,var(--edit-fill));border:1.5px solid var(--edit-lead,var(--edit-fill))}
.edit-hint.eh-clean .eh-done:hover{background:color-mix(in srgb,var(--edit-lead,var(--edit-fill)) 14%,transparent)}
.edit-hint.eh-clean .eh-done:focus-visible{outline:2px solid var(--edit-ring);outline-offset:2px}
.edit-hint.eh-clean .eh-more{margin-top:3px;font-size:.78rem;line-height:1.45;color:color-mix(in srgb,var(--muted) 70%,var(--text))}
.edit-hint.eh-clean .eh-tip-label{color:inherit;font-weight:700}
.edit-hint.eh-clean .eh-watch{font-weight:600;white-space:nowrap}
.edit-hint.eh-clean .eh-link{color:inherit}
.edit-hint.eh-clean .eh-links{white-space:nowrap}
.edit-hint.eh-clean .eh-links::before{content:"|";margin:0 10px;opacity:.45}
.edit-hint.eh-clean .eh-close{top:-4px;right:0;width:32px;height:32px;font-size:22px;font-weight:400;color:var(--muted);opacity:.85}
.edit-hint.eh-clean .eh-close:hover{opacity:1;color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent)}
.edit-hint.eh-clean .eh-tips-btn{display:none;margin:0;font-size:.76rem;padding:3px 9px;color:var(--muted)}
@media (max-width:860px){
  .edit-hint.eh-clean{padding:0 34px;margin-bottom:10px}
  .edit-hint.eh-clean .eh-title{font-size:1rem}
  .edit-hint.eh-clean .eh-tips-btn{display:inline-flex;gap:4px;align-items:center}
  .edit-hint.eh-clean .eh-more{display:none;margin-top:6px}
  .edit-hint.eh-clean.tips-open .eh-more{display:block}
  .edit-hint.eh-clean.tips-open .eh-tips-btn span{display:inline-block;transform:rotate(180deg)}
  .edit-hint.eh-clean .eh-tip{display:block}
  .edit-hint.eh-clean .eh-links{display:block;margin-top:4px;white-space:normal}
  .edit-hint.eh-clean .eh-links::before{content:none}
}

/* Quiet Edit mode (edit-quiet, Ward Oct 27 2026; replaces the "You're in Edit Mode" line, now commented out in views/dashboard.php):
   (a) a 3px amber edge along the top of the sticky header, drawn with an inset shadow so nothing moves;
   (b) a static 2px dashed amber outline on each top-level section, drawn on the existing ::after overlay (no layout shift; the
       pulsing solid ring is turned off). --edit-ring is the amber already checked at >= 3:1 on every theme's page.
   Drag/drop keeps its blue (--primary) highlights: the dragged card, its placeholder and the drop target still drop the amber. */
body.editing .dash-top{box-shadow:inset 0 3px 0 var(--edit-ring)}
html:is([data-theme],:not([data-theme])) body.editing .sec::after{box-shadow:none;animation:none;border:2px dashed var(--edit-ring)}
html:is([data-theme],:not([data-theme])) body.editing .sec .sec::after{content:none}
/* The "?" next to Save & Exit: the tip and the Guide links (a details.menu, so home.js's menu code closes and fits it). */
.eq-help>summary.eq-help-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font:700 .95rem/1 var(--font);padding:0}
.eq-help>summary.eq-help-btn:hover{border-color:var(--edit-ring);background:color-mix(in srgb,var(--edit-ring) 10%,var(--surface))}
.eq-help>summary.eq-help-btn:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.eq-help[open]>summary.eq-help-btn{border-color:var(--edit-ring);box-shadow:0 0 0 1px var(--edit-ring)}
.eq-pop{width:290px;min-width:0}
.eq-tip{margin:2px 4px 6px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--edit-ring) 10%,var(--surface));color:var(--text);font-size:.85rem;line-height:1.4}
@media (pointer:coarse){.eq-help>summary.eq-help-btn{width:40px;height:40px;font-size:1.05rem}}
/* Phones and narrow windows: the popover spans the header width (anchored to the sticky header) instead of hanging off the button. */
@media (max-width:860px){.eq-help{position:static}.eq-help .eq-pop{left:12px;right:12px;width:auto;max-width:420px;margin-left:auto}}
/* Up to 600px the header actions wrap to two rows and row 2 (Section, Save & Exit, View, account) is already full, so the "?"
   ends row 1 (after + Bot, just above Save & Exit / View) instead of pushing the account button onto a third row. */
@media (max-width:600px){.top-actions>#btn-add-section,.top-actions>#btn-edit,.top-actions>.eq-help~*{order:2}}
/* Drop target (edit-quiet, Oct 27 2026): the section a link is being dragged over must clearly outrank the idle dashed amber
   Edit-mode outline, so it gets a solid bright-blue ring, a soft halo and a light blue tint. --drop-ring is checked >= 3:1 against
   the page and against the tinted section on every theme. Outline and box-shadow only, so nothing moves. */
html{--drop-ring:#2563eb}
html[data-theme=metal]{--drop-ring:#1d4ed8}
html:is([data-theme=dark],[data-theme=dark_blue],[data-theme=slate_blue],[data-theme=chestnut],[data-theme=hunter_green]){--drop-ring:#7dd3fc}
@media (prefers-color-scheme:dark){html[data-theme=system]{--drop-ring:#7dd3fc}}
html .sec.drop-target{outline:2px solid var(--drop-ring);outline-offset:2px;background:color-mix(in srgb,var(--drop-ring) 14%,var(--surface));box-shadow:0 0 0 7px color-mix(in srgb,var(--drop-ring) 30%,transparent)}

/* Edit mode hides the weather and the date in the header for more room (Ward, pt336u, Oct 27 12:53 PM ET). The "● Saved" status stays;
   with the weather (its "·" is .wx::after), the date and .date-sep all gone, no stray "·" is left. Leaving Edit mode brings them back. */
body.editing .wx,body.editing .board-date,body.editing .date-sep{display:none}

/* Phones, Edit mode only: the logo joins the button row instead of sitting alone on
   its own top row (Ward approved preview Oct 27 1:42 PM ET). The "?" moves down beside
   Save & Exit (same order as on computers) so "+ Section" fits on the first row.
   Out of Edit mode and on computers nothing changes. */
@media (max-width:600px){body.editing .dash-top>.top-actions{flex:1 1 0;min-width:0}body.editing .dash-top>.brand{align-self:flex-start}body.editing .top-actions>#btn-add-section{order:0}body.editing .top-actions>.eq-help{order:2}}
@media (max-width:364px){body.editing .top-actions>#btn-add-link,body.editing .top-actions>#btn-edit{padding-left:10px;padding-right:10px}}

/* Phones, Edit mode only (Ward, pt337u, Oct 27 1:59 PM ET preview): View is hidden so + Link, + Bot,
   + Section and Save & Exit share one full-width top row; logo, Saved dot, search, ? and avatar share
   a compact second row. Below 420px the buttons are a little narrower; below 375px Save & Exit reads
   "✓ Done" (its spoken label stays "Save & Exit edit mode"). View returns on exit; computers unchanged. */
@media (max-width:600px){
body.editing .dash-top{row-gap:0;column-gap:6px}
body.editing .dash-top::after{content:"";order:1;flex:0 0 100%;height:0;margin:0}
body.editing .dash-top>.top-actions{display:contents}
body.editing .dash-top>.top-actions>#view-menu{display:none}
body.editing .dash-top>.top-actions>#btn-add-link,body.editing .dash-top>.top-actions>#btn-add-bot,body.editing .dash-top>.top-actions>#btn-add-section,body.editing .dash-top>.top-actions>#btn-edit{order:0;flex:1 1 auto;justify-content:center}
body.editing .dash-top>.brand,body.editing .dash-top>.search-box,body.editing .dash-top>.top-actions>#save-status,body.editing .dash-top>.top-actions>#eq-help,body.editing .dash-top>.top-actions>#account-menu{order:2;margin-top:6px}
body.editing .dash-top>.search-box{flex:1 1 0;min-width:0}
}
@media (max-width:419.98px){
body.editing .dash-top{column-gap:4px}
body.editing .dash-top>.top-actions>#btn-add-link,body.editing .dash-top>.top-actions>#btn-add-bot,body.editing .dash-top>.top-actions>#btn-add-section,body.editing .dash-top>.top-actions>#btn-edit{padding-left:6px;padding-right:6px}
}
@media (max-width:374.98px){
body.editing .dash-top>.top-actions>#btn-edit .ico{display:inline}
body.editing .dash-top>.top-actions>#btn-edit .lbl{display:none}
body.editing .dash-top>.top-actions>#btn-edit::after{content:"Done"}
}