/* ===== 0. Kazel Celeste brand (Nov 10 2026) — THE ONE PLACE FOR COLORS =====
   Every color in the app comes from this block. To change a color, change it here only.
   Text rules: on white use ink, gray or blue-500; on blue-500 use white or teal-200.
   Never teal-500 or orange-500 text on white. No red as a main color, no gradients, no shadows, no glows. */

/* Fonts, stored in the app (fonts/, SIL Open Font License): Barlow for everything, Barlow Semi Condensed for headings
   (Kazel chose Barlow on Nov 11 2026 to go with the official logo; replaced Nunito + Inter) */
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/barlow-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/barlow-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/barlow-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/barlow-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/barlow-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/barlow-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/barlow-semi-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/barlow-semi-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* the brand palette (Kazel's names, exactly) */
  --blue-500:#1C45A0; --blue-700:#0F2C66; --ink:#0E1A33; --blue-300:#9DBBE6; --blue-100:#DCE8F6; --blue-50:#EEF4F8;
  --teal-700:#0B7F83; --teal-500:#12A4A8; --teal-200:#8FE3E5; --orange-500:#F2A541; --gray:#4A5670; --white:#FFFFFF;
  /* the thin lines between rows of a grouped list: softer than --divider (Kazel, Nov 10) */
  --divider-soft:color-mix(in srgb,#DCE8F6 60%,transparent);
  /* hover motion (Kazel, Nov 10): the one shadow in the app is the lifted list row's (her exception to "flat") */
  --lift-shadow:0 10px 24px -10px color-mix(in srgb,#0E1A33 38%,transparent),0 2px 6px -2px color-mix(in srgb,#0E1A33 14%,transparent);
  --rise-dur:1.1s; --rise-ease:cubic-bezier(.16,1,.3,1); --slide-dur:450ms; --slide-ease:cubic-bezier(.22,1,.36,1);
  --depth-dur:300ms; --depth-ease:cubic-bezier(.22,1,.36,1);
  /* functional red, small and only for warnings, Delete and Overdue (Kazel, Nov 10) */
  --red-600:#B3001E; --red-300:#FF8A80;

  /* what each color is used for (light) */
  --page:var(--blue-50); --surface:var(--white); --surface-2:var(--blue-50); --line:var(--blue-100); --divider:var(--blue-50);
  --text:var(--ink); --text-2:var(--gray); --accent:var(--blue-500); --accent-2:var(--blue-700); --on-accent:var(--white);
  --ok:var(--teal-700); --on-ok:var(--white); --warn:var(--red-600); --dot:var(--blue-300);
  --chip-draft-bg:var(--blue-50); --chip-draft-fg:var(--gray);
  --chip-event-bg:var(--blue-100); --chip-event-fg:var(--blue-700);
  --chip-topic-bg:var(--blue-50); --chip-topic-fg:var(--blue-700);
  --chip-ok-bg:var(--teal-700); --chip-ok-fg:var(--white);
  --chip-pub-bg:var(--blue-500); --chip-pub-fg:var(--white);
  --fab-bg:var(--blue-500); --fab-fg:var(--white);
  --band:var(--blue-500); --band-btn:var(--blue-700);

  /* the older names used across this file, now pointing at the brand colors */
  --bg:var(--page); --bg0:var(--page); --default-bg:var(--page); --bg2:var(--surface-2); --field:var(--surface-2);
  --card:var(--surface); --glass:var(--surface); --glass-strong:var(--surface); --sheet:var(--page);
  --lg-fill:var(--surface); --lg-fill-strong:var(--surface);
  --glass-b:transparent; --sep:var(--divider); --hi:transparent;
  --blue:var(--accent); --blue-d:var(--accent-2); --blue-press:var(--accent-2); --accent-ink:var(--on-accent);
  --glass-sh:none; --card-sh:none; --lg-shadow:none; --lg-blur:none; --blur-ui:none;
  --hr-fg:var(--ok); --hr-bg:var(--surface-2); --hs-fg:var(--text-2); --hs-bg:var(--surface-2);
  --t-exp-fg:var(--chip-topic-fg); --t-exp-bg:var(--chip-topic-bg); --t-grd-fg:var(--chip-topic-fg); --t-grd-bg:var(--chip-topic-bg);
  --t-hom-fg:var(--chip-topic-fg); --t-hom-bg:var(--chip-topic-bg);
  --s-idea:var(--text-2); --s-draft:var(--text-2); --s-review:var(--orange-500); --s-ok:var(--ok); --s-posted:var(--accent);
  --k-draft:var(--gray); --k-sched:var(--accent); --k-event:var(--blue-300); --k-posted:var(--ok);
  color-scheme:light;
}
/* dark mode, built from the same brand colors */
:root[data-theme="dark"]{
  --divider-soft:color-mix(in srgb,#0E1A33 45%,transparent);
  --lift-shadow:0 12px 26px -10px color-mix(in srgb,#000 70%,transparent),0 2px 6px -2px color-mix(in srgb,#000 40%,transparent);
  --page:var(--ink); --surface:var(--blue-700); --surface-2:var(--ink); --line:var(--blue-500); --divider:var(--ink);
  --text:var(--white); --text-2:var(--blue-100); --accent:var(--teal-200); --accent-2:var(--blue-100); --on-accent:var(--ink);
  --ok:var(--teal-200); --on-ok:var(--ink); --warn:var(--red-300); --dot:var(--blue-300);
  --chip-draft-bg:var(--ink); --chip-draft-fg:var(--blue-100);
  --chip-event-bg:var(--blue-500); --chip-event-fg:var(--white);
  --chip-topic-bg:var(--ink); --chip-topic-fg:var(--blue-100);
  --chip-ok-bg:var(--teal-200); --chip-ok-fg:var(--ink);
  --chip-pub-bg:var(--blue-500); --chip-pub-fg:var(--white);
  --fab-bg:var(--teal-200); --fab-fg:var(--ink);
  --band:var(--blue-700); --band-btn:var(--ink);
  color-scheme:dark;
}
/* KCC Content Calendar — Apple-style liquid glass, light theme only.
   Sections 1–2 come from the original claude.ai calendar so the look stays the same;
   section 3 adds the standalone app's own screens (sign-in, team, settings, progress). */

/* ===== 1–2. Original calendar styles + liquid glass theme ===== */
:root{
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.hero{text-align:center;padding:64px 0 36px}
.eyebrow{margin:0;font-size:15px;font-weight:600;color:var(--accent)}
h1{margin:10px 0 10px;font-size:clamp(40px,8vw,72px);line-height:1.05;font-weight:700;letter-spacing:-0.015em}
.sub{margin:0 auto;max-width:600px;font-size:clamp(17px,2.4vw,21px);color:var(--text-2)}
.who{margin-top:18px;font-size:14px;color:var(--text-2);min-height:20px}
.stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:8px 0 28px}
.stat.sdue-soon{background:var(--surface-2);color:var(--text)}
.stat.sdue-soon span{color:var(--text)}
.stat.sdue-soon:hover{background:var(--surface-2)}
.stat.sdue-soon[aria-pressed="true"]{border-color:var(--blue-300)}
.stat.sdue-late{background:color-mix(in srgb,var(--warn) 10%,var(--surface));color:var(--warn)}
.stat.sdue-late span{color:var(--warn)}
.stat.sdue-late:hover{background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.stat.sdue-late[aria-pressed="true"]{border-color:var(--warn)}
@media (max-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat.stodo{background:var(--surface-2);color:var(--text)}
.stat.stodo span{color:var(--text)}
.stat.stodo:hover{background:var(--surface-2)}
.stat.stodo[aria-pressed="true"]{border-color:var(--orange-500);background:var(--surface-2)}
.stat{background:var(--bg2);border-radius:16px;padding:14px 12px;text-align:center;border:2px solid transparent;cursor:pointer;color:var(--text);font:inherit;min-height:44px;transition:border-color .15s,background .15s}
.stat:hover{background:var(--line)}
.stat[aria-pressed="true"]{border-color:var(--accent);background:var(--card)}
.stat b{display:block;font-size:26px;font-weight:700}
.stat span{font-size:12px;font-weight:600;color:var(--text-2)}
.bar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden;margin:-12px 0 28px}
.bar i{display:block;height:100%;background:var(--s-ok);width:0;transition:width .4s}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.toolbar[hidden],.seg[hidden]{display:none}
.seg{display:inline-flex;background:var(--bg2);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:500;cursor:pointer;color:var(--text-2);min-height:38px}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:none}
.datepick{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.navbtn{width:42px;min-height:42px;justify-content:center;padding:0;font-size:20px}
select.pill,input.search{background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;min-height:42px}
input.search{flex:1 1 200px;min-width:0}
.btn{border:0;border-radius:980px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;min-height:42px;background:var(--bg2);color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.small{padding:8px 14px;min-height:38px;font-size:13px}
.notice{background:var(--bg2);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--text-2);margin:10px 0}
.notice:empty{display:none}
h2.month{font-size:32px;font-weight:700;letter-spacing:-0.01em;margin:32px 0 8px}
.empty{padding:28px 4px;color:var(--text-2);font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tag{font-size:12px;font-weight:600;border-radius:980px;padding:3px 10px;white-space:nowrap}
.tag.Explained,.chip.Explained{color:var(--t-exp-fg);background:var(--t-exp-bg)}
.tag.ground,.chip.ground{color:var(--t-grd-fg);background:var(--t-grd-bg)}
.tag.home,.chip.home{color:var(--t-hom-fg);background:var(--t-hom-bg)}
.status{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-Idea{color:var(--s-idea)} .st-Drafted{color:var(--s-draft)} .st-review{color:var(--s-review)} .st-Approved{color:var(--s-ok)} .st-Posted{color:var(--s-posted)}
.avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--text-2);margin:6px 0 4px;align-items:center}
.calhint{font-size:13px;color:var(--text-2);margin:4px 0 10px}
/* list */
.list{border-top:1px solid var(--line)}
.rowhead{width:100%;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:16px 4px;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}
.rowhead:hover{background:var(--bg2)}
.date{width:96px;flex:0 0 auto}
.date small{display:block;font-size:12px;font-weight:600;color:var(--text-2)}
.date strong{font-size:24px;font-weight:700}
.main{flex:1 1 300px;min-width:0}
.idea{font-size:17px;font-weight:500;display:block}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:13px;color:var(--text-2)}
.chev{flex:0 0 auto;color:var(--text-2)}
.rthumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}
/* month */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:14px;overflow:hidden}
.dow{font-size:12px;font-weight:600;color:var(--text-2);padding:10px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.cell{min-height:124px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;transition:background .15s}
.cell.blank{background:var(--bg2)}
.over{background:var(--t-exp-bg)!important}
.dnum{font-size:13px;font-weight:600;color:var(--text-2);display:flex;justify-content:space-between;align-items:center;min-height:28px}
.cell.today .dnum span{background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 8px}
.addday{border:0;background:transparent;color:var(--text-2);width:28px;height:28px;border-radius:8px;cursor:pointer;opacity:0;font-size:18px;line-height:1}
.addday:hover{background:var(--bg2)}
.cell:hover .addday,.wcol:hover .addday,.addday:focus{opacity:1}
.hol{display:block;font-size:11px;font-weight:700;line-height:1.25;border-radius:6px;padding:3px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .hol,.meta .hol{display:inline-block;font-size:12px;padding:3px 10px;border-radius:980px}
.hol-r{color:var(--hr-fg);background:var(--hr-bg)}
.hol-s{color:var(--hs-fg);background:var(--hs-bg)}
.cell.isHol .dnum span{color:var(--hr-fg)}
.chip{width:100%;text-align:left;border:0;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.chip:hover{filter:brightness(0.96)}
.chip.posted{text-decoration:none}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
/* week */
.weeknav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:24px 0 14px}
.weeknav h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-0.01em;flex:1 1 220px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.wcol{background:var(--bg2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:320px;min-width:0;transition:background .15s}
.wcol.today{outline:2px solid var(--accent)}
.whead{display:flex;justify-content:space-between;align-items:center}
.whead small{display:block;font-size:12px;font-weight:600;color:var(--text-2)}
.whead strong{font-size:20px;font-weight:700}
.wcard{background:var(--card);border:0;border-radius:12px;padding:10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:none;min-width:0}
.wcard:hover{box-shadow:none}
.wcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.wcard .t{font-size:14px;font-weight:600;line-height:1.3}
.wcard .m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--text-2)}
.wcard .status{font-size:12px}
.wempty{font-size:13px;color:var(--text-2);padding:4px}
/* detail */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
label.f,div.f{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
label.f select,label.f input,label.f textarea,.f input{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:400;color:var(--text);min-height:44px;width:100%}
textarea{resize:vertical;line-height:1.5}
textarea.caption{min-height:170px;overflow:hidden;resize:none}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.hint{font-size:12px;color:var(--text-2);font-weight:400}
.sec{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.sec h4{margin:0 0 4px;font-size:17px}
.sec p.d{margin:0 0 12px;font-size:13px;color:var(--text-2)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:10px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:6px}
.gallery video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--ink)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--bg2)}
.gallery .ga{display:flex;gap:6px;flex-wrap:wrap}
.upl{position:relative;overflow:hidden}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.picker{position:relative}
.menu{position:absolute;z-index:5;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:none;overflow:hidden}
.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border:0;background:transparent;text-align:left;cursor:pointer;min-height:44px;font-size:14px}
.menu button:hover,.menu button:focus{background:var(--bg2)}
dialog{border:0;border-radius:20px;padding:28px;max-width:480px;width:calc(100% - 32px);background:var(--card);color:var(--text)}
dialog::backdrop{background:color-mix(in srgb,var(--ink) 40%,transparent)}
dialog h3{margin:0 0 16px;font-size:24px}
dialog.wide{max-width:760px;max-height:calc(100vh - 48px);overflow:auto}
.dlghead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.dlghead h3{margin:0}
.dlghead small{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.guide{background:var(--bg2);border-radius:20px;padding:clamp(18px,3vw,28px);margin:0 0 28px}
.guide[hidden]{display:none}
.ghead{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.ghead>div{flex:1 1 360px}
.guide h2{margin:4px 0 6px;font-size:clamp(24px,3.5vw,30px);line-height:1.1;font-weight:700;letter-spacing:-0.01em}
.glead{margin:0;max-width:600px;font-size:15px;line-height:1.45;color:var(--text-2)}
.gsteps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.gcard{background:var(--card);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.gnum{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.gcard h3{margin:2px 0 0;font-size:16px;font-weight:700}
.gcard p{margin:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.gcard b,.gtips b{color:var(--text)}
.gtips{background:var(--card);border-radius:14px;padding:14px 18px;margin-top:10px}
.gtips h3{margin:0 0 6px;font-size:16px}
.gtips ul{margin:0;padding-left:20px;font-size:14px;line-height:1.45;color:var(--text-2);display:flex;flex-direction:column;gap:4px}
.clist{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px}
.cmt{display:flex;gap:10px;align-items:flex-start}
.cmt .avatar{width:30px;height:30px;margin-top:2px}
.cbody{flex:1 1 auto;min-width:0;background:var(--bg2);border-radius:14px;padding:10px 12px}
.chead{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px}
.chead b{font-weight:600}
.chead time{color:var(--text-2);font-size:12px}
.ctext{margin:4px 0 0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cdel{margin-left:auto;border:0;background:none;color:var(--text-2);font-size:12px;cursor:pointer;padding:4px;min-height:28px}
.cdel:hover{color:var(--text)}
.cnote .cbody{background:var(--card);border:1px solid var(--line)}
.cnew{display:flex;gap:8px;align-items:flex-end}
.cnew textarea{flex:1 1 auto;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15px;min-height:44px}
.gtopics{background:var(--card);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.gtopics h3{margin:0 0 8px;font-size:16px}
.gtrow{display:flex;gap:12px;align-items:baseline;padding:5px 0}
.gtrow .tag{flex:0 0 92px;text-align:center}
.gtrow p{margin:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.ready{background:var(--surface-2);border:2px solid var(--ok);border-radius:20px;padding:18px 20px;margin:0 0 24px}
.rhead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:10px}
.rhead h2{margin:0;font-size:22px;font-weight:700;color:var(--ok)}
.rhead .hint{color:var(--ok)}
.rlist{display:flex;flex-direction:column;gap:8px}
.ritem{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:14px;padding:8px 10px 8px 4px}
.ropen{flex:1 1 auto;min-width:0;display:flex;gap:14px;align-items:center;background:none;border:0;text-align:left;cursor:pointer;padding:4px 8px;color:var(--text)}
.rdate{width:58px;flex:0 0 auto}
.rdate small{display:block;font-size:11px;font-weight:600;color:var(--text-2)}
.rdate strong{font-size:18px;font-weight:700}
.rmain{min-width:0;display:flex;flex-direction:column;gap:4px}
.ridea{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rtag{font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px}
.rtag.late{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.rtag.today{color:var(--accent);background:var(--surface-2)}
.cell.tap,.wcol.tap{cursor:pointer}
.cell.tap:active{background:var(--t-exp-bg)}
@media (hover:none){.addday{opacity:1}}
@keyframes inL{from{opacity:.3;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:.3;transform:translateX(-40px)}to{opacity:1;transform:none}}
#board.slideL{animation:inL .22s ease-out}
#board.slideR{animation:inR .22s ease-out}
#board{touch-action:pan-y}
.chip.posted{background:var(--surface-2)!important;color:var(--text-2)!important;opacity:.6}
.wcard.posted{background:var(--surface-2);opacity:.6;box-shadow:none}
.wcard.posted .t{color:var(--text-2)}
.wcard.posted img{filter:grayscale(1)}
.rowhead.posted{opacity:.55}
.rowhead.posted .idea{color:var(--text-2)}
.rowhead.posted .tag{background:var(--surface-2)!important;color:var(--text-2)!important}
.rowhead.posted .rthumb{filter:grayscale(1)}
.pchk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--ok);color:var(--on-accent);font-size:10px;font-weight:700;margin-right:5px;vertical-align:1px;flex:0 0 auto}
.idea .pchk,.wcard .pchk{width:18px;height:18px;font-size:11px}
.chip.posted .dot{display:none}
#filters{margin:18px 0 0}
.tbspacer{flex:1 1 auto}
.hrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:28px 0 8px}
.hrow h2.month{margin:0}
.weeknav #viewSeg{margin-left:auto}
.lgposted{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--text-2)}
.trow1{display:flex;gap:8px}
.trow1 input{flex:1 1 auto;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:16px;min-height:44px}
.trow2{display:flex;flex-wrap:wrap;gap:10px}
.tl{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-2)}
.tl input,.tl select{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;min-height:40px;max-width:100%}
.duetag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap}
.duetag.soon{color:var(--text);background:var(--surface-2)}
.duetag.late{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.chip.due-soon{box-shadow:inset 0 0 0 2px var(--blue-300)}
.chip.due-late{box-shadow:inset 0 0 0 2px var(--warn)}
.wcard.due-soon{box-shadow:inset 4px 0 0 var(--blue-300)}
.wcard.due-late{box-shadow:inset 4px 0 0 var(--warn)}
.rowhead.due-soon{box-shadow:inset 4px 0 0 var(--blue-300)}
.rowhead.due-late{box-shadow:inset 4px 0 0 var(--warn)}
.revise{background:var(--bg2);border-radius:14px;padding:10px;margin-top:10px}
.revise input{flex:1 1 auto;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15px;min-height:42px}
.trow1{display:flex;gap:8px}
.linkbtn{background:none;border:0;padding:4px 2px;margin:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-align:left;min-height:32px}
.linkbtn:hover{text-decoration:underline}
.reqchk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:2px solid var(--text-2);border-radius:6px;background:var(--surface);display:inline-grid;place-content:center;cursor:pointer;flex:0 0 auto;color-scheme:light}
.reqchk input:checked{background:var(--accent);border-color:var(--accent)}
.reqchk input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--glass-b);border-bottom:2px solid var(--glass-b);transform:rotate(-45deg) translate(1px,-1px)}
.reqchk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fbsched:has(.schedPrev) ~ .sec .capPrev{display:none}
/* fb preview mockup */
.fbcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;max-width:420px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.fbhead{display:flex;gap:10px;align-items:flex-start;padding:12px 14px 6px}
.fbava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#0066cc}
.fbname{font-size:15px;font-weight:700;color:#050505;display:flex;align-items:center;gap:4px}
.fbverified{flex:0 0 auto;display:block}
.fbmeta{font-size:12px;color:#65676b;display:flex;gap:4px;align-items:center;margin-top:1px}
.fbtext{padding:2px 14px 10px;font-size:15px;line-height:1.38;color:#050505;white-space:pre-wrap;overflow-wrap:anywhere}
.fbmedia{width:100%;background:#000;display:grid}
.fbmedia img,.fbmedia video{width:100%;max-height:420px;object-fit:cover;display:block}
.fbmedia.grid2{grid-template-columns:1fr 1fr;gap:2px}
.fbmedia.grid2 img,.fbmedia.grid2 video{max-height:260px}
.fbmore{position:relative}
.fbmore .fbmorecount{position:absolute;inset:0;background:rgba(0,0,0,.45);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fbcounts{display:flex;justify-content:space-between;padding:8px 14px 6px;font-size:13px;color:var(--text-2)}
.fbactions{display:flex;border-top:1px solid #e4e6ea;padding:2px 6px}
.fbact{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;font-size:14px;font-weight:600;color:#65676b}
.fbnocap{color:#8a8d91;font-style:italic}
/* hashtag sets */
.hitem{display:flex;gap:10px;align-items:flex-start;background:var(--bg2);border-radius:14px;padding:12px;margin-bottom:8px}
.hitem .hmain{flex:1 1 auto;min-width:0}
.hitem .hname{font-size:15px;font-weight:600;margin:0 0 3px}
.hitem .htags{font-size:14px;color:var(--accent);overflow-wrap:anywhere;margin:0}
.hitem .hact{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.hform{background:var(--bg2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.hrow2{display:flex;flex-wrap:wrap;gap:10px}
.hrow2 input{flex:1 1 180px;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;min-height:40px}
.hmenu{position:absolute;z-index:6;top:100%;left:0;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:none;min-width:220px;max-width:280px;overflow:hidden}
.hmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;font-size:14px;cursor:pointer;min-height:40px}
.hmenu button:hover{background:var(--bg2)}
.hmenu .hmtags{display:block;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwrap{position:relative;display:inline-block}
/* ideas bank */
.iform{background:var(--bg2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.iitem{border-bottom:1px solid var(--line);padding:14px 2px;display:flex;flex-direction:column;gap:8px}
.itext{margin:0;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.imeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.iact{display:flex;flex-wrap:wrap;gap:8px}
/* archive */
.archtoggle{width:100%;text-align:left;background:var(--bg2);border:0;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:600;color:var(--text-2);cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.archtoggle:hover{background:var(--line)}
.archtoggle .achev{transition:transform .15s}
.archtoggle[aria-expanded="true"] .achev{transform:rotate(90deg)}
.evchip{display:flex;align-items:center;gap:5px;width:100%;text-align:left;border:0;border-radius:0;padding:2px 2px;font-size:11px;font-weight:700;line-height:1.25;cursor:pointer;background:transparent!important;box-shadow:none!important;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.evdot{width:7px;height:7px;border-radius:2px;background:var(--orange-500);flex:0 0 auto}
.evcard{display:flex;flex-direction:column;gap:2px;text-align:left;border:0;border-radius:0;padding:4px 2px;cursor:pointer;background:transparent!important;box-shadow:none!important;color:var(--text)}
.evcard .t{font-size:14px;font-weight:700;line-height:1.3}
.evcard .hint{color:var(--text-2)!important}
.evlbl{font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.03em}
.evlist{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px}
.evrow{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;text-align:left;border:0;border-radius:0;padding:6px 2px;cursor:pointer;background:transparent!important;box-shadow:none!important;color:var(--text);font-size:15px}
.evrow .hint{color:var(--text-2)!important}
@media (max-width:640px){.evchip{font-size:9px;padding:2px 4px}.evdot{display:none}}
[hidden]{display:none!important}
.reqrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:8px}
.reqtag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap}
.reqtag.open{color:var(--t-grd-fg);background:var(--t-grd-bg)}
.reqtag.done{color:var(--hr-fg);background:var(--hr-bg)}
.reqmeta{font-size:12px;color:var(--text-2)}
.reqlink{font-size:12px}
.reqchk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-2);margin-top:8px;min-height:32px;cursor:pointer}
.reqchk input{width:18px;height:18px}
.nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--warn);color:var(--on-accent);font-size:12px;font-weight:700}
.nbadge:empty{display:none}
.cbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--warn);color:var(--on-accent);font-size:11px;font-weight:700;margin-right:5px;vertical-align:1px}
.chip .cbadge{margin-right:4px}
.nitem{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--bg2);border:0;border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer;color:var(--text)}
.nitem:hover{background:var(--line)}
.nitem .avatar{width:30px;height:30px}
.nitem .nt{font-size:13px;color:var(--text-2)}
.nitem .nx{font-size:15px;margin-top:3px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--text);color:var(--bg);border-radius:16px;padding:12px 14px;box-shadow:none;display:flex;gap:12px;align-items:center;max-width:min(520px,calc(100% - 32px));font-size:14px}
.toast button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:99px;padding:8px 14px;font-weight:600;cursor:pointer;min-height:36px;white-space:nowrap}
.toast .tx{flex:1 1 auto;min-width:0}
.apbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.apbar .aptext{font-size:15px;color:var(--text-2)}
.apbar.ok{background:var(--hr-bg)}
.apbar.ok .aptext{color:var(--hr-fg);font-weight:600}
.apbar.ok .aptext b{font-weight:700}
footer{padding:48px 0 64px;font-size:12px;color:var(--text-2);text-align:center}
@media (max-width:860px){.week{grid-template-columns:1fr}.wcol{min-height:0}.wcard img{aspect-ratio:16/9}}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.stat{padding:10px 4px}.stat b{font-size:22px}.stat span{font-size:11px}.date{width:72px}
  .cell{min-height:84px;padding:3px;gap:3px}.dow{padding:6px 3px;font-size:11px}
  .hol{font-size:9px;padding:2px 3px;white-space:normal}
  .chip{font-size:10px;padding:3px 4px;-webkit-line-clamp:2;border-radius:5px}.chip .dot{display:none}
  .addday{display:none}.dnum{min-height:20px;font-size:12px}
  dialog{padding:20px}
}
/* ================= Liquid glass theme (iOS 26 style) ================= */
:root{
  }
html{background:var(--surface-2)}
body{background:transparent}
/* a calm pearl-white backdrop (no colored blobs) */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--surface)}


/* ---- the glass material ---- */
.stat,.ready,.cal,.wcol,.guide,.panel,.drivebox,.apbar,.tform,.hform,.iform,.revise,.archtoggle,.notice,
.seg,select.pill,.btn,.ritem,.gcard,.gtips,.gtopics,.hitem,.nitem,.lq,.cbody,.wcard,.ochip,dialog,.menu,.hmenu{
  background:var(--lg-fill)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0!important;
  box-shadow:none!important;
  position:relative;
}
/* specular rim: bright on the top-left, fading, catching light again bottom-right */
.stat::before,.ready::before,.cal::before,.wcol::before,.guide::before,.panel::before,.drivebox::before,.apbar::before,
.tform::before,.hform::before,.iform::before,.revise::before,.archtoggle::before,.notice::before,.seg::before,select.pill::before,
.btn::before,.ritem::before,.gcard::before,.gtips::before,.gtopics::before,.hitem::before,.nitem::before,.cbody::before,.wcard::before,
dialog::before,.menu::before,.hmenu::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
  background:var(--surface);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.cal::before{z-index:2}
/* stronger glass where text sits */
.ritem,.gcard,.gtips,.gtopics,.hitem,.nitem,.cbody,.wcard,.menu,.hmenu{background:var(--lg-fill-strong)!important}
dialog{background:var(--surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
dialog::backdrop{background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- capsule controls ---- */
.btn,.seg,select.pill,.archtoggle{border-radius:999px!important}
.seg{padding:4px}
.seg button{border-radius:999px;position:relative;z-index:1}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:none}
.btn{transition:transform .18s cubic-bezier(.3,1.5,.5,1),background .2s}
.btn:active,.stat:active,.seg button:active{transform:scale(.96)}
.btn>*{position:relative;z-index:1}
/* tinted glass primary buttons */
.btn.primary{background:var(--accent)!important;color:var(--on-accent)!important;
  box-shadow:none!important}
.btn.primary::before{background:var(--surface)}

/* ---- dashboard ---- */
.stat{border-radius:26px}
.stat>*{position:relative;z-index:1}
.stat:hover{background:color-mix(in srgb,var(--surface) 32%,transparent)!important}
.stat[aria-pressed="true"]{background:var(--surface)!important;box-shadow:0 0 0 2px var(--accent)!important}
.stat.sdue-soon{background:var(--surface-2)!important}
.stat.sdue-late{background:color-mix(in srgb,var(--warn) 18%,transparent)!important}
.ready{background:var(--surface-2)!important;border-radius:28px}
.ready>*{position:relative;z-index:1}
.bar{background:color-mix(in srgb,var(--surface) 35%,transparent);box-shadow:none}

/* ---- calendar ---- */
.cal{border-radius:24px;overflow:hidden}
.dow{background:color-mix(in srgb,var(--surface) 18%,transparent)!important;border-color:var(--line)!important}
.cell{border-color:var(--line)!important;background:transparent}
.cell.blank{background:var(--surface-2)!important}
.cell.tap:active,.over{background:var(--surface-2)!important}
.chip{box-shadow:none}
.wcol{border-radius:26px}
.wcol>*,.wcard>*,.ritem>*,.apbar>*,.drivebox>*,.panel>*,.guide>*,.tform>*,.hform>*,.iform>*,.revise>*,.cbody>*,.gcard>*,.gtips>*,.gtopics>*,.hitem>*,.nitem>*,.notice>*{position:relative;z-index:1}
.wcard{border-radius:18px}
.rowhead:hover{background:color-mix(in srgb,var(--surface) 25%,transparent)}
dialog>*{position:relative;z-index:1}
.menu>*,.hmenu>*{position:relative;z-index:1}

/* ---- fields ---- */
label.f select,label.f input,label.f textarea,.f input,.trow1 input,.cnew textarea,.revise input,.hrow2 input,.tl input,.tl select,.drivebox select,.drivebox input,#driveDlg select{
  background:var(--surface)!important;border:1.5px solid var(--line)!important;border-radius:14px!important;
  box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}

.toast{background:color-mix(in srgb,var(--ink) 55%,transparent)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
dialog{position:fixed!important}
.menu,.hmenu{position:absolute!important}
.upl>input{position:absolute!important;inset:0;z-index:2}
.fbcard::before{display:none}
.fbsched{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:18px;margin-bottom:16px;background:var(--surface-2)!important;box-shadow:none}
.fbsched.done{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;color:var(--accent)}
.fbshead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.fbform{display:flex;flex-direction:column;gap:8px}
.fbbadge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap}
.fbbadge.ok{color:var(--ok);background:var(--surface-2)}
.fbbadge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.fbbadge.busy{color:var(--accent);background:var(--surface-2)}
.fbsched.done{flex-direction:column!important;align-items:stretch!important}
.fbpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.fbthumb{position:relative;border-radius:12px;overflow:hidden;background:var(--surface);border:2px solid transparent;opacity:.55}
.fbthumb.on{border-color:var(--accent);opacity:1}
.fbthumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.fbnum{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fbtctl{display:flex;gap:6px;justify-content:center;padding:4px 2px;background:var(--surface)}
.fbtctl .linkbtn{font-size:12px;min-height:28px}
.undolive{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:14px;padding:10px 12px}
.undolive span{flex:1 1 260px}
.tl input,.tl select{flex:none!important;height:auto!important}
.lq{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:12px;padding:8px 12px;margin-bottom:8px;font-size:14px}
.lq .avatar{width:24px;height:24px;vertical-align:middle}
#pubDlg .picker input{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;font-size:15px;min-height:44px}
.lgev{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text)}
.lgev .evdot{display:inline-block!important}
/* holidays styled like events: plain text with a small square, colored text only */
.hol{display:flex!important;align-items:center;gap:5px;background:transparent!important;border-radius:0!important;padding:2px 2px!important;font-size:11px;font-weight:700;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:none!important}
.hol::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;flex:0 0 auto}
.legend .hol,.meta .hol{display:inline-flex!important;font-size:12px}
.hol-r{color:var(--ok)!important}
.hol-s{color:var(--text-2)!important}
@media (max-width:640px){.hol{font-size:9px;white-space:normal}.hol::before{display:none}}
/* prominent comment notifications */
#bellBtn.hot{background:var(--warn)!important;color:var(--on-accent)!important;animation:bellPulse 1.6s ease-in-out infinite}
#bellBtn.hot .nbadge{display:none}
@keyframes bellPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 8px transparent}}
.cbanner{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));width:min(620px,calc(100% - 20px));display:flex;gap:10px;align-items:center;padding:12px 12px 12px 14px;border-radius:20px;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-left:5px solid var(--warn);animation:cbIn .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes cbIn{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.cbanner .avatar{width:36px;height:36px;flex:0 0 auto}
.cbtx{flex:1 1 auto;min-width:0;font-size:14px;color:var(--text)}
.cbsnip{color:var(--text-2);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbmore{color:var(--warn);font-weight:700}
.cbact{display:flex;gap:6px;flex:0 0 auto}
.cbview{border:0;border-radius:99px;background:var(--warn);color:var(--on-accent);font-weight:700;padding:8px 14px;cursor:pointer;min-height:38px}
.cbsec{border:0;border-radius:99px;background:color-mix(in srgb,var(--ink) 30%,transparent);color:var(--text);font-weight:600;padding:8px 12px;cursor:pointer;min-height:38px}
.toast{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto!important;font-size:15px;padding:14px 16px}
.toast .tsnip{display:block;font-size:13px;opacity:.8;margin-top:2px}
.ready.reqs{background:color-mix(in srgb,var(--orange-500) 16%,transparent)!important}
.ready.reqs .rhead h2,.ready.reqs .rhead .hint{color:var(--text)}
.rreq{font-size:14px;color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ctxmenu{position:fixed;z-index:80;min-width:200px;max-width:280px;padding:6px;border-radius:16px;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;display:flex;flex-direction:column}
.ctxmenu .ctxhead{font-size:12px;font-weight:600;color:var(--text-2);padding:6px 10px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxmenu button{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px;font-size:15px;cursor:pointer;color:var(--text);min-height:40px}
.ctxmenu button:hover,.ctxmenu button:focus{background:color-mix(in srgb,var(--ink) 30%,transparent);outline:none}
.ctxmenu button.danger{color:var(--warn);font-weight:600}
[data-ctx]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.actday{font-size:12px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;margin:14px 2px 6px}
.actrow{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;padding:8px 6px;border-radius:12px;font-size:14px;color:var(--text)}
.actrow.tap{cursor:pointer}
.actrow.tap:hover{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.actrow .avatar{width:28px;height:28px;flex:0 0 auto}
.actsys{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 30%,transparent);font-size:12px;font-weight:700;color:var(--text-2)}
.actmain{flex:1 1 auto;min-width:0;line-height:1.4}
.actx{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acttime{flex:0 0 auto;font-size:12px;color:var(--text-2);padding-top:2px}
.btn.postnow{background:color-mix(in srgb,var(--warn) 12%,transparent)!important;color:var(--warn)!important;font-weight:700}
.cthread{margin:-2px 0 6px 40px;display:flex;flex-direction:column;gap:8px}
.cmt.creply .avatar{width:24px;height:24px}
.cmt.creply .cbody{background:color-mix(in srgb,var(--surface) 28%,transparent)!important}
.creplybtn{font-size:13px;margin-top:4px}
/* keep the Facebook mockup solid so it looks real */
.fbcard{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}

@media (prefers-reduced-transparency: reduce){
  .stat,.ready,.cal,.wcol,.guide,.panel,.seg,.btn,.ritem,.wcard,dialog,.menu,.hmenu,.cbody{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--surface)!important}
  .btn.primary{background:var(--accent)!important}
  body::after{display:none}
}

/* ===== 3. Standalone app additions ===== */
html,body{color-scheme:light}
.who .role{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;background:var(--surface-2);color:var(--accent);text-transform:capitalize}
.offline{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;font-size:13px;font-weight:600;border-radius:99px;padding:8px 14px;background:var(--ink);color:var(--on-accent);-webkit-backdrop-filter:none;backdrop-filter:none}
.tzline{font-size:12px;color:var(--text-2);margin-top:6px}
.avatar.ini{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--accent);font-size:11px;font-weight:700}
.cmt .avatar.ini{font-size:12px}
.medianote{background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--text-2)}
.btn.danger{color:var(--warn)!important}
.pill-sm{font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;background:color-mix(in srgb,var(--ink) 30%,transparent);color:var(--text-2)}
.mrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--lg-fill-strong);border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:none}
.mrow .mmain{flex:1 1 200px;min-width:0}
.mrow .mmain b{display:block;overflow:hidden;text-overflow:ellipsis}
.mrow .mmain small{color:var(--text-2);overflow-wrap:anywhere}
.mrow select{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;min-height:40px;font-size:14px}
.formrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.formrow>label{flex:1 1 180px}
.subhead{margin:18px 0 6px;font-size:17px}
.holrow{display:flex;gap:10px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--line);font-size:14px}
.holrow .hd{width:110px;flex:0 0 auto;color:var(--text-2);font-weight:600}
.holrow .hn{flex:1 1 auto;min-width:0}
.switch{display:flex;gap:10px;align-items:center;font-size:15px;min-height:40px;cursor:pointer}
.switch input{width:22px;height:22px}

/* sign-in gate */
#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:auto}
#gate[hidden]{display:none}
#gate .gbox{width:min(420px,100%);border-radius:28px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;background:color-mix(in srgb,var(--surface) 42%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;position:relative}
#gate .glogo{display:flex;align-items:center;gap:14px}
#gate .glogo img{width:56px;height:56px;border-radius:14px;background:var(--surface);box-shadow:none}
#gate .glogo b{display:block;font-size:22px;letter-spacing:-.01em}
#gate .glogo small{color:var(--text-2);font-size:14px}
#gate .gbtn{min-height:50px;border-radius:999px;border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);box-shadow:none;color:var(--text)}
#gate .gbtn.primary{background:var(--accent);color:var(--on-accent)}
#gate .gbtn:disabled{opacity:.55}
#gate input{min-height:48px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);padding:0 14px;font:inherit;font-size:16px;width:100%}
#gate .gor{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
#gate .gor:before,#gate .gor:after{content:"";flex:1;height:1px;background:var(--line)}
#gate .gmsg{margin:0;font-size:15px;line-height:1.45;color:var(--text-2)}
#gate .gmsg.err{color:var(--warn);font-weight:600}
#gate .glink{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:6px 0;align-self:center}
#gate .gfine{font-size:12px;color:var(--text-2);text-align:center;margin:0}
#app[hidden]{display:none}
@media (prefers-reduced-transparency: reduce){#gate .gbox,.mrow{background:var(--surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
#gBody{display:flex;flex-direction:column;gap:12px}
#gBody .gbtn{width:100%}
#gate .gbrand{width:min(300px,80%);height:auto;align-self:center;margin:4px 0 6px}

/* Phase 2: uploads */
.uplist{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.uprow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;background:var(--lg-fill-strong);border-radius:12px;padding:8px 12px;font-size:13px}
.uprow .upname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .uptext{color:var(--text-2);text-align:right}
.uprow progress{grid-column:1/-1;width:100%;height:8px;accent-color:var(--accent)}
.uprow.err .uptext{color:var(--warn);text-align:left;grid-column:1/-1}
.gallery figure a{display:block}
.gdthumb{width:100%;aspect-ratio:1/1;border-radius:12px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;background:var(--ink);color:var(--on-accent);font-size:12px;text-align:center;padding:8px}
.gdthumb b{font-size:26px}
.pushbox{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.meter{height:10px;border-radius:99px;background:color-mix(in srgb,var(--ink) 30%,transparent);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok)}
.meter.warn i{background:var(--warn)}

/* swipe down to refresh */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 4px);transform:translate(-50%,-60px);opacity:0;z-index:70;display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-2);background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;pointer-events:none;transition:opacity .15s}
.ptr .ptr-arrow{display:inline-block;transition:transform .2s;font-size:15px}
.ptr.ready .ptr-arrow{transform:rotate(180deg)}
.ptr.ready{color:var(--accent)}
.ptr.busy .ptr-arrow{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ptr.busy .ptr-arrow{animation:none}}
.kinds{display:flex;flex-direction:column;gap:0}
.kinds .reqchk{margin-top:2px}

/* ===== 4. Navigation: sidebar (≥768 px), drawer + top/bottom bars (phones) — Nov 2026 ===== */
:root{--nav-w:248px;--nav-wc:76px;--nav-cur:var(--nav-w);--mtop-h:52px;--mbar-h:60px;--nav-ease:cubic-bezier(.32,.72,0,1)}
:root.nav-collapsed{--nav-cur:var(--nav-wc)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--accent);padding:10px 14px;border-radius:12px;font-weight:600;box-shadow:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
#board:focus{outline:none}
.sidenav{position:fixed;z-index:50;top:0;bottom:0;left:0;width:var(--nav-cur);display:flex;flex-direction:column;gap:6px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--surface) 40%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset -1px 0 0 var(--line);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  transition:width .28s var(--nav-ease),transform .3s var(--nav-ease),visibility 0s linear 0s}
.snhead{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 0 6px 8px}
.snhead img{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
.sntitle{font-size:16px;font-weight:700;letter-spacing:-.01em;flex:1}
.snicon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--text-2);cursor:pointer}
.snicon:hover{background:var(--surface);color:var(--text)}
#navClose{display:none}
.snlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1}
.snitem{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:14px;background:transparent;
  color:var(--text);font:inherit;font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s}
.snitem[hidden]{display:none}
.snitem svg{order:-1;flex:0 0 auto;color:var(--text-2)}
.snitem:hover{background:var(--surface)}
.snitem[aria-current="page"]{background:var(--surface);color:var(--accent);font-weight:650;box-shadow:none}
.snitem[aria-current="page"] svg{color:var(--accent)}
.snitem .nbadge{margin-left:auto}
#bellBtn.hot{background:color-mix(in srgb,var(--warn) 10%,transparent)!important;color:var(--warn)!important;animation:none}
#bellBtn.hot svg{color:var(--warn)}
#bellBtn.hot .nbadge{display:inline-flex}
.sngroup{margin:10px 0 2px;padding:0 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);min-height:16px}
.sngroup[hidden]{display:none}
.snfoot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.snme{display:flex;align-items:center;gap:10px;padding:6px 8px;min-height:44px}
.snme .avatar{width:32px;height:32px;flex:0 0 auto;font-size:11px}
.snme .who{margin:0;min-height:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;min-width:0;font-size:13px;line-height:1.3}
.snme .who b{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.snme .who .role{margin-left:4px;font-size:10.5px;padding:1px 7px}
.snme .who small{flex-basis:100%;font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snout{color:var(--warn)}.snout svg{color:var(--warn)}
.snitem:focus-visible,.snicon:focus-visible,.mbitem:focus-visible,.mavatar:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* labels fade rather than jump when collapsing */
.snlbl{transition:opacity .18s ease}
/* the page moves with the sidebar */
.wrap{transition:margin-left .28s var(--nav-ease)}
.mtop,.mbar{display:none}
.navscrim{position:fixed;inset:0;z-index:49;background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.navscrim[hidden]{display:none}

@media (min-width:768px){
  /* content keeps a comfortable width and stays centered in the space next to the sidebar */
  .wrap{margin-left:var(--nav-cur);max-width:none;padding:18px max(clamp(16px,3vw,40px),calc((100vw - var(--nav-cur) - 1180px) / 2)) 0;
    transition:margin-left .28s var(--nav-ease),padding .28s var(--nav-ease)}
  .navscrim{display:none!important}
  /* icon-only */
  .nav-collapsed .sidenav{padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:12px}
  .nav-collapsed .snlbl{opacity:0;pointer-events:none;width:0;overflow:hidden}
  .nav-collapsed .snhead{flex-direction:column;padding:0 0 6px;gap:8px}
  .nav-collapsed .snitem{justify-content:center;padding:0;gap:0}
  .nav-collapsed .snitem .nbadge{position:absolute;top:4px;right:6px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}
  .nav-collapsed .sngroup{height:1px;min-height:0;padding:0;margin:8px 10px;background:var(--line)}
  .nav-collapsed .snme{justify-content:center;padding:6px 0}
  .nav-collapsed .snme .who{display:none}
}
/* phones: drawer + bars */
@media (max-width:767px){
  .sidenav{width:min(300px,86vw);transform:translateX(-105%);visibility:hidden;border-radius:0 26px 26px 0;background:var(--surface);
    transition:transform .3s var(--nav-ease),visibility 0s linear .3s;box-shadow:none}
  .nav-open .sidenav{transform:none;visibility:visible;transition:transform .3s var(--nav-ease),visibility 0s}
  #navToggle{display:none}
  #navClose{display:inline-flex}
  .mtop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:calc(var(--mtop-h) + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) 10px 0 14px;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;transition:transform .25s var(--nav-ease);will-change:transform}
  .mtop img{width:26px;height:26px;border-radius:7px}
  .mtitle{flex:1;font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mavatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0}
  .mavatar .avatar{width:32px;height:32px;font-size:11px}
  .mbar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
    height:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px));padding:0 max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;transition:transform .25s var(--nav-ease);will-change:transform}
  .mbitem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--text-2);
    font:inherit;font-size:11px;font-weight:600;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
  .mbitem[aria-current="page"]{color:var(--accent)}
  .mbitem .nbadge{position:absolute;top:6px;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px}
  .bars-hidden .mtop{transform:translateY(-100%)}
  .bars-hidden .mbar{transform:translateY(100%)}
  /* page content never sits under the bottom bar */
  #app{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px))}
  .wrap{padding-top:12px}
  .offline{bottom:calc(var(--mbar-h) + 12px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion: reduce){
  .sidenav,.wrap,.mtop,.mbar,.snlbl,.snitem{transition:none!important}
}
/* dashboard: one slim row */
.stats{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:8px!important;margin:0 0 10px!important}
.stat{padding:7px 4px!important;border-radius:18px!important;min-height:0}
.stat b{font-size:19px!important;line-height:1.15}
.stat span{font-size:11px!important;line-height:1.2;display:block}
.bar{margin:0 0 14px!important;height:4px}
@media (max-width:640px){
  .stats{gap:5px!important}
  .stat{padding:6px 2px!important;border-radius:14px!important}
  .stat b{font-size:16px!important}
  .stat span{font-size:9.5px!important}
}
/* legend: small, under the calendar */
.legend{display:block;margin:10px 2px 0;font-size:11px}
.legend .lgrow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.legend .tag{font-size:10.5px;padding:1px 7px}
.legend .status{font-size:11px;gap:4px}
.legend .status::before{width:6px;height:6px}
.legend .lgev,.legend .lgposted,.legend .hol{font-size:10.5px!important}
.legend .linkbtn{font-size:11px}
.legend .calhint{font-size:11px;margin:6px 0 0}
/* one "+ Add" button (post or event); on phones it shares the row with the month picker */
.addbtn{gap:6px}
.addplus{font-size:20px;line-height:1;font-weight:500}
@media (max-width:640px){
  #filters{flex-wrap:nowrap;gap:6px}
  #filters .tbspacer{display:none}
  #monthSeg{flex:1 1 auto;min-width:0;gap:4px;flex-wrap:nowrap}
  #monthSeg select.pill{min-width:0;padding:8px 10px;font-size:15px}
  #monthSeg #fMonth{flex:1 1 auto}
  #monthSeg .navbtn{padding:0;width:38px;min-width:38px;justify-content:center}
  #monthSeg #fYear{flex:0 0 auto;padding-right:6px}
  .addbtn{flex:0 0 auto;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%!important}
  .addlbl{display:none}
  .addplus{font-size:26px}
}
/* dashboard boxes: count in the top-right corner, labels left-aligned on one line-up */
.stat{display:flex!important;flex-direction:column;align-items:stretch;text-align:left!important;gap:2px;padding:7px 10px 8px!important}
.stat b{align-self:flex-end;font-size:16px!important;line-height:1.1}
.stat span{align-self:flex-start;text-align:left;line-height:1.2;white-space:nowrap}
@media (max-width:640px){
  .stat{padding:5px 5px 6px 6px!important;gap:1px}
  .stat b{font-size:14px!important}
  .stat span{font-size:9.5px!important;white-space:normal;min-height:2.4em}
}


/* ===== 5. Liquid Glass redesign (Nov 2026): screens, cards, floating tab bar, + button ===== */
:root{
  --r-card:22px; --ease:cubic-bezier(.32,.72,0,1);
  }
body{font-family:"Barlow",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);letter-spacing:-.005em}
.btn.primary{background:var(--blue)!important}
/* glass for floating controls only */
.gicon,.monthpill,.seg,.chip2,.searchrow input,.mbar,.fab{-webkit-backdrop-filter:none;backdrop-filter:none}

/* screens */
.screen{display:none}
.screen.on{display:block}
.screen.enter{animation:scrIn .24s var(--ease)}
@keyframes scrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:center;gap:10px;margin:6px 0 16px;min-height:48px}
.phead h1{flex:1;margin:0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.phead h1:focus{outline:none}
.gicon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--glass-b);background:var(--glass);color:var(--text);cursor:pointer;box-shadow:none;transition:transform .18s var(--ease),background .2s}
.gicon:hover{background:var(--surface)}
.gicon:active,.chip2:active,.ccard .copen:active,.stat:active,.mbitem:active{transform:scale(.96)}
.gicon[aria-expanded="true"]{color:var(--blue);background:var(--surface-2)}
.rdot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--line)}
.rdot[hidden]{display:none}
.brand{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:42px;height:42px;border-radius:12px;background:var(--surface);box-shadow:none;object-fit:contain;padding:4px}
.brand b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.brand small{display:block;font-size:14px;color:var(--text-2)}
.avbtn{width:46px;height:46px;border-radius:50%;border:2px solid var(--glass-b);padding:0;background:var(--surface);cursor:pointer;box-shadow:none;overflow:hidden;flex:0 0 auto}
.avbtn .avatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px}
.greet{margin:6px 0 18px}
.greet h1{margin:0;font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.025em}
.greet p{margin:6px 0 0;font-size:16px;color:var(--text-2)}
.block{margin:22px 0 8px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.sechead h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em}
.viewall{font-size:15px;font-weight:600;color:var(--blue);background:none;border:0;cursor:pointer;min-height:44px}
.hint{color:var(--text-2)}

/* status cards (two columns on phones) */
.stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0 0 6px!important}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.stats .stat{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:16px 16px!important;min-height:84px;
  border-radius:var(--r-card)!important;text-align:left!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;transition:transform .18s var(--ease)}
.stats .stat::before{display:none}
.stats .stat .sico{flex:0 0 auto}
.stats .stat .snum{display:flex!important;flex-direction:column;min-height:0!important;font-size:inherit!important;white-space:normal!important;align-self:center!important}
.stats .stat .snum b{font-size:28px!important;line-height:1.05!important;font-weight:700;align-self:flex-start!important;color:var(--text)}
.stats .stat .snum span{font-size:15px!important;line-height:1.25;color:var(--text-2);min-height:0!important;white-space:nowrap!important;display:block}
.stat.t-blue{background:var(--surface-2)!important}.t-blue .sico{color:var(--accent)}
.stat.t-lav{background:var(--surface-2)!important}.t-lav .sico{color:var(--accent)}
.stat.t-mint{background:var(--surface-2)!important}.t-mint .sico{color:var(--ok)}
.stat.t-green{background:var(--surface-2)!important}.t-green .sico{color:var(--ok)}
.stat.t-sky{background:var(--surface-2)!important}.t-sky .sico{color:var(--accent)}
.stat.t-amber{background:color-mix(in srgb,var(--orange-500) 15%,transparent)!important}.t-amber .sico{color:var(--text)}
.stat.t-coral{background:color-mix(in srgb,var(--warn) 10%,transparent)!important}.t-coral .sico{color:var(--warn)}
.stats .stat.t-coral .snum span{color:var(--warn)}

/* content cards */
.cards{display:flex;flex-direction:column;gap:10px}
@media (min-width:1100px){#cList,#upList,#revList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#cList .archtoggle{grid-column:1/-1}}
.ccard{position:relative;display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--glass-b);border-radius:var(--r-card);
  box-shadow:none;padding:10px 6px 10px 10px;min-width:0;transition:transform .18s var(--ease),box-shadow .2s}
.ccard:hover{box-shadow:none}
.ccard.posted .ctitle{color:var(--text-2)}
.ccard[class*="bar-"]{padding-left:16px}
.ccard[class*="bar-"]::after{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--k-draft)}
.ccard.bar-sched::after{background:var(--k-sched)}.ccard.bar-event::after{background:var(--k-event)}.ccard.bar-posted::after{background:var(--k-posted)}
.copen{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;min-height:44px;transition:transform .18s var(--ease)}
.cthumb{flex:0 0 auto;width:68px;height:68px;border-radius:14px;object-fit:cover;background:var(--surface-2)}
.cthumb.ph{display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--surface-2)}
.cthumb.ph.ground{color:var(--text);background:var(--surface-2)}
.cthumb.ph.Explained{color:var(--accent);background:var(--surface-2)}
.cthumb.ph.home{color:var(--accent);background:var(--surface-2)}
.cthumb.ph.evph{color:var(--text);background:var(--surface-2)}
.cbody2{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ctitle{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmeta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);min-width:0}
.cmeta svg{color:var(--text-2);flex:0 0 auto}
.cdate,.cfmt{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbmark{flex:0 0 auto}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crow .tag{font-size:11.5px;padding:2px 8px}
.badge{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;line-height:1;border-radius:9px;padding:5px 10px}
.b-idea{color:var(--ok);background:var(--surface-2)}
.b-draft{color:var(--accent);background:var(--surface-2)}
.b-review{color:var(--text);background:color-mix(in srgb,var(--orange-500) 16%,transparent)}
.b-ok{color:var(--accent);background:var(--surface-2)}
.b-sched{color:var(--accent);background:var(--surface-2)}
.b-posted{color:var(--text);background:color-mix(in srgb,var(--ink) 30%,transparent)}
.b-event{color:var(--text);background:color-mix(in srgb,var(--orange-500) 18%,transparent)}
.morebtn{flex:0 0 auto;width:40px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.morebtn:hover{background:color-mix(in srgb,var(--ink) 30%,transparent);color:var(--text)}
.approvebtn{flex:0 0 auto;margin-left:4px}
.datebox{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:56px;border-radius:12px;background:var(--surface-2);border:1px solid var(--sep)}
.datebox small{font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.04em}
.datebox b{font-size:22px;line-height:1.05}
.emptycard{margin:0;padding:22px 16px;text-align:center;color:var(--text-2);font-size:15px;background:var(--surface);border-radius:var(--r-card);border:1px dashed var(--line)}
.archtoggle{margin:6px 0}

/* chips, tabs, search */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chips.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:2px 16px 6px;scroll-padding:16px}
.chips.scrollx::-webkit-scrollbar{display:none}
.chips[hidden]{display:none}
.chip2{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-b);background:var(--glass);box-shadow:none;
  font-size:15px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .18s var(--ease)}
.chip2[aria-selected="true"],.chip2[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-accent);box-shadow:inset 0 1px 0 var(--line)}
.chip2.due[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:none}
.searchrow{margin:0 0 12px}
.searchrow[hidden]{display:none}
.searchrow input{width:100%;min-height:46px;border-radius:999px;border:1.5px solid var(--line);background:var(--glass);box-shadow:none;padding:0 18px;font-size:16px;outline:none}
.searchrow input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent)}

/* calendar header: ‹ November 2026 › */
#filters{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:10px!important;margin:0 0 14px}
.monthpill{flex:0 1 300px;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;height:48px;padding:0 10px;border-radius:999px;
  border:1px solid var(--glass-b);background:var(--glass);box-shadow:none}
.monthpill select{-webkit-appearance:none;appearance:none;border:0;background:transparent;font-size:17px;font-weight:650;color:var(--text);text-align:center;text-align-last:center;
  padding:8px 4px;min-height:44px;cursor:pointer;min-width:0}
.monthpill select:focus-visible{outline:2px solid var(--accent);border-radius:10px}
#fMonth{flex:1 1 auto;max-width:150px}
#fYear{flex:0 0 auto;width:64px}
.navbtn{width:46px;height:46px}
/* Month / Week / List */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.hrow h2.month.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg{display:flex!important;padding:4px!important;border-radius:999px!important;background:var(--surface-2)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important}
.seg button{flex:1;min-height:40px;padding:0 18px;font-size:15px;font-weight:500;color:var(--text-2);border-radius:999px;transition:background .25s var(--ease),color .2s,box-shadow .25s}
.seg button[aria-pressed="true"]{background:var(--surface)!important;color:var(--text);font-weight:600;box-shadow:none!important}
@media (max-width:767px){.hrow{justify-content:center}.hrow .seg{width:100%}}

/* month grid */
.cal{background:var(--surface)!important;border-radius:24px!important;box-shadow:none!important;border:1px solid var(--glass-b)!important}
.cal::before{display:none}
.dow{background:transparent!important;border:0!important;font-size:12.5px!important;font-weight:600;color:var(--text-2)!important;text-align:center}
.cell{border-color:var(--line)!important}
.dbtn{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;min-width:26px;height:26px;border-radius:13px;padding:0 6px;transition:background .2s,color .2s,transform .2s var(--ease)}
.cell.today .dbtn{color:var(--blue);font-weight:700}
.cell.hol-r .dbtn{color:var(--ok)}
.cell.sel .dbtn{background:var(--blue);color:var(--on-accent);box-shadow:none}
.cell.sel{background:var(--surface-2)!important}
.cdots{display:none;gap:3px;justify-content:center;margin-top:2px}
.cdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--k-draft)}
.cdot.k-sched{background:var(--k-sched)}.cdot.k-event{background:var(--k-event)}.cdot.k-posted{background:var(--k-posted)}
.lgdots{display:none;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;color:var(--text-2);padding:12px 4px 2px}
.lgdots span{display:inline-flex;align-items:center;gap:6px}
.lgdots .cdot{width:8px;height:8px}
.holline{margin:-4px 2px 10px;font-size:13px;font-weight:600}
@media (max-width:767px){
  .cal{padding:6px 4px 8px}
  .cal .cell{border:0!important;min-height:52px!important;padding:3px 0!important;display:flex;flex-direction:column;align-items:center;background:transparent!important}
  .cal .cell.blank{visibility:hidden}
  .cal .cell .chip,.cal .cell .evchip,.cal .cell .hol,.cal .cell .addday,.cal .cell .cbadge{display:none!important}
  .cal .cell .dnum{justify-content:center!important;width:100%;margin:0!important}
  .cal .dbtn{width:38px;height:38px;border-radius:50%;font-size:17px;font-weight:500;padding:0}
  .cal .cell.sel .dbtn{font-weight:600;animation:selPop .28s var(--ease)}
  .cal .cdots{display:flex}
  .legend .lgdots{display:flex}
  .legend .lgrow{display:none}
  .legend .lgrow:has(.linkbtn){display:flex}
  .legend .lgrow:has(.linkbtn)>*:not(.linkbtn){display:none}
}
@keyframes selPop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* floating tab bar (phones) and + button */
.fab{position:fixed;z-index:45;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:50%;
  border:0;color:var(--on-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--accent);
  box-shadow:none;
  transition:transform .2s var(--ease),box-shadow .2s}
.fab[hidden]{display:none}
.fab:hover{transform:translateY(-1px)}
.fab:active{transform:scale(.92)}
.fab svg{stroke-width:2.4}
.fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:767px){
  :root{--mbar-h:66px}
  .mbar{left:12px!important;right:12px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;height:var(--mbar-h)!important;padding:5px!important;
    grid-template-columns:repeat(5,1fr)!important;border-radius:33px;background:var(--surface)!important;border:1px solid var(--glass-b);
    box-shadow:none!important}
  .mbitem{border-radius:26px;gap:3px!important;font-size:10.5px!important;font-weight:500!important;color:var(--text-2)!important;transition:background .25s var(--ease),color .2s}
  .mbitem[aria-current="page"]{color:var(--blue)!important;background:var(--surface-2);font-weight:600!important}
  .mbitem .nbadge{left:calc(50% + 4px)!important;top:3px!important}
  .bars-hidden .mbar{transform:translateY(calc(100% + 20px))!important}
  .fab{bottom:calc(var(--mbar-h) + 22px + env(safe-area-inset-bottom,0px));right:18px}
  .bars-hidden .fab{transform:translateY(calc(var(--mbar-h) + 8px))}
  #app{padding-bottom:calc(var(--mbar-h) + 110px + env(safe-area-inset-bottom,0px))!important}
  .wrap{padding-top:calc(6px + env(safe-area-inset-top,0px))!important}
  .phead h1{font-size:26px}
  .greet h1{font-size:30px}
}
@media (min-width:768px){
  .wrap{padding-top:22px!important}
  .fab{right:32px;bottom:32px}
  .phead .avbtn{display:none}
}
/* sidebar: same calm glass, blue for the current screen */
.sidenav{background:var(--surface)!important;border-right:1px solid var(--glass-b)}
.snitem[aria-current="page"]{background:var(--surface-2)!important;color:var(--blue)!important;box-shadow:none!important}
.sngroup{margin-top:14px!important}
/* windows stay solid enough to read */
dialog{background:var(--surface)!important}
.ready{background:var(--surface)!important;border-radius:var(--r-card)!important;box-shadow:none!important;border:1px solid var(--glass-b)!important;margin:22px 0 8px!important}
.ready.reqs{background:var(--surface)!important}
.ready::before{display:none}
footer{padding:28px 0 20px!important}
@media (prefers-reduced-motion: reduce){
  .screen.enter,.cal .cell.sel .dbtn{animation:none!important}
  .ccard,.copen,.chip2,.gicon,.fab,.mbar,.mbitem,.seg button,.stats .stat{transition:none!important}
}
/* "November 2026" reads as one label */
#fMonth{text-align:right;text-align-last:right;padding-right:3px!important}
#fYear{text-align:left;text-align-last:left;padding-left:3px!important}
@media (max-width:767px){.legend .calhint{display:none}}
.ready .rhead h2{color:var(--text)!important;font-size:21px!important;letter-spacing:-.015em}
.ready .rhead .hint{color:var(--text-2)!important}

/* ===== 6. Post window (New Post / Edit Post) — Liquid Glass sheet ===== */
#postDlg.sheet{padding:0!important;border-radius:28px!important;max-width:760px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;
  background:var(--surface-2)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none!important}
#postDlg.sheet::before{display:none}
#postDlg[open]{animation:sheetIn .32s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.phdr{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;padding:14px 16px 12px;
  background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.phtitle{flex:1;min-width:0}
.phtitle h3{margin:0!important;font-size:26px!important;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.phtitle small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:13px;color:var(--text-2);font-weight:500}
.phtitle small .badge{font-size:11.5px;padding:3px 8px}
.glassbtn{background:var(--surface)!important;color:var(--blue)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;font-weight:600}
.savebtn{min-height:44px;padding:0 18px;font-size:16px}
.savebtn[hidden]{display:none}
.pmenuwrap{position:relative}
.pmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:8;min-width:210px;padding:6px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.pmenu[hidden]{display:none}
.pmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:12px;font-size:15px;color:var(--text);cursor:pointer;min-height:44px}
.pmenu button:hover,.pmenu button:focus-visible{background:var(--surface-2);outline:none}
.pmenu button.danger{color:var(--warn)}
#pdBody{padding:2px 16px 0}
.pform{display:flex;flex-direction:column;gap:12px;margin:0!important}
.ptab{display:flex;flex-direction:column;gap:12px}
.ptab[hidden]{display:none}
.pcard{background:var(--surface);border:1px solid var(--glass-b);border-radius:24px;padding:14px 16px;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin:0!important}
.pcard h4{margin:0 0 10px;font-size:15px;font-weight:600}
.plabel{display:block;font-size:15px;font-weight:600;margin:0 0 8px;color:var(--text)}
.plabelrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.plabelrow .plabel{margin:0}
.pform input[type=text],.pform input[type=date],.pform select,.pform textarea,.rqbox textarea{
  width:100%;min-height:48px;border-radius:16px!important;border:1px solid var(--glass-b)!important;background:var(--surface)!important;
  box-shadow:none!important;padding:0 16px;font-size:17px;color:var(--text);outline:none;-webkit-appearance:none;appearance:none;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important;padding-right:38px}
.pform textarea,.rqbox textarea{padding:14px 16px;line-height:1.45;resize:vertical}
.pform textarea.caption{min-height:132px}
.pform input:focus,.pform select:focus,.pform textarea:focus,.rqbox textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent)!important}
.pform input:disabled,.pform select:disabled,.pform textarea:disabled{opacity:.75}
.prow2{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.captools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.tbtn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-b);background:var(--surface);
  box-shadow:none;font-size:15px;font-weight:500;color:var(--text);cursor:pointer;transition:transform .18s var(--ease),background .2s}
.tbtn:active{transform:scale(.96)}
.tbtn.ai{color:var(--blue);background:var(--surface-2);font-weight:600}
.tbtn.ai[aria-expanded="true"]{background:var(--blue);color:var(--on-accent)}
.hwrap{position:relative}
.aipanel{margin-top:10px;padding:12px;border-radius:18px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border:1px solid var(--glass-b)}
.aipanel[hidden]{display:none}
.aipanel .revise{background:transparent!important;box-shadow:none!important;padding:0!important}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 12px;border:1.5px dashed var(--line);border-radius:18px;
  color:var(--text-2);background:color-mix(in srgb,var(--surface) 35%,transparent);cursor:pointer;text-align:center;transition:background .2s,border-color .2s}
.dropzone:hover{background:var(--surface);border-color:var(--accent)}
.dropzone:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--accent)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dropzone .dzt{font-size:17px;font-weight:600;color:var(--text)}
.dropzone .dzs{font-size:13px}
.dropzone.small{flex-direction:row;gap:10px;padding:12px;margin-top:10px}
.dropzone.small svg{width:24px;height:24px}
.dropzone.small .dzt{font-size:15px}
.infotip{position:relative}
.infotip summary{list-style:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--text-2);color:var(--text-2);font-size:13px;font-weight:700;font-style:italic;font-family:Georgia,serif;display:flex;align-items:center;justify-content:center;cursor:pointer}
.infotip summary::-webkit-details-marker{display:none}
.infotip[open] summary{border-color:var(--blue);color:var(--blue)}
.infotip p{position:absolute;right:0;top:30px;z-index:5;width:min(300px,75vw);margin:0;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:none;font-size:13px;color:var(--text-2);line-height:1.45}
.pmedia .gallery{margin:0 0 4px}
.arow{display:flex!important;align-items:center;gap:12px;min-height:60px;padding:8px 16px!important;cursor:text}
.arow svg{color:var(--text-2);flex:0 0 auto}
.alabel{font-size:16px;font-weight:600;white-space:nowrap}
.arow input{flex:1;min-width:0;text-align:right;border:0!important;background:transparent!important;box-shadow:none!important;padding:0 4px!important;color:var(--text-2)!important;font-size:16px!important}
.arow input:focus{box-shadow:none!important;color:var(--text)!important}
.pmore summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--text-2);list-style:none;min-height:24px}
.pmore summary::-webkit-details-marker{display:none}
.pmore summary::after{content:" ›";color:var(--text-2)}
.pmore[open] summary{margin-bottom:10px}
.fbcardwrap .fbsched{margin:0!important}
.ptabs{display:flex;width:100%}
.ptabs button{flex:1;border:0;background:transparent;min-height:40px;border-radius:999px;font-size:15px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background .25s var(--ease),color .2s}
.ptabs button[aria-selected="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:none}
/* the sticky bottom: next step + progress */
.pactions{position:sticky;bottom:0;z-index:5;margin:4px -16px 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.pabtns{display:flex;align-items:center;gap:10px}
.btn.big{flex:1;justify-content:center;min-height:56px;border-radius:999px!important;font-size:18px!important;font-weight:600;gap:10px;
  background:var(--accent)!important;box-shadow:none!important}
.pabtns .glassbtn{min-height:56px;padding:0 20px;border-radius:999px!important;font-size:16px}
.pawait{flex:1;margin:0;text-align:center;font-size:14px;color:var(--text-2);line-height:1.4}
.pawait.ok{color:var(--ok);font-weight:600;font-size:16px}
.rqbox{display:flex;flex-direction:column;gap:10px}
.stepper{list-style:none;margin:14px 0 0;padding:0;display:flex;justify-content:space-between;position:relative}
.stepper li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--text-2);position:relative}
.stepper li::before{content:"";position:absolute;top:9px;right:50%;width:100%;height:2px;background:color-mix(in srgb,var(--ink) 30%,transparent);z-index:0}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.now::before{background:var(--blue)}
.stepper i{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.stepper li.done i{background:var(--blue);border-color:var(--blue)}
.stepper li.now i{background:var(--blue);border-color:var(--glass-b);box-shadow:0 0 0 2px var(--blue)}
.stepper li.now span{color:var(--text);font-weight:600}
.pstat{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.badge.big{font-size:14px;padding:7px 12px;border-radius:10px}
.b-changes{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.pwho{list-style:none;margin:0 0 10px;padding:0;font-size:14px;color:var(--text-2);display:flex;flex-direction:column;gap:3px}
.phist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}
.phist li{display:flex;flex-wrap:wrap;gap:4px 6px}
.phist time{margin-left:auto;font-size:12.5px;color:var(--text-2)}
.ptab .sec{margin:0;border:0;padding:0}
.ptab > .sec:not(.pcard){background:var(--surface);border:1px solid var(--glass-b);border-radius:24px;padding:14px 16px}
@media (max-width:767px){
  #postDlg.sheet{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0!important;inset:0}
  #postDlg[open]{animation:sheetUp .34s var(--ease)}
  .phdr{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .phtitle h3{font-size:24px!important}
  .savebtn{padding:0 14px;font-size:15px}
  .prow2{gap:10px}
  .pcard{padding:12px 14px}
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){#postDlg[open]{animation:none}}
/* menus that open inside a card sit above the cards below it */
.pform .pcard{position:relative}
.pform .pcard:has(.hmenu),.pform .pcard:has(.infotip[open]){z-index:7}
.pform .hmenu{z-index:9}
.ptab .sec.pcard{padding:14px 16px}
.pform .arow input[type=text]{border:0!important;background:transparent!important;box-shadow:none!important;min-height:44px;padding:0 4px!important;text-align:right}
.pform .arow input[type=text]:focus{box-shadow:none!important}
/* photos: tidy square tiles with small controls */
.pmedia .gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:0 0 4px}
.pmedia .gallery figure{margin:0;display:flex;flex-direction:column;gap:6px}
.pmedia .gallery figure img,.pmedia .gallery figure video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;background:var(--white)}
.pmedia .gallery figure a{display:block;border-radius:14px;overflow:hidden}
.pmedia .ga{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.pmedia .ga .btn.small{min-height:30px;padding:0 9px;font-size:12px}
.uplist{margin:6px 0}
/* tabs: one line */
.ptabs button{white-space:nowrap;font-size:14.5px;padding:0 8px}
.tabn{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--surface-2);color:var(--blue);font-size:11px;font-weight:700}
@media (max-width:767px){
  .captools{gap:6px}
  .tbtn{padding:0 11px;font-size:14px;gap:5px;min-height:40px}
  .tbtn svg{width:16px;height:16px}
}
@media (max-width:480px){
  .captools{flex-wrap:nowrap}
  .captools .tbtn.ai{flex:1;justify-content:center}
  .captools .tbtn:not(.ai){width:44px;height:44px;padding:0;justify-content:center}
  .captools .tbtn:not(.ai) .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* long labels ("Changes Requested") wrap inside the card instead of running out of it */
.stats .stat .snum{min-width:0!important;flex:1 1 auto}
.stats .stat .snum span{white-space:normal!important;overflow-wrap:anywhere;line-height:1.2!important}
@media (max-width:400px){.stats .stat{gap:10px!important;padding:14px 12px!important}.stats .stat .sico{width:26px;height:26px}}
/* hide the floating tab bar completely: it sits above the iPhone home-indicator area, so slide that far too */
@media (max-width:767px){
  .bars-hidden .mbar{transform:translateY(calc(100% + 16px + env(safe-area-inset-bottom,0px)))!important}
}
/* swipe left to delete (cards) */
.swipe{position:relative;border-radius:var(--r-card);isolation:isolate}
.swipe .ccard{touch-action:pan-y;transition:transform .28s var(--ease);will-change:transform}
.swdel{position:absolute;inset:2px 2px 2px auto;width:calc(100% - 4px);z-index:-1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;
  padding:0 22px;border:0;border-radius:var(--r-card);background:var(--warn);color:var(--on-accent);font-size:13px;font-weight:600;cursor:pointer;opacity:0}
.swdel span,.swdel svg{width:48px;text-align:center}
.swipe.far .swdel{background:var(--warn)}
@media (hover:hover) and (pointer:fine){.swdel{display:none}}
@media (prefers-reduced-motion: reduce){.swipe .ccard{transition:none}}
.swipe .ccard{background:var(--surface)}
/* no zooming: no double-tap zoom, and text boxes at 16 px so iPhone doesn't zoom into them while typing */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:767px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}

/* ===== 7. Light Spatial Minimalism (Nov 2026): light + dark themes, this device's background photo ===== */
:root{
  color-scheme:light;
}
:root[data-theme="dark"]{
  color-scheme:dark;
}
html{background:var(--bg0)!important;transition:background-color .3s ease}
body{background:transparent!important;color:var(--text)}
body::after{display:none!important}
/* the background: this device's photo (or the default), blurred and dimmed, under a tint for readable text */
#bgPhoto{position:fixed;inset:-60px;z-index:-2;pointer-events:none;background:var(--default-bg);background-size:cover;background-position:center;
  filter:blur(var(--bg-blur,24px)) brightness(var(--bg-bright,1));transform:translateZ(0)}
.has-photo #bgPhoto{background-color:var(--bg0)}
:root[data-theme="dark"] #bgPhoto{filter:blur(var(--bg-blur,24px)) brightness(calc(var(--bg-bright,1) * .62))}
#bgTint{position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(var(--tint),var(--bg-overlay,.35));transition:background-color .3s ease}
/* glass everywhere a surface floats */
.stat,.ccard,.pcard,.prow,.cal,.ready,.emptycard,.wcol,.list,.guide,.gcard,.gtips,.gtopics,.cbody,.ritem,.notice:not(:empty),.evlist,.archtoggle{
  background:var(--glass)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
.gicon,.monthpill,.chip2,.searchrow input,.tbtn,.mbar,.sidenav,.seg{
  background:var(--glass)!important;border-color:var(--glass-b)!important;color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none}
.swipe .ccard{background:var(--glass-strong)!important}
.ccard::after{z-index:1}
dialog{background:var(--sheet)!important;color:var(--text)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--glass-b)!important}
dialog::backdrop{background:color-mix(in srgb,var(--ink) 30%,transparent)}
#postDlg.sheet,#lookDlg.sheet{background:var(--sheet)!important}
.phdr{background:var(--sheet)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.pactions{background:var(--sheet)!important}
.pmenu,.ctxmenu,.hmenu,.menu,.infotip p,.cbanner{background:var(--glass-strong)!important;color:var(--text)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--glass-b)}
.pmenu button,.ctxmenu button,.hmenu button{color:var(--text)}
input,select,textarea{color:var(--text)}
.pform input[type=text],.pform input[type=date],.pform select,.pform textarea,.rqbox textarea,label.f input,label.f select,label.f textarea,.trow1 input,.cnew textarea,.revise input{
  background:var(--field)!important;border-color:var(--line)!important;color:var(--text)!important}
::placeholder{color:var(--text-2);opacity:1}
/* Apple Blue for actions and selections; secondary buttons are glass */
.btn{background:var(--glass)!important;color:var(--text)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.primary,.btn.big{background:var(--blue)!important;color:var(--on-accent)!important;border-color:transparent!important;box-shadow:none!important}
.btn.primary:active,.btn.big:active{background:var(--blue-press)!important}
.btn.danger{color:var(--warn)!important}
.glassbtn{background:var(--glass)!important;color:var(--blue)!important}
.chip2[aria-selected="true"],.chip2[aria-pressed="true"],.mbitem[aria-current="page"],.snitem[aria-current="page"]{color:var(--on-accent)!important;background:var(--blue)!important;border-color:var(--blue)!important}
.snitem[aria-current="page"] svg,.mbitem[aria-current="page"] svg{color:var(--on-accent)!important}
.mbitem[aria-current="page"]{background:color-mix(in srgb,var(--blue) 16%,transparent)!important;color:var(--blue)!important}
.mbitem[aria-current="page"] svg{color:var(--blue)!important}
.seg button{color:var(--text-2)}
.seg button[aria-pressed="true"],.ptabs button[aria-selected="true"],.lookseg button[aria-checked="true"]{background:var(--blue)!important;color:var(--on-accent)!important;box-shadow:none!important}
.cell.sel .dbtn{background:var(--blue)!important}
.cell.today .dbtn{color:var(--blue)}
.viewall,.linkbtn,a{color:var(--blue)}
:focus-visible{outline-color:var(--blue)}
/* type */
.phead h1{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.hint,.cwhen,.cmeta,.stat span,.dow{color:var(--text-2)!important}
.sechead h2{font-size:19px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Home, as in the mockup: KC mark, search, bell, photo; a title; three summary cards */
.kcmark{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--text)}
.brand{gap:0}
.greet{margin:2px 0 16px}
.greet h1{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.greet p{font-size:15px;color:var(--text-2);margin-top:4px}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
@media (min-width:900px){.stats{grid-template-columns:repeat(3,minmax(0,220px))!important}}
.stats .stat{flex-direction:column!important;align-items:center!important;justify-content:center;gap:4px!important;min-height:104px;padding:14px 8px!important;text-align:center!important;border-radius:22px!important}
.stats .stat .sico{color:var(--text-2)!important}
.stats .stat b{font-size:26px!important;line-height:1.1;color:var(--text)}
.stats .stat > span{font-size:12.5px!important;color:var(--text-2)!important;white-space:nowrap}
.ccard.compact{padding:8px 10px!important;border-radius:20px}
.ccard.compact .copen{gap:12px;min-height:60px}
.ccard.compact .cthumb{width:52px;height:52px;border-radius:12px}
.ccard.compact .ctitle{font-size:15px}
.cwhen{font-size:13px}
.ccard.compact .badge{flex:0 0 auto}/* badges readable in both themes */
.b-sched{color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent)}
:root[data-theme="dark"] .chip{filter:saturate(.9)}

/* calendar: day timeline under the month */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tlrow{display:grid;grid-template-columns:62px 12px minmax(0,1fr);align-items:center;gap:6px}
.tltime{font-size:12.5px;font-weight:600;color:var(--text-2);text-align:right;white-space:nowrap}
.tldot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--line);justify-self:center}
.tltime:empty + .tldot{background:transparent;box-shadow:none}
.tlrow:has(.tltime:empty){margin-top:-4px}
.tlcard .ccard{margin:0}
.cal .cell{border-color:var(--sep)!important}

/* floating tab bar with the + in the middle (phones); on computers the + floats at the corner */
@media (max-width:767px){
  .mbar{grid-template-columns:1fr 1fr 64px 1fr 1fr!important;align-items:center;background:var(--glass-strong)!important}
  .mbar .fab{position:relative;inset:auto;right:auto;bottom:auto;width:52px;height:52px;margin:0 auto;transform:none!important;box-shadow:none!important}
  .bars-hidden .fab{transform:none!important}
  .mbitem{font-size:10px!important}
  .phead .avbtn{display:inline-flex}
}
@media (min-width:768px){
  .mbar{display:contents!important}
  .mbar .mbitem{display:none!important}
  .phead .avbtn{display:none}
}
.fab{background:var(--blue)!important;box-shadow:none!important}
.avbtn{width:40px;height:40px}
.phead .avbtn{border:2px solid var(--glass-b)}

/* Create Content: type buttons, caption, rows */
.ptypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ptype{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px;border-radius:20px;border:1px solid var(--glass-b);
  background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .18s var(--ease)}
.ptype[aria-checked="true"]{background:color-mix(in srgb,var(--blue) 16%,var(--glass-strong));border-color:var(--blue);color:var(--blue)}
.ptype:active{transform:scale(.97)}
.ptype:disabled{cursor:default}
.ptitlecard{padding:6px 8px!important}
.ptitlecard input{border:0!important;background:transparent!important;box-shadow:none!important;font-size:18px!important;font-weight:600}
.capcard{padding:10px 12px!important}
.capcard textarea.caption{border:0!important;background:transparent!important;box-shadow:none!important;padding:6px 6px!important;min-height:120px}
.capfoot{display:flex;align-items:center;gap:8px;margin-top:4px}
.capcount{margin-left:auto;font-size:12.5px;color:var(--text-2)}
.capfoot .tbtn{min-height:38px;padding:0 12px;font-size:14px}
.prow{display:flex!important;align-items:center;gap:12px;min-height:58px;padding:8px 14px!important;border-radius:20px;cursor:pointer;width:100%;font:inherit;color:var(--text);text-align:left}
.prow > svg{color:var(--text-2);flex:0 0 auto}
.prow .alabel{font-size:16px;font-weight:600;flex:1;white-space:nowrap}
.prow input[type=date],.prow select{flex:0 1 auto;width:auto!important;min-height:40px!important;border:0!important;background-color:transparent!important;box-shadow:none!important;text-align:right;color:var(--text-2)!important;font-size:15px!important;padding:0 26px 0 6px!important}
.prow input[type=text]{flex:1;min-width:0}
.airow{border:1px solid var(--glass-b);background:var(--glass)!important}
.airow > svg:first-child{color:var(--blue)!important}
.aitext{flex:1;display:flex;flex-direction:column}
.aitext b{font-size:16px}
.aitext small{font-size:12.5px;color:var(--text-2)}
.airow[aria-expanded="true"]{border-color:var(--blue)}
.pmedia{padding:12px 14px!important}
.pmedia .dropzone{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;border-style:solid;border-color:var(--glass-b);background:transparent;color:var(--text-2)}
.pmedia .dropzone .dzt{font-size:16px;color:var(--text)}
.pmedia .dropzone svg{width:24px;height:24px}
.pmedia .dropzone .dzs{margin-left:auto;font-size:12px}

/* Appearance window */
.lookdlg #lookBody{padding:4px 16px 20px;display:flex;flex-direction:column;gap:12px}
.lookseg{display:flex!important;width:100%}
.lookseg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:58px;border:0;background:transparent;border-radius:16px;color:var(--text-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lookprev{position:relative;height:150px;border-radius:18px;overflow:hidden;background:var(--default-bg);display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px;margin-bottom:12px}
.lookprev::before{content:"";position:absolute;inset:-20px;background:var(--preview-img,var(--default-bg));background-size:cover;background-position:center;filter:blur(var(--bg-blur)) brightness(var(--bg-bright))}
:root[data-theme="dark"] .lookprev::before{filter:blur(var(--bg-blur)) brightness(calc(var(--bg-bright) * .62))}
.lookprev::after{content:"";position:absolute;inset:0;background:rgba(var(--tint),var(--bg-overlay))}
.lookprev > *{z-index:1}
.lookprev-card{position:relative;padding:8px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:none;backdrop-filter:none;font-size:12px;display:flex;flex-direction:column;color:var(--text)}
.chgphoto{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-b);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none}
.chgphoto input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chgphoto:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.lookrow{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.lookrowh{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.lookval{color:var(--text-2);font-weight:500}
input[type=range]{width:100%;accent-color:var(--blue);min-height:32px}

/* solid surfaces where frosted glass isn't supported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{}

}
@media (prefers-reduced-transparency: reduce){
  :root{}

}
@media (prefers-reduced-motion: reduce){html,#bgTint{transition:none}.ptype{transition:none}}
.stats .stat > *{align-self:center!important}
.stats .stat b{align-self:center!important;text-align:center}
.cell.sel .dbtn,.cell.today.sel .dbtn{color:var(--on-accent)!important}
.phtitle h3{font-size:22px!important}
@media (max-width:767px){.phtitle h3{font-size:21px!important}}
.tlrow{grid-template-columns:50px 10px minmax(0,1fr)!important;gap:6px}
.tltime{font-size:11.5px}
.phtitle h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.phtitle h3{font-size:20px!important}.savebtn{padding:0 12px!important;font-size:15px!important}}
/* phones: the new-comment banner sits just above the tab bar, so the header (search, bell, your photo → More) stays usable */
@media (max-width:767px){
  .cbanner{top:auto!important;bottom:calc(var(--mbar-h) + 22px + env(safe-area-inset-bottom,0px))!important;animation:cbUp .35s cubic-bezier(.2,1.2,.4,1)!important}
  .bars-hidden .cbanner{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
}
@keyframes cbUp{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* Home: the seven status cards in the spatial look (two columns on phones, four on computers) */
.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.stats .stat{flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;min-height:76px;padding:14px 16px!important;text-align:left!important}
.stats .stat > *{align-self:center!important}
.stats .stat .snum{display:flex!important;flex-direction:column;align-items:flex-start}
.stats .stat .snum b{font-size:24px!important;align-self:flex-start!important;text-align:left}
.stats .stat .snum span{font-size:13.5px!important;color:var(--text-2)!important;white-space:normal!important}
.stats .stat.t-blue .sico{color:var(--blue)!important}.stats .stat.t-lav .sico{color:var(--accent)!important}.stats .stat.t-mint .sico{color:var(--ok)!important}
.stats .stat.t-green .sico{color:var(--ok)!important}.stats .stat.t-sky .sico{color:var(--blue)!important}.stats .stat.t-amber .sico{color:var(--text)!important}
.stats .stat.t-coral .sico{color:var(--warn)!important}.stats .stat.t-coral .snum span{color:var(--warn)!important}
.prow input[type=text]{text-align:right;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--text-2)!important;padding:0 4px!important;font-size:15px!important}
/* status cards: a soft color wash over glass, in both themes */
.stats .stat.t-blue{background:var(--surface-2)!important}
.stats .stat.t-lav{background:var(--surface-2)!important}
.stats .stat.t-mint{background:var(--surface-2)!important}
.stats .stat.t-green{background:var(--surface-2)!important}
.stats .stat.t-sky{background:var(--surface-2)!important}
.stats .stat.t-amber{background:color-mix(in srgb,var(--orange-500) 20%,transparent)!important}
.stats .stat.t-coral{background:color-mix(in srgb,var(--warn) 15%,transparent)!important}
.stats .stat .snum b{color:var(--text)!important}
/* post window header: room for "Create Content" on one line */
@media (max-width:767px){
  .phdr{gap:6px!important;padding-left:12px!important;padding-right:12px!important}
  .phdr .gicon{width:40px;height:40px}
  .savebtn{padding:0 10px!important;font-size:15px!important;min-height:40px!important}
  .phtitle h3{font-size:19px!important}
}
/* borders: one soft glass edge everywhere (no bright white outlines in dark mode) */
.stats .stat,.ccard,.cal,.ready,.pcard,.prow,.tbtn,.mbar,.ptab > .sec,.aipanel,.emptycard,.gicon,.chip2,.monthpill,.seg,.ptype,.airow,
.pform input[type=text],.pform input[type=date],.pform select,.pform textarea{border-color:var(--line)!important}

/* Approvals: Edit requests and Ready to post as glass cards, readable in both themes */
.ready,.ready.reqs{background:var(--glass)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px!important}
.ready.reqs{background:color-mix(in srgb,var(--orange-500) 15%,transparent)!important}
.ready .rhead h2,.ready.reqs .rhead h2{color:var(--text)!important;font-size:19px!important}
.ready .rhead .hint,.ready.reqs .rhead .hint{color:var(--text-2)!important;font-size:13px}
.ready .rlist{display:flex;flex-direction:column;gap:8px}
.ritem{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--glass-strong)!important;border:1px solid var(--glass-b)!important;
  border-radius:18px!important;box-shadow:none!important;padding:10px 12px!important}
.ritem::before{display:none!important}
.ropen{padding:0!important;gap:12px!important;color:var(--text)!important}
.rdate{width:48px!important}
.rdate small{color:var(--text-2)!important}
.rdate strong{font-size:16px!important;color:var(--text)}
.ridea{font-size:15px;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rreq{color:var(--text-2)!important}
.rmain .meta,.rmain .meta b{color:var(--text-2)!important;font-size:12.5px}
.ritem > .btn{white-space:nowrap;min-height:38px;padding:0 14px;font-size:14px}
@media (max-width:480px){
  .ritem{grid-template-columns:1fr}
  .ritem > .btn{justify-self:stretch;justify-content:center}
}
@media (max-width:767px){
  .ccard:has(.approvebtn){flex-wrap:wrap}
  .ccard:has(.approvebtn) .copen{flex:1 1 calc(100% - 48px)}
  .ccard .approvebtn{order:3;flex:1 1 100%;justify-content:center;margin:8px 4px 2px}
}
/* Appearance: the theme switch — matching rounded shapes, icons not clipped, no bright outline */
.seg.lookseg{display:grid!important;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px!important;border-radius:20px!important;
  background:var(--bg2)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important}
.seg.lookseg::before{display:none!important}
.seg.lookseg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px!important;height:auto;
  padding:10px 6px!important;border-radius:16px!important;line-height:1.2;overflow:visible;font-size:14px;color:var(--text-2)}
.seg.lookseg button svg{flex:0 0 auto;width:20px;height:20px}
.seg.lookseg button[aria-checked="true"]{background:var(--blue)!important;color:var(--on-accent)!important;box-shadow:none!important}
/* no bright specular rim on windows and segmented controls (old glass effect) */
dialog::before,.seg::before,.btn::before,select.pill::before{display:none!important}
#lookDlg .phdr{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Appearance sliders: soft track filled in blue up to the knob, a plain white knob, no outlines */
input[type=range].lookrange{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:pointer}
input[type=range].lookrange::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;
  background:linear-gradient(to right,var(--blue) 0 var(--p,50%),var(--bg2) var(--p,50%) 100%)}
input[type=range].lookrange::-moz-range-track{height:6px;border:0;border-radius:3px;background:var(--bg2)}
input[type=range].lookrange::-moz-range-progress{height:6px;border-radius:3px;background:var(--blue)}
input[type=range].lookrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-10px;border:0;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 .5px var(--line)}
input[type=range].lookrange::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--surface);box-shadow:none}
input[type=range].lookrange:focus-visible{outline:none}
input[type=range].lookrange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--line)}/* buttons in the Appearance window: no bright outline in dark mode */

/* one place for edges: soft in light, almost invisible in dark (Kazel: no bright outlines anywhere) */


.pform input:focus,.pform select:focus,.pform textarea:focus,.rqbox textarea:focus{box-shadow:0 0 0 3px var(--line)!important;border-color:color-mix(in srgb,var(--blue) 45%,transparent)!important}
/* Home cards: neutral glass; only the small icons carry color */
.stats .stat.t-blue,.stats .stat.t-lav,.stats .stat.t-mint,.stats .stat.t-green,.stats .stat.t-sky,.stats .stat.t-amber,.stats .stat.t-coral{background:var(--glass)!important}
.stats .stat .snum span,.stats .stat.t-coral .snum span{color:var(--text-2)!important}
/* comments (Review & Activity): same glass as the rest, readable in both themes */
.ptab > .sec:not(.pcard){background:var(--glass)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
.ptab .sec h4{color:var(--text)}
.cbody,.cmt.creply .cbody,.cnote .cbody{background:var(--glass-strong)!important;border:1px solid var(--glass-b)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:16px!important;color:var(--text)}
.cbody::before{display:none!important}
.cmt.creply .cbody{background:var(--bg2)!important}
.chead{flex-wrap:nowrap!important;align-items:baseline}
.chead b{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chead time{white-space:nowrap}
.chead .cdel{margin-left:auto;flex:0 0 auto;color:var(--text-2)}
.ctext{color:var(--text)}
.reqmeta,.reqmeta b{color:var(--text-2)!important}
.cnew textarea{background:var(--field)!important;border-color:var(--line)!important;color:var(--text)!important}
.reqchk{color:var(--text-2)}
/* tick boxes that follow the theme (blue when ticked) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;flex:0 0 auto;margin:0;border-radius:7px;border:1.5px solid var(--text-2);
  background:var(--field);display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid var(--line);border-width:0 2.2px 2.2px 0;transform:translateY(-1px) rotate(45deg)}
input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.5;cursor:default}
/* History: collapsed until tapped */
.phistbox > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:28px;font-size:15px;font-weight:600;color:var(--text)}
.phistbox > summary::-webkit-details-marker{display:none}
.phistbox > summary .hint{font-weight:500;font-size:13px}
.phistbox > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .2s}
.phistbox[open] > summary::after{transform:rotate(-135deg)}
.phistbox[open] > summary{margin-bottom:10px}
.phist li{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}
.phist li > span{color:var(--text-2)}
.phist time{margin-left:0!important;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.phistbox > summary::after{transition:none}}

/* ---- Calendar List and Week views in both themes (Kazel, Nov 3: week cards were white in dark mode) ---- */
:root[data-theme="dark"]{
  }
.week .wcard{background:var(--glass-strong)!important;border:1px solid var(--glass-b)!important;color:var(--text);box-shadow:none}
.week .wcard .t{color:var(--text)}
.week .wcard .m,.wempty,.whead small{color:var(--text-2)}
.whead strong{color:var(--text)}
.wcol.today{outline:0;box-shadow:inset 0 0 0 2px var(--blue)!important}
.week .wcard.posted{opacity:.6;box-shadow:none}
.week .wcard.posted .t{color:var(--text-2)}
.week .wcard.due-soon{box-shadow:inset 3px 0 0 var(--blue-300)}
.week .wcard.due-late{box-shadow:inset 3px 0 0 var(--warn)}
.list{border-radius:22px;overflow:hidden;padding:0 4px}
.list .rowhead{color:var(--text);border-bottom:1px solid var(--glass-b);background:transparent!important}
.list .rowhead:last-child{border-bottom:0}
.list .rowhead:hover{background:var(--bg2)!important}
.list .rowhead .idea,.list .rowhead .date strong{color:var(--text)}
.list .rowhead .meta,.list .rowhead .date small{color:var(--text-2)}
.rowhead.posted{opacity:.6}
.rowhead.posted .idea{color:var(--text-2)!important}
.rowhead.posted .tag{background:var(--bg2)!important;color:var(--text-2)!important}
.rowhead.due-soon{box-shadow:inset 3px 0 0 var(--blue-300)}
.rowhead.due-late{box-shadow:inset 3px 0 0 var(--warn)}
.wcol::before,.wcard::before{display:none}
.evlist{border-radius:18px;padding:4px 12px}
:root[data-theme="dark"]{
  }/* sign-in box in dark mode (Kazel, Nov 3: it was a flat grey box with faint text) */
#gate .gbox::before{display:none}
#gate .glogo b{color:var(--text)}
#gate .gfine{color:var(--text-2)}
#gate .glink{color:var(--blue);text-decoration:none}

/* ---- phones: the tab bar fades with the scroll instead of sliding (Kazel, Nov 4); nav.js sets --barv ---- */
@media (max-width:767px){
  html .mbar,html.bars-hidden .mbar{transform:none!important;opacity:var(--barv,1);transition:none!important}
  html.bars-snap .mbar{transition:opacity .22s ease!important}
  html.bars-hidden .mbar{pointer-events:none}
}
@media (prefers-reduced-motion: reduce){html.bars-snap .mbar{transition:opacity .12s linear!important}}

/* ---- the top bar (screen name, search, filter, your photo) stays pinned at the top; glass once the page scrolls ---- */
#app{overflow-x:clip}
.phead{position:sticky;top:env(safe-area-inset-top,0px);z-index:35}
.phead::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:calc(-6px - env(safe-area-inset-top,0px));bottom:-8px;
  background:var(--glass-strong);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;opacity:0;transition:opacity .2s ease;pointer-events:none}
html.scrolled .phead::before{opacity:1}
:root[data-theme="light"] .phead::before{background:var(--surface)}
/* day list: the time on its own line above the posts; cards use the full width (Kazel, Nov 4) */
.tlrow,.tlrow.same{display:flex!important;flex-direction:column;gap:8px;margin-top:0!important}
.timeline{gap:12px}
.tlrow:not(.same):not(:first-child){margin-top:8px!important}
.tlhead{display:flex;align-items:center;gap:8px;padding-left:4px}
.tltime{font-size:13px!important;text-align:left;color:var(--text-2)}
.tldot{justify-self:auto;flex:0 0 auto}
.tlrow,.tlrow.same{align-items:stretch!important;width:100%}
.tlcard{width:100%;min-width:0}
.tlhead{align-self:flex-start}
/* phones: just enough room below the last item for the floating bar (Kazel, Nov 4: the gap was too big) */
@media (max-width:767px){#app{padding-bottom:calc(var(--mbar-h) + 26px + env(safe-area-inset-bottom,0px))!important}}
/* windows fade in and out (Kazel, Nov 4); ui/fade.js adds .closing for the way out */
@keyframes dlgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes dlgOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}
@keyframes sheetFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sheetFadeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}
@keyframes bdIn{from{opacity:0}to{opacity:1}}
@keyframes bdOut{from{opacity:1}to{opacity:0}}
dialog[open]{animation:dlgIn .24s cubic-bezier(.2,.8,.2,1)}
dialog.sheet[open],#postDlg[open]{animation:sheetFadeIn .26s cubic-bezier(.2,.8,.2,1)!important}
dialog[open]::backdrop{animation:bdIn .24s ease}
dialog.closing{animation:dlgOut .17s ease forwards!important;pointer-events:none}
dialog.sheet.closing,#postDlg.closing{animation:sheetFadeOut .17s ease forwards!important}
dialog.closing::backdrop{animation:bdOut .17s ease forwards}
@media (prefers-reduced-motion: reduce){
  dialog[open],dialog.sheet[open],#postDlg[open]{animation:bdIn .12s linear!important}
  dialog.closing,dialog.sheet.closing,#postDlg.closing{animation:bdOut .09s linear forwards!important}
}

/* ---- photos: tap to open full screen; low-resolution tag (Kazel, Nov 4) ---- */
.gallery .gview{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;width:100%}
.gallery figure{position:relative}
.lowres{position:absolute;top:6px;left:6px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:980px;color:var(--text);background:var(--orange-500);pointer-events:none}

/* ---- the full-screen viewer ---- */
dialog.viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0!important;border-radius:0;
  background:color-mix(in srgb,var(--ink) calc(var(--vfade,1) * 100%),transparent)!important;color:var(--white)!important;overflow:hidden;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
dialog.viewer::before{display:none}
dialog.viewer::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.viewer .vtrack{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.viewer .vtrack::-webkit-scrollbar{display:none}
.viewer .vslide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-x;
  padding:calc(56px + env(safe-area-inset-top,0px)) 0 calc(76px + env(safe-area-inset-bottom,0px))}
.viewer .vslide.zoomed{touch-action:none}
.viewer .vslide img,.viewer .vslide video{max-width:100%;max-height:100%;object-fit:contain;border-radius:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:center center;will-change:transform}
.viewer .vslide img{cursor:zoom-in}.viewer .vslide.zoomed img{cursor:grab}
.viewer .vtop{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  background:color-mix(in srgb,var(--ink) 55%,transparent)}
.viewer .vcount{font-size:15px;font-weight:600}
.viewer .vlow{font-size:12px;font-weight:700;padding:3px 9px;border-radius:980px;color:var(--text);background:color-mix(in srgb,var(--orange-500) 18%,transparent)}
.viewer .vsp{flex:1}
.viewer .vbtn{width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;color:var(--white);background:color-mix(in srgb,var(--white) 14%,transparent);cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none}
.viewer .vbtn:disabled{opacity:.25;cursor:default}
.viewer .vnav{position:absolute;z-index:2;top:50%;margin-top:-22px}
.viewer .vprev{left:14px}.viewer .vnext{right:14px}
@media (hover:none){.viewer .vnav{display:none}}
.viewer .vbottom{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ink) 55%,transparent)}
.viewer .vreq{min-height:46px;padding:0 20px;border-radius:999px;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--white);background:color-mix(in srgb,var(--white) 16%,transparent);cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none}
.viewer .vreq:active{background:color-mix(in srgb,var(--white) 26%,transparent)}
dialog.viewer[open]{animation:bdIn .22s ease!important}
dialog.viewer.closing{animation:bdOut .17s ease forwards!important}
/* ---- Face ID lock screen ---- */
dialog.lockdlg{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px 16px;border:0!important;border-radius:0;
  display:flex;align-items:center;justify-content:center;background:var(--bg0)!important;box-shadow:none!important}
dialog.lockdlg:not([open]){display:none}
dialog.lockdlg::before{display:none}
dialog.lockdlg::backdrop{background:var(--bg0)}
.lockdlg .lkbox{width:min(400px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center;padding:28px 22px;border-radius:28px;
  background:var(--glass-strong);border:1px solid var(--glass-b);box-shadow:none}
.lockdlg .lkbrand{width:min(240px,75%);align-self:center;margin-bottom:4px}
.lockdlg h2{margin:0;font-size:22px;color:var(--text)}
.lockdlg .hint{margin:0}
.lockdlg .lkmsg{margin:0;min-height:1.2em;font-size:14px;color:var(--warn)}
.lockdlg .glink{background:none;border:0;color:var(--blue);font:inherit;font-weight:600;cursor:pointer;padding:6px 0}
/* ---- Post it myself (Nov 4) ---- */
.selfbtn{width:100%;margin:0 0 10px;min-height:46px;font-weight:600}
dialog.selfdlg{width:min(460px,calc(100vw - 24px));border-radius:26px;padding:18px 18px 16px}
.selfhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.selfhead h3{margin:0;font-size:20px}
.selfsteps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.selfstep{display:flex;gap:12px;align-items:flex-start}
.selfn{flex:0 0 28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--on-accent);background:var(--blue)}
.selfbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.selfbody .hint{margin:0;font-size:13px}
.selfbody .btn{align-self:flex-start;min-height:42px;text-decoration:none;display:inline-flex;align-items:center}
.selfbody .btn.done{background:var(--surface-2)!important;color:var(--ok)!important;box-shadow:none!important}
.selfcap{width:100%;font:inherit;font-size:15px;border-radius:12px;padding:8px 10px;background:var(--field);color:var(--text);border:1px solid var(--glass-b)}
/* Facebook preview: photos (Kazel, Nov 4) */
.fbgrid{display:grid;gap:3px;margin:8px 0 0;background:#fff}
.fbgrid.g1{grid-template-columns:1fr}
.fbgrid.g2{grid-template-columns:1fr 1fr}
.fbgrid.g3{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.fbgrid.g3 .fbph:first-child{grid-column:1 / -1}
.fbgrid.g4{grid-template-columns:1fr 1fr}
.fbgrid.g5{grid-template-columns:repeat(6,1fr)}.fbgrid.g5 .fbph:nth-child(-n+2){grid-column:span 3}.fbgrid.g5 .fbph:nth-child(n+3){grid-column:span 2}
.fbph{position:relative;display:block;padding:0;border:0;background:#e4e6eb;cursor:zoom-in;overflow:hidden;border-radius:0}
.fbph img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.fbgrid.g1 .fbph img{aspect-ratio:auto;max-height:520px;object-fit:contain;background:#000}
.fbgrid.g3 .fbph:first-child img,.fbgrid.g2 .fbph img{aspect-ratio:4/5}
.fbgrid.g3 .fbph:first-child img{aspect-ratio:16/10}
.fbmore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:28px;font-weight:700}
.fbplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}/* ---- older windows in dark mode: Team, Ideas, Hashtags, Publishing, Events (Kazel, Nov 4: "still white") ---- */
:root[data-theme="dark"] :is(.tform,.iform,.hform,.mrow,.lq,.iitem,.hitem)::before{display:none}
:root[data-theme="dark"] dialog .btn::before{display:none}
/* drag photos to reorder (Nov 4) */
.gallery{position:relative}
.gallery figure{touch-action:pan-y;-webkit-user-select:none;user-select:none;transition:transform .15s ease}
.gallery img{-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
.gallery .gview{pointer-events:auto}
.gallery figure.dragging{z-index:5;transition:none;box-shadow:none;border-radius:14px;opacity:.95;cursor:grabbing}
.gallery.sorting figure:not(.dragging){opacity:.85}
@media (hover:hover){.gallery figure{cursor:grab}}
.fbpick{position:relative}
.fbpick .fbthumb.on{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.fbpick .fbthumb img{-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
.fbpick .fbthumb.dragging{z-index:5;box-shadow:none;opacity:.95;cursor:grabbing}
@media (hover:hover){.fbpick .fbthumb.on{cursor:grab}}
.pactions .backdraft{display:block;margin:6px auto 2px;background:none;border:0;color:var(--blue);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:6px 10px}
/* a long choice in a dropdown (e.g. "Add an editor…" with name + email) must never widen a window (Kazel, Nov 4) */
#pubBody > select,#pubBody select{display:block;width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}
/* calendar post chips in dark mode: tinted glass instead of bright pastel blocks (Kazel, Nov 4) */
:root[data-theme="dark"]{
  }
:root[data-theme="dark"] .chip{filter:none;box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .chip.posted{background:var(--surface-2)!important;color:var(--text-2)!important;opacity:.75}
/* upload progress rows: glass, both themes (Kazel, Nov 5: "still white" in dark) */
.uprow{background:var(--glass-strong)!important;border:1px solid var(--glass-b);color:var(--text)}
.uprow .upname{color:var(--text)}
.uprow progress{appearance:none;-webkit-appearance:none;border:0;border-radius:980px;overflow:hidden;background:var(--bg2)}
.uprow progress::-webkit-progress-bar{background:var(--bg2);border-radius:980px}
.uprow progress::-webkit-progress-value{background:var(--blue);border-radius:980px}
.uprow progress::-moz-progress-bar{background:var(--blue);border-radius:980px}
.pactions .backdraft.discard{color:var(--warn)}

/* ---- events: no card, just a line with an orange calendar icon, so posts (cards) and events read apart (Kazel, Nov 5) ---- */
html .ccard.ev,html .swipe .ccard.ev,html :root .ccard.ev{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html .ccard.ev::before{display:none}
html .ccard.ev.bar-event::after{display:none}
html .ccard.ev[class*="bar-"]{padding-left:10px}
html .swipe.open .ccard.ev{background:var(--glass-strong)!important}
html .ccard.ev .cthumb.ph.evph,html .ccard.ev .cthumb.evph{color:var(--text)!important;background:color-mix(in srgb,var(--orange-500) 15%,transparent)!important;border:0!important;box-shadow:none!important}
html .ccard.ev:hover{box-shadow:none!important}
/* events: smaller text than posts (Kazel, Nov 5) */
html .ccard.ev .ctitle{font-size:14px!important;font-weight:600;line-height:1.25}
html .ccard.ev .cwhen,html .ccard.ev .cfmt,html .ccard.ev .cmeta{font-size:12px!important}
html .ccard.ev .badge{font-size:11px;padding:2px 8px}
html .ccard.ev .cthumb{width:44px!important;height:44px!important;border-radius:12px!important}
html .ccard.ev .cthumb svg{width:20px;height:20px}
html .ccard.ev{padding-top:4px!important;padding-bottom:4px!important}
/* event line: title on the left, time on the right of the same line */
.ccard.ev .evhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.ccard.ev .evhead .ctitle{min-width:0;flex:1 1 auto}
.ccard.ev .evtime{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.ccard.ev .crow{display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px}
.ccard.ev .evloc{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ccard.ev .cbody2{flex:1 1 auto;min-width:0}/* no colored borders or side bars on posts anywhere (Kazel, Nov 5): due / overdue and stage show in the
   badges, the Home cards (Due Soon, Overdue) and the calendar dots instead */
:root[data-theme="light"] .chip.due-soon,:root[data-theme="light"] .chip.due-late{box-shadow:none!important}
html .wcard.due-soon,html .wcard.due-late,html .week .wcard.due-soon,html .week .wcard.due-late{box-shadow:none!important}
html .rowhead.due-soon,html .rowhead.due-late{box-shadow:none!important}
html .ccard[class*="bar-"]::after{display:none!important}
html .ccard[class*="bar-"]{padding-left:10px}
/* month view: Month / Week / List on the right, like the Week and List views (Kazel, Nov 5) */
@media (min-width:768px){.hrow #viewSeg{margin-left:auto}}
/* month + year centered in their pill (phones stretched the month box, pushing the text right) */
#monthSeg{justify-content:center}
#monthSeg #fMonth,#monthSeg #fYear{flex:0 1 auto!important;field-sizing:content;text-align:center;text-align-last:center}
#monthSeg #fMonth{padding-right:2px}
#monthSeg #fYear{padding-left:2px}

/* Events: regular weight and smaller than posts, so posts stand out (Kazel, Nov 6) */
html .ccard.ev .ctitle,html .ccard.compact.ev .ctitle{font-size:14px!important;font-weight:600!important;color:var(--text)}   /* event titles in bold (Kazel, Nov 10) */
html .ccard.ev .evtime{font-size:11px;font-weight:400}
html .ccard.ev .evhead .badge{flex:0 0 auto}
html .ccard.ev .crow .evtime{color:var(--text-2)}
html .ccard.ev .crow{gap:4px}

/* ---------- Motion (Kazel, Nov 9 2026: "smooth transitions like Pawlish Paws"). Only transform and opacity move.
   ui/motion.js adds the classes. With the phone's Reduce Motion on: quick fades only, nothing else moves. ---------- */
@keyframes kcInR{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes kcInL{from{transform:translateX(-26px);opacity:0}to{transform:none;opacity:1}}
@keyframes kcRise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes kcFade{from{opacity:0}to{opacity:1}}
@keyframes kcFadeOut{to{opacity:0}}
@keyframes kcSheetUp{from{transform:translateY(100%)}70%{transform:translateY(-1%)}to{transform:none}}
@keyframes kcSheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes kcPop{40%{transform:scale(1.35)}}
@keyframes kcDraw{to{stroke-dashoffset:0}}
@keyframes kcCheckIn{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
/* 1. screens slide in from the side of the tab you tapped */
.screen.on.kc-in-r{animation:kcInR .26s cubic-bezier(.2,.9,.25,1)}
.screen.on.kc-in-l{animation:kcInL .26s cubic-bezier(.2,.9,.25,1)}
/* 2. lists arrive in turn: ui/listfx.js (fade + rise 12px, 300ms, 50ms apart). Items below the fold wait unseen until
   first scrolled to. */
.lfx-wait{opacity:0}
/* 3. buttons dip when pressed */
:is(.btn,.mbitem,.snitem,.stat,.fab,.gicon,.seg button,.glink,.chip2):not(:disabled){transition:transform .12s ease}
:is(.btn,.mbitem,.snitem,.stat,.fab,.gicon,.seg button,.glink,.chip2):not(:disabled):active{transform:scale(.96)}
.copen:active{transform:scale(.985);transition:transform .12s ease}
/* 4. windows: on phones they slide up from the bottom and slide away when closed */
@media (max-width:767px){
  dialog.sheet[open],#postDlg[open]{animation:kcSheetUp .4s cubic-bezier(.2,.9,.25,1)!important}
  dialog.sheet.closing,#postDlg.closing{animation:kcSheetDown .24s ease-in forwards!important}
}
/* 5. messages rise and fade in */
.notice.kc-rise{animation:kcRise .28s cubic-bezier(.2,.9,.25,1)}
/* 6. counts pop when they change */
.nbadge.kc-pop{animation:kcPop .35s ease}
/* 7. Approve draws a check */
.kc-check{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none;display:grid;justify-items:center;gap:8px;
  padding:18px 26px;border-radius:22px;background:var(--sheet,var(--surface));color:var(--ok);font-size:16px;font-weight:700;box-shadow:none;
  animation:kcCheckIn .28s cubic-bezier(.2,.9,.25,1)}
.kc-check.out{animation:kcFadeOut .25s ease forwards}
.kc-check path{stroke-dasharray:34;stroke-dashoffset:34;animation:kcDraw .4s .12s ease forwards}
@media (prefers-reduced-motion: reduce){
  .screen.on.kc-in-r,.screen.on.kc-in-l,.notice.kc-rise,.kc-check{animation:kcFade .15s ease!important}
  .kc-check path{stroke-dashoffset:0!important;animation:none!important}
  .nbadge.kc-pop{animation:none!important}
  .lfx-wait{opacity:1!important}
  :is(.btn,.mbitem,.snitem,.stat,.fab,.gicon,.seg button,.glink,.chip2,.copen):active{transform:none!important}
  dialog.sheet[open],#postDlg[open]{animation:bdIn .12s linear!important}
  dialog.sheet.closing,#postDlg.closing{animation:bdOut .09s linear forwards!important}
}
/* Research and analytics use the existing theme variables and responsive dialogs. */
.manager-dialog{width:min(720px,calc(100vw - 24px));max-width:720px;box-sizing:border-box;max-height:85dvh;overflow:auto;padding:24px;border-radius:24px;color:var(--text);background:var(--card);border:1px solid var(--line)}
.manager-dialog::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.manager-body{display:flex;flex-direction:column;gap:16px}.manager-body input,.manager-body select{max-width:100%;padding:10px;border-radius:10px}.manager-body [hidden]{display:none}.manager-body>div:not([hidden]){min-width:0}.manager-body p{overflow-wrap:anywhere}.manager-body a{color:var(--blue,var(--accent))}.manager-report{white-space:pre-wrap;line-height:1.6}.manager-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.manager-card{padding:16px;border:1px solid var(--line);border-radius:16px;margin:8px 0;overflow-wrap:anywhere}.manager-card strong{font-size:28px;display:block}.manager-card small{display:block}.manager-body input{width:100%;box-sizing:border-box}.manager-body [type=date]{width:auto}

.manager-dialog>.trow1{align-items:center;justify-content:space-between;margin-bottom:16px}.manager-dialog>.trow1 h2{margin:0;font-size:24px}.manager-dialog>.trow1 .btn{flex:0 0 auto;align-self:center}.manager-body p{margin:0;line-height:1.5}.manager-body h3{font-size:18px;margin:0 0 12px}.manager-body .manager-card h3{font-size:16px;margin:0 0 8px}.manager-form{display:grid;gap:12px}.manager-card small{line-height:1.4;margin-top:8px}

/* Keep the longer menu inside its scroll area, clear of the collapse and sign-out controls. */
.snlist{min-height:0;overflow-y:auto}.snhead,.snfoot{flex-shrink:0}

/* AI Assist (Nov 9 2026): tabs, idea cards, templates, quick-change chips in the post window */
#managerDlg .assistseg{display:flex;width:100%}
#managerDlg .assistseg button{flex:1 1 0}
#managerDlg .trow1{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#managerDlg .trow1>input{flex:1 1 220px;min-width:0}
#managerDlg .ideahead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#managerDlg .ideacard p,#managerDlg .ideacard small{margin:4px 0 0}
#managerDlg .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
#managerDlg .tpltext{white-space:pre-wrap;line-height:1.5;margin:8px 0 0;color:var(--text-2)}
#managerDlg textarea{width:100%;box-sizing:border-box;border-radius:10px;padding:10px;font:inherit;margin-top:8px}
#managerDlg .manager-card input{width:100%;box-sizing:border-box;margin-top:8px}
.aiextras{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.aiextras .chips{display:flex;flex-wrap:wrap;gap:6px}
.aiextras select{max-width:100%}

/* ===== 8. Kazel Celeste brand, polished (Nov 10 2026, approved mockups) =====
   Flat: no shadows, no blur, no gradients. 8-point spacing. Radii: 12 buttons and fields, 16 cards, 24 tab bar.
   Page Blue 50, white cards without borders, Blue 50 dividers. Headings Barlow Semi Condensed ExtraBold, everything else Barlow.
   Dark mode uses the same rules: the colors switch in section 0. */
html{background:var(--page)!important}
body{font-family:"Barlow",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Arial,sans-serif!important;color:var(--text);letter-spacing:0}
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;text-shadow:none!important}
h1,h2,h3,.greet h1,.phead h1,.phtitle h3,.sechead h2,.rhead h2,.dlghead h3,#gate .glogo b,.stat b,.stats .stat .snum b,.cal .mtitle{
  font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;font-weight:900!important;letter-spacing:-.01em!important}
a,.linkbtn,.glink{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* when no background photo is chosen: the plain page color */
#bgPhoto{background:var(--page)}
#bgTint{background:color-mix(in srgb,var(--page) calc(var(--bg-overlay,.35) * 100%),transparent)!important}
:root:not(.has-photo) #bgTint{background:transparent!important}
.lookprev::after{background:color-mix(in srgb,var(--page) calc(var(--bg-overlay,.35) * 100%),transparent)!important}
/* the old glass highlights are gone */
.btn.primary::before,.lgx::before,:is(.tform,.iform,.hform,.mrow,.lq,.iitem,.hitem)::before,dialog .btn::before,#gate .gbox::before{display:none!important}

/* cards and surfaces: white, no border, radius 16 */
.stat,.ccard,.pcard,.prow,.cal,.ready,.emptycard,.wcol,.list,.guide,.gcard,.gtips,.gtopics,.cbody,.ritem,.notice:not(:empty),.evlist,.archtoggle,
.panel,.uprow,.ptab > .sec:not(.pcard),.week .wcard{background:var(--surface)!important;border:0!important;box-shadow:none!important;color:var(--text)}
.ccard,.pcard,.prow,.cal,.ready,.wcol,.list,.guide,.panel,.stat{border-radius:16px!important}
dialog{background:var(--page)!important;border:0!important;box-shadow:none!important}
dialog::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)!important}
.pmenu,.ctxmenu,.hmenu,.menu,.infotip p,.cbanner{background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* buttons: filled, radius 12 */
.btn,.gbtn,.tbtn{border-radius:12px!important;box-shadow:none!important}
.btn{background:var(--surface-2)!important;color:var(--accent)!important;border:0!important;font-weight:600}
.btn.primary,.btn.big,#gate .gbtn.primary{background:var(--accent)!important;color:var(--on-accent)!important;border:0!important}
.btn.danger,.btn.del{background:var(--surface-2)!important;color:var(--warn)!important}
.linkbtn.discard,.discard{color:var(--warn)!important}
input,select,textarea{border-radius:12px}
.gicon{background:var(--surface)!important;color:var(--accent)!important;border:0!important;box-shadow:none!important}
.avbtn{border:0!important}

/* status chips (Kazel: Draft gray, For Approval orange with ink text, Approved teal 700, Published blue 500) */
.badge,.b-draft,.b-review,.b-changes,.b-ok,.b-sched,.b-posted,.b-event,.tag,.reqtag,.duetag,.rtag{white-space:nowrap;flex:0 0 auto;
  font-size:12px!important;line-height:16px!important;font-weight:600!important;padding:4px 10px!important;border-radius:999px!important;border:0!important;box-shadow:none!important}
.b-draft{background:var(--chip-draft-bg)!important;color:var(--chip-draft-fg)!important}
.b-review{background:var(--orange-500)!important;color:var(--ink)!important}
.b-changes{background:color-mix(in srgb,var(--warn) 12%,var(--surface))!important;color:var(--warn)!important}
.b-ok{background:var(--chip-ok-bg)!important;color:var(--chip-ok-fg)!important}
.b-sched{background:var(--blue-300)!important;color:var(--ink)!important}
.b-posted{background:var(--chip-pub-bg)!important;color:var(--chip-pub-fg)!important}
.b-event{background:var(--chip-event-bg)!important;color:var(--chip-event-fg)!important}
.tag,.tag.ground,.tag.Explained,.tag.home{background:var(--chip-topic-bg)!important;color:var(--chip-topic-fg)!important}
.reqtag.open{background:var(--orange-500)!important;color:var(--ink)!important}
.duetag.soon{background:var(--surface-2)!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1.5px var(--blue-300)!important}   /* Due soon: a quieter blue tag (Kazel, Nov 10); orange stays for For Approval */
.duetag.late,.rtag.late{background:color-mix(in srgb,var(--warn) 12%,var(--surface))!important;color:var(--warn)!important}
.nbadge,.cbadge{background:var(--orange-500)!important;color:var(--ink)!important;box-shadow:none!important}
/* calendar dots: Draft gray, For Approval orange, Approved teal, Published blue, events Blue 300 */
.dot.draft,.dot.idea{background:var(--gray)!important}.dot.review{background:var(--orange-500)!important}
.dot.ok,.dot.approved{background:var(--teal-700)!important}.dot.posted,.dot.published,.dot.sched{background:var(--blue-500)!important}
:root[data-theme="dark"] .dot.draft{background:var(--blue-100)!important}
:root[data-theme="dark"] .dot.ok,:root[data-theme="dark"] .dot.approved{background:var(--teal-200)!important}
:root[data-theme="dark"] .dot.posted,:root[data-theme="dark"] .dot.published,:root[data-theme="dark"] .dot.sched{background:var(--white)!important}

/* segmented controls (Month/Week/List, post tabs, theme): a soft track, the chosen one white with blue text */
.seg,.ptabs{background:var(--surface-2)!important;border:0!important;border-radius:12px!important;padding:4px!important;box-shadow:none!important}
.seg button,.ptabs button{border-radius:8px!important;color:var(--text-2)!important;background:transparent!important;box-shadow:none!important}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"],.seg button[aria-checked="true"],.ptabs button[aria-selected="true"],.ptabs button[aria-pressed="true"]{
  background:var(--surface)!important;color:var(--accent)!important;font-weight:600}
:root[data-theme="dark"] .seg button[aria-pressed="true"],:root[data-theme="dark"] .seg button[aria-selected="true"],:root[data-theme="dark"] .seg button[aria-checked="true"],
:root[data-theme="dark"] .ptabs button[aria-selected="true"],:root[data-theme="dark"] .ptabs button[aria-pressed="true"]{background:var(--blue-500)!important;color:var(--white)!important}
.chip2[aria-selected="true"],.chip2[aria-pressed="true"]{background:var(--accent)!important;color:var(--on-accent)!important}
.chip2{border:0!important;box-shadow:none!important}
#postDlg .seg,#postDlg .ptabs{background:var(--line)!important}

/* calendar month: the chosen day a filled circle, today a soft one */
.cell.sel .dbtn,.cell.today.sel .dbtn{background:var(--accent)!important;color:var(--on-accent)!important}
.cell.today .dbtn{background:var(--surface-2)!important;color:var(--accent)!important;font-weight:600}
.monthpill{background:var(--surface)!important;border:0!important}

/* Home: Celeste Blue header band with the seam */
#scrHome .phead,#scrHome .greet{color:var(--white)}
#scrHome .phead::before{opacity:1!important;background:var(--band)!important}
#scrHome .phead .gicon{background:var(--band-btn)!important;color:var(--white)!important}
#scrHome .phead .kcmark{width:32px;height:32px;display:block;background:none!important;padding:0;border-radius:0}
#scrHome .greet{position:relative;overflow:hidden;background:var(--band);margin:0 0 24px!important;padding:8px 0 32px}
#scrHome .greet h1{color:var(--white)!important;font-size:28px!important;line-height:36px!important}
#scrHome .greet p{color:var(--blue-100)!important;font-size:14px!important;line-height:20px;margin:0 0 4px!important}
#scrHome .greet p{order:-1}
#scrHome .greet{display:flex;flex-direction:column}
.seam,#scrHome .greet::before,#scrHome .greet::after{pointer-events:none}
/* seam: 45°, teal 500 beyond the line, an orange band 3.2% of the shorter side (measured across) */
#scrHome .greet::before,#scrHome .greet::after{content:"";position:absolute;right:0;bottom:0;width:94px;height:94px}
#scrHome .greet::before{background:var(--orange-500);clip-path:polygon(0 100%,5.5px 100%,100% 5.5px,100% 0)}
#scrHome .greet::after{background:var(--teal-500);clip-path:polygon(5.5px 100%,100% 100%,100% 5.5px)}
@media (min-width:768px){
  #scrHome .phead{color:var(--text)}
  #scrHome .phead::before{opacity:0!important}
  #scrHome .phead .gicon{background:var(--surface)!important;color:var(--accent)!important}
  #scrHome .greet{border-radius:16px;padding:24px 32px 32px}
  #scrHome .greet::before,#scrHome .greet::after{width:72px;height:72px}
  #scrHome .greet::before{clip-path:polygon(0 100%,4px 100%,100% 4px,100% 0)}
  #scrHome .greet::after{clip-path:polygon(4px 100%,100% 100%,100% 4px)}
}
@media (max-width:767px){
  /* the band runs edge to edge on phones */
  #scrHome .greet{overflow:visible;box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
  #scrHome .greet::before,#scrHome .greet::after{right:calc((100% - 100vw) / 2)}
}

/* Home: one summary row and one Upcoming list card */
.stats{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none!important;gap:0!important;
  background:var(--surface);border-radius:16px;padding:16px 0!important;margin:0 0 24px!important}
.stats .stat{background:transparent!important;border-radius:0!important;padding:0 4px!important;min-height:0!important;display:flex!important;flex-direction:column;
  align-items:center!important;justify-content:flex-start!important;gap:4px!important;text-align:center}
.stats .stat + .stat{border-left:1px solid var(--divider)!important}
.stats .stat .sico{display:none!important}
.stats .stat .snum{display:flex!important;flex-direction:column;align-items:center!important;gap:4px}
.stats .stat .snum b{font-size:24px!important;line-height:32px!important;color:var(--text)}
.stats .stat .snum span,.stats .stat span{font-size:12px!important;line-height:16px!important;color:var(--text-2)!important;text-align:center!important;font-weight:500!important}
.stats .stat.t-coral .snum b,.stats .stat.t-coral .snum span{color:var(--warn)!important;font-weight:600!important}
.stats .stat.t-amber .snum b,.stats .stat.t-amber .snum span{color:var(--warn)!important}
.stats .stat:hover{background:var(--surface-2)!important}
#upList{background:var(--surface);border-radius:16px;gap:0!important;overflow:hidden}
#upList .ccard{background:transparent!important;border-radius:0!important;margin:0!important}
#upList > * + *{border-top:1px solid var(--divider)}
#upList .swipe{border-radius:0!important}
.cthumb.ph,.cthumb.ph.ground,.cthumb.ph.Explained,.cthumb.ph.home,.cthumb.ph.evph{background:var(--surface-2)!important;color:var(--accent)!important;border-radius:10px}
.sechead h2{font-size:20px!important;line-height:28px}

/* phone tab bar: white, radius 24; the chosen tab a soft pill; the + button filled */
.mbar{background:var(--surface)!important;border:0!important;border-radius:24px!important;box-shadow:none!important}
.mbitem{color:var(--text-2)!important}
.mbitem[aria-current="page"]{background:var(--surface-2)!important;color:var(--accent)!important;border-radius:16px!important}
.mbitem[aria-current="page"] svg{color:var(--accent)!important}
.fab{background:var(--fab-bg)!important;color:var(--fab-fg)!important;box-shadow:none!important;border:0!important}
:root[data-theme="dark"] .mbar{background:var(--blue-700)!important}
:root[data-theme="dark"] .mbitem[aria-current="page"]{background:var(--ink)!important;color:var(--teal-200)!important}
:root[data-theme="dark"] .mbitem[aria-current="page"] svg{color:var(--teal-200)!important}

/* computer sidebar: white, the chosen item a soft pill */
.sidenav{background:var(--surface)!important;border:0!important;box-shadow:none!important}
.snitem[aria-current="page"]{background:var(--surface-2)!important;color:var(--accent)!important}
.snitem[aria-current="page"] svg{color:var(--accent)!important}
.sntitle{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:900}

/* the post window */
#postDlg .phdr{background:var(--surface)!important;border:0!important;box-shadow:none!important}
#postDlg .pactions{background:var(--surface)!important;border:0!important}
#postDlg .phdr .gicon{background:var(--surface-2)!important;color:var(--text)!important}
.savebtn,.glassbtn{background:var(--surface-2)!important;color:var(--accent)!important;border:0!important;box-shadow:none!important}
/* progress steps: 16 px dots, the current one filled with a soft ring */
.stepper li::before{top:7px!important;background:var(--line)!important}
.stepper li.done::before,.stepper li.now::before{background:var(--accent)!important}
.stepper i{width:16px!important;height:16px!important;box-sizing:border-box;border:2px solid var(--blue-300)!important;background:var(--surface)!important;box-shadow:none!important}
.stepper li.done i{background:var(--accent)!important;border-color:var(--accent)!important}
.stepper li.now i{background:var(--accent)!important;border:3px solid var(--line)!important}
.stepper li{font-size:12px!important;font-weight:600}
.stepper li.now span{color:var(--accent)!important}

/* sign-in: white page, the logo, the seam in the corner */
#gate{background:var(--surface)!important}
#gate .gbox{background:transparent!important;border:0!important;box-shadow:none!important}
#gate .gbrand{width:240px;max-width:72%;height:auto;display:block;margin:0 auto 32px}
#gate .glogo{justify-content:center;text-align:center}
#gate .glogo b{font-size:24px!important;line-height:32px;color:var(--text)!important}
#gate .glogo small{color:var(--text-2)!important}
#gate .gbtn{min-height:48px;border:0!important;background:var(--surface-2)!important;color:var(--accent)!important;font-weight:600}
#gate .gbtn.primary{background:var(--accent)!important;color:var(--on-accent)!important}
#gate input{background:var(--surface-2)!important;border:1.5px solid var(--line)!important;border-radius:12px!important;min-height:48px;color:var(--text)!important}
#gate .gfine{color:var(--text-2)!important;max-width:256px;margin-left:auto;margin-right:auto;padding-bottom:48px}
#gate .seam{position:fixed;right:0;bottom:0;width:min(28vmin,140px);aspect-ratio:1;z-index:0}
#gate .seam::before,#gate .seam::after{content:"";position:absolute;inset:0}
#gate .seam::before{background:var(--orange-500);clip-path:polygon(0 100%,3.2vmin 100%,100% 3.2vmin,100% 0)}
#gate .seam::after{background:var(--teal-500);clip-path:polygon(3.2vmin 100%,100% 100%,100% 3.2vmin)}
#gate .gbox{position:relative;z-index:1}
:root[data-theme="dark"] #gate{background:var(--page)!important}
:root[data-theme="dark"] #gate .gbrand,:root[data-theme="dark"] .lkbrand{content:url(/brand/kazel-wordmark-on-navy.svg)}
:root[data-theme="dark"] #gate .gbtn{background:var(--blue-700)!important;color:var(--teal-200)!important}
:root[data-theme="dark"] #gate .gbtn.primary{background:var(--teal-200)!important;color:var(--ink)!important}
:root[data-theme="dark"] #gate input{background:var(--blue-700)!important}
.lkbrand{width:240px;max-width:72%;height:auto}
.fbpick .fbthumb.dragging{box-shadow:none!important;outline:2px solid var(--accent)}
/* Home band: header and greeting read as one block */
#scrHome .phead{margin:0!important;padding:8px 0}
#scrHome .phead::before{top:-200px!important;bottom:0!important}
#scrHome .greet{margin-top:0!important}
.stats .stat > *,.stats .stat .snum > *{align-self:center!important;text-align:center!important}
/* your photo / initials button in each header */
.avbtn{padding:0!important;overflow:hidden;background:var(--blue-100)!important;display:inline-grid;place-items:center}
.avbtn > span{display:contents}
.avbtn .avatar{width:100%!important;height:100%!important;margin:0!important;font-size:13px}
.avbtn .avatar.ini{background:var(--blue-100)!important;color:var(--blue-500)!important;font-family:"Barlow",sans-serif;font-weight:600}
#stats .stat .snum{width:100%;align-items:center!important}
#stats .stat .snum b,#stats .stat .snum span{align-self:center!important;text-align:center!important}
@media (min-width:768px){#scrHome .phead .brand{visibility:hidden}}   /* the sidebar already shows the logo; the reversed icon is for blue only */
/* the old glass edge highlight */
.stat::before,.ready::before,.cal::before,.wcol::before,.guide::before,.panel::before,.drivebox::before,.apbar::before,
.tform::before,.hform::before,.iform::before,.revise::before,.archtoggle::before,.notice::before,.seg::before,select.pill::before,
.btn::before,.ritem::before,.gcard::before,.gtips::before,.gtopics::before,.hitem::before,.nitem::before,.cbody::before,.wcard::before,
dialog::before,.menu::before,.hmenu::before{display:none!important}
/* Event cards everywhere (Kazel, Nov 10: Event tag centred in the card, level with the ⋯ button; first on Home, then the
   Calendar day list). Home list rows (Kazel, Nov 10: tags off centre): every row solid, so the swipe-to-delete layer never shows through,
   and the Event tag sits in the middle of its row like the post tags */
html #upList .ccard,html #upList .swipe .ccard,html #upList .ccard.ev{background:var(--surface)!important}
html .ccard.compact.ev .cbody2,html .ccard.ev .cbody2{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
html .ccard.compact.ev .evhead,html .ccard.ev .evhead{display:contents!important}
html .ccard.compact.ev .evhead .ctitle,html .ccard.ev .evhead .ctitle{grid-column:1;grid-row:1}
html .ccard.compact.ev .evhead .badge,html .ccard.ev .evhead .badge{grid-column:2;grid-row:1 / span 2;align-self:center}
html .ccard.compact.ev .crow,html .ccard.ev .crow{grid-column:1;grid-row:2}
@media (min-width:1100px){#upList{display:flex!important;flex-direction:column}}   /* Home: one list on wide screens too */
/* windows never slide sideways (Kazel, Nov 10: the event window moved left and right on iPhone).
   iPhone Safari gives date and time boxes a fixed minimum width that can be wider than the window;
   let them shrink like any other box, and stop windows from scrolling sideways at all. */
dialog{overflow-x:hidden!important;overscroll-behavior-x:none}
dialog input,dialog select,dialog textarea{max-width:100%;min-width:0}
input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
#evDlg input[type=date],#evDlg input[type=time],#holDlg input[type=date]{display:block;width:100%;text-align:left}
/* event and reschedule windows: their boxes sit straight on the window, so make them white to stand out */
#evDlg :is(input,select,textarea),#rsDlg :is(input,select,textarea){background:var(--surface)!important;border:1.5px solid var(--line)!important;border-radius:12px}
dialog [data-close]:focus-visible{outline-color:var(--line)}
/* event window: Reschedule is a real button next to Save changes (Kazel, Nov 10) */
#evDlg .actions .btn{min-height:44px;padding:0 18px;font-size:15px}
#evDlg .actions .btn:not(.primary):not(.danger){background:var(--surface)!important;color:var(--accent)!important}
#evDlg .actions .btn.danger{background:transparent!important}
/* AI Assist panel (now right under the caption): a white card, its boxes and quick changes in soft blue */
.aipanel{background:var(--surface)!important;border:0!important;border-radius:16px!important;padding:16px!important;margin-top:8px!important}
.aipanel :is(input,textarea,select){background:var(--surface-2)!important;border:1.5px solid var(--line)!important;border-radius:12px}
.aipanel .aiextras .btn:not(.primary),.aipanel .aiextras button:not(.primary){background:var(--surface-2)!important;color:var(--accent)!important;border:0!important}
.airow{border:0!important;background:var(--surface)!important}
.airow[aria-expanded="true"]{border-color:transparent}
/* ---------- Approve and publish pop-up + the Facebook line on approved posts (Kazel, Nov 10) ---------- */
.pubsheet .pubbody{display:flex;flex-direction:column;gap:16px;padding:0 16px 24px}
.pubsheet .pubmedia{display:flex;align-items:center;gap:8px}
.pubsheet .pubthumb{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--surface-2);flex:0 0 auto}
.pubsheet .pubthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pubsheet .pubwhat{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px;color:var(--text-2);margin-left:4px}
.pubsheet .pubwhat .linkbtn{padding:0;font-size:13px;font-weight:600;text-align:left}
.pubsheet .pubpicker{display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:16px;padding:12px}
.pubsheet .pubpage{display:flex;align-items:center;gap:8px;font-size:14px}
.pubsheet .pubseg{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
.pubsheet .pubseg button{min-height:36px;padding:0 4px}
.pubsheet .hrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pubsheet .hrow2 .tl{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.pubsheet .hrow2 input{width:100%;min-height:48px;padding:0 12px;background:var(--surface)!important;border:1.5px solid var(--line)!important;border-radius:12px;font-size:16px;color:var(--text)}
.pubsheet .pubhint{margin:-8px 0 0;font-size:12px;line-height:17px}
.pubsheet .pubwarn{margin:-8px 0 0;font-size:12px;color:var(--warn);font-weight:600}
.pubsheet .pubmsg{margin:-8px 0 0;color:var(--warn)}
.pubsheet #pubGo{width:100%;min-height:52px;justify-content:center;font-size:16px}
.pubsheet .pubcancel{align-self:center;font-weight:600}
.pubsheet .pubnote{margin:0;background:var(--surface);border-radius:12px;padding:12px;font-size:12px;line-height:17px;color:var(--text-2)}
.pubsheet .fbsched{background:var(--surface)!important;border-radius:16px!important}
.pubsheet .fbsched input{background:var(--surface-2)!important;border:1.5px solid var(--line)!important;border-radius:12px}
.fbrow{display:flex!important;align-items:center;gap:12px;padding:12px 16px!important}
.fbrow > svg{flex:0 0 auto}
.fbrow .fbrowtext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fbrow .fbrowtext b{font-size:15px;font-weight:600;color:var(--text)}
.fbrow .fbrowtext small{font-size:12px;line-height:16px;color:var(--text-2)}
.fbrow.warn .fbrowtext b{color:var(--warn)}
.fbrow #fbRowBtn{flex:0 0 auto;min-height:36px}
.pubsheet .pubseg button{white-space:nowrap;font-size:13px!important}
.pubsheet .hrow2 input{box-sizing:border-box;max-width:100%}
.pubsheet .phdr{display:flex;align-items:center;gap:12px;padding:16px!important}
@media (max-width:767px){
  /* phones: the pop-up rises from the bottom, like the mockup */
  dialog#pubSheet{margin:auto 0 0!important;width:100%!important;max-width:100%!important;max-height:92vh;border-radius:24px 24px 0 0!important;padding-bottom:env(safe-area-inset-bottom,0px)}
}
#postDlg .pactions .pabtns{flex-wrap:wrap}
#postDlg .pactions .pabtns .btn.big{flex:1 1 100%;order:-1}
#postDlg .pactions .pabtns .btn.glassbtn{flex:1 1 0;min-width:0}
#postDlg .pactions .pabtns .wide1{flex:1 1 100%}
.pubsheet .fbsched input{box-sizing:border-box;width:100%;min-width:0}
.pubsheet .fbsched .hrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pubsheet .fbsched .hrow2 .tl{min-width:0;display:flex;flex-direction:column;gap:6px}
.pubsheet .fbsched{overflow:hidden}

/* ---------- Calendar like the approved mockup (Kazel, Nov 10): logo beside the title; month, view switch and days in one card ---------- */
.phead .phicon{width:32px;height:32px;flex:0 0 auto;display:block}
.phead .phicon + h1{flex:1 1 auto}
#scrCal #filters{background:var(--surface);border-radius:16px 16px 0 0;padding:16px 16px 8px;margin:0!important;gap:8px!important;justify-content:space-between!important}
#scrCal #filters .navbtn{width:32px!important;height:32px!important;min-height:32px!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--accent)!important}
#scrCal #filters .monthpill{background:transparent!important;height:auto!important;flex:1 1 auto!important;padding:0!important}
#scrCal #filters .monthpill select{font-family:"Barlow Semi Condensed","Barlow",sans-serif!important;font-weight:900!important;font-size:18px!important;color:var(--text)!important}
#scrCal #board > .hrow:first-child{background:var(--surface);margin:0!important;padding:0 16px 8px;border-radius:0}
#scrCal #board > .hrow:first-child .seg{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
#scrCal #board > .hrow + .cal{border-radius:0 0 16px 16px!important;margin-top:0!important;padding-top:8px!important}
#scrCal #board > .hrow:first-child:not(:has(+ .cal)){border-radius:0 0 16px 16px;padding-bottom:16px;margin-bottom:16px!important}
#scrCal #board > .weeknav:first-child{background:var(--surface);border-radius:0 0 16px 16px;padding:0 16px 16px;margin:0 0 16px!important}
.cal .dow .dows{display:none}
.cal .dow{font-size:12px;font-weight:600;color:var(--text-2)}
@media (max-width:767px){.cal .dow .dowl{display:none}.cal .dow .dows{display:inline}}
#scrCal .monthpill{gap:6px!important}
#scrCal #fMonth{text-align:right!important;text-align-last:right!important}
#scrCal #fYear{text-align:left!important;text-align-last:left!important}
#scrCal #board > .weeknav .seg{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));order:-1;margin-bottom:8px}
#scrCal #board > .weeknav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#scrCal #board > .weeknav h2{flex:1 1 100%;margin:4px 0 0;font-size:18px!important}
/* dark mode: let the phone draw its own controls (dropdowns, date pickers) dark too (Kazel, Nov 10: "Add an editor" was a light box) */
:root[data-theme="dark"],:root[data-theme="dark"] body{color-scheme:dark!important}
/* Publishing: the "Add an editor" picker sits on the window itself, so it is a solid box like the other fields */
#pubBody select{background-color:var(--surface)!important;color:var(--text)!important;border:1.5px solid var(--line)!important;border-radius:12px!important;min-height:44px;padding:0 12px;font-size:16px}
#pubBody > label.f input,#pubBody > label.f select{background-color:var(--surface)!important;color:var(--text)!important;border:1.5px solid var(--line)!important;border-radius:12px!important;min-height:44px}

/* ---------- odometer numbers on the Home summary (Kazel, Nov 10): only the number's own text, no boxes, lines or fades ---------- */
.odo{font-variant-numeric:tabular-nums;white-space:pre}
.odo .od-face{display:inline-flex;align-items:flex-start;justify-content:center}
.odo i{font-style:normal}
.odo .od-c,.odo .od-x{display:block}
.odo .od-c{position:relative;width:1ch;text-align:center;overflow:hidden}
.odo .od-keep{visibility:hidden;display:block}
.odo .od-col{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;will-change:transform}
.odo .od-d{display:block;text-align:center}

/* ---------- Calendar List view: one timeline, day by day (Kazel, Nov 10) ---------- */
#scrCal .tl{display:flex;flex-direction:column;gap:16px;margin-top:16px}
#scrCal .tlmore{align-self:center;font-size:13px;font-weight:600;color:var(--accent);padding:4px 8px}
#scrCal .tlday{display:flex;flex-direction:column;gap:8px}
#scrCal .tlhead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 8px}
#scrCal .tlhead b{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:900;font-size:16px;line-height:22px;color:var(--text)}
#scrCal .tltoday{font-size:11px;line-height:16px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
#scrCal .tlhol{font-size:12px;line-height:16px;font-weight:600;color:var(--ok)}
#scrCal .tlhol.hol-s{color:var(--text-2)}
#scrCal .tlcard{background:var(--surface);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
#scrCal .tlrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;border:0;background:transparent;text-align:left;color:var(--text);cursor:pointer;font:inherit}
#scrCal .tlrow + .tlrow{border-top:1px solid var(--divider)}
#scrCal .tlrow:hover{background:var(--surface-2)}
#scrCal .tltime{width:56px;flex:0 0 auto;font-size:12px;line-height:16px;font-weight:600;color:var(--accent);display:flex;align-items:center}
#scrCal .tltime .cthumb{width:40px;height:40px;border-radius:10px;object-fit:cover;display:grid;place-items:center}
#scrCal .tlbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#scrCal .tlbody b{font-size:14px;line-height:20px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
#scrCal .tlbody small{font-size:13px;line-height:18px;color:var(--text-2)}
#scrCal .tlbody .tlplan{font-size:12px;color:var(--accent);font-weight:600}
#scrCal .tldue.soon{color:var(--accent);font-weight:600}
#scrCal .tldue.late{color:var(--warn);font-weight:600}
#scrCal .tlrow .badge{flex:0 0 auto}
#scrCal .tlbody small .fbbadge{font-size:11px;padding:1px 6px;margin-left:2px}
#scrCal .tl .tlrow{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important}
#scrCal .tl .tlrow > *{margin:0!important}
#scrCal .tl .tlrow .badge{width:auto!important;align-self:center!important;display:inline-block}
#scrCal .tl .tlmore{text-decoration:none!important}

/* ---------- Month / Week / List: one highlight that springs to the chosen view (Kazel, Nov 10) ---------- */
#viewSeg{position:relative}
#viewSeg .segpill{position:absolute;z-index:0;border-radius:8px;background:var(--surface);opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:transform}
:root[data-theme="dark"] #viewSeg .segpill{background:var(--blue-500)}
#viewSeg button{position:relative;z-index:1;background:transparent!important;transition:color .25s ease}
#viewSeg button[aria-pressed="true"]{color:var(--accent)!important}
:root[data-theme="dark"] #viewSeg button[aria-pressed="true"]{color:var(--white)!important}
@media (prefers-reduced-motion: reduce){#viewSeg button{transition:none}}

/* Hold and drag to reschedule (Kazel, Nov 10 2026; ui/dragmove.js): a card in the day list under the month lifts after a
   hold and can be dropped on another day. Flat: a teal ring, no shadows. */
#dayList .ccard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#dayList .ccard.dm-press{transform:scale(.98);transition:transform .2s ease}
#dayList .ccard.dm-lifted{opacity:.3}
.dm-ghost{position:fixed;left:0;top:0;z-index:1200;pointer-events:none;will-change:transform}
.dm-ghost{width:0;height:0}
.dm-ghost>.ccard{position:absolute;left:0;top:0;outline:2px solid var(--teal-500);outline-offset:0;border-radius:16px;margin:0;background:var(--surface);
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s ease}
@media (prefers-reduced-motion: reduce){.dm-ghost>.ccard{transition:none}}
html.dm-on,html.dm-on *{cursor:grabbing!important}
html.dm-on #board .cal .cell[data-date]:not(.dm-past){outline:1px dashed color-mix(in srgb,var(--text-2) 50%,transparent);outline-offset:-3px}
html.dm-on #board .cal .cell.dm-past{opacity:.45}
#board .cal .cell.dm-over{background:var(--teal-200)!important;color:var(--ink)!important;outline:2px solid var(--teal-500)!important;outline-offset:-2px}
#board .cal .cell.dm-over *{color:var(--ink)!important}
#board .cal .cell.dm-no{background:color-mix(in srgb,var(--warn) 18%,transparent)!important}
.dm-tag{position:fixed;z-index:1201;pointer-events:none;transform:translate(-50%,-100%);background:var(--ink);color:var(--white);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;white-space:nowrap}
:root[data-theme="dark"] .dm-tag{background:var(--white);color:var(--ink)}
.dm-tag.no{background:var(--red-600);color:var(--white)}
.dm-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:1150;width:min(440px,calc(100vw - 24px));
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--white);font-size:14px;line-height:1.4}
.dm-toast span{flex:1;min-width:0}
.dm-toast .linkbtn{color:var(--teal-200);font-weight:700;flex:none}
:root[data-theme="dark"] .dm-toast{background:var(--white);color:var(--ink)}
:root[data-theme="dark"] .dm-toast .linkbtn{color:var(--blue-500)}
@media (min-width:768px){.dm-toast{bottom:24px}}

/* Videos in the post window (Kazel, Nov 10): a rounded tile like the photos (clipped by the tile, so iPhones show no
   square corners), the video's picture or first frame, and a play button; tap = play full screen. */
.gallery .gview.vtile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:14px;background:var(--ink);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.gallery .vtile img,.gallery .vtile video{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;border-radius:0!important;background:var(--ink)!important;pointer-events:none}
.gallery .vtile .vplay{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 72%,transparent);color:var(--white);outline:1.5px solid color-mix(in srgb,var(--white) 70%,transparent);outline-offset:-1.5px}
.gallery .vtile .vplay svg{margin-left:3px}
/* moving video thumbnails (Kazel, Nov 10): the box takes the thumbnail's size and rounding; the video fills it */
.vthumb{position:relative;display:inline-block;flex:0 0 auto;overflow:hidden;background:var(--ink);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);vertical-align:middle}
.vthumb > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:var(--ink);display:block}
.vthumb .vbadge{position:absolute;left:4px;bottom:4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 70%,transparent);color:var(--white);pointer-events:none}
.vthumb .vbadge svg{width:8px;height:8px;margin-left:1px}
.wcard .vthumb{display:block;width:100%;aspect-ratio:4/3;border-radius:8px}
@media (max-width:860px){.wcard .vthumb{aspect-ratio:16/9}}
.pubthumb .vthumb{display:block;width:100%;height:100%}
.gallery .vtile .vthumb{position:absolute;inset:0;border-radius:0}
/* Home summary: Due Soon number and words in brand yellow, the same in light and dark, no box (Kazel, Nov 10;
   her exception to "no orange text"), like Overdue in red */
html .stats .stat.t-blue .snum b,html .stats .stat.t-blue .snum span{color:var(--orange-500)!important;font-weight:600!important}
/* ---------- Hover (Kazel, Nov 10: idea 11 "things you can click answer your mouse"; computers only) ----------
   Soft rounded highlights that fade in, links that underline, arrows and icons that nudge, rows that lift with a soft shadow
   and a tilting picture, buttons that rise 1px. Phones (no hover) and Reduce Motion: no movement. */
@media (hover:hover) and (pointer:fine){
  /* Home summary: a rounded highlight instead of a square dark box; the number lifts; dividers beside it step aside */
  html .stats .stat{border-radius:12px!important;transition:background-color .2s ease,border-color .2s ease,transform .12s ease!important}
  html .stats .stat:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
  html .stats .stat:hover,html .stats .stat:hover + .stat{border-left-color:transparent!important}
  /* 1. Home numbers rise slowly (Kazel, Nov 10): only the big number moves, 16px up over 1.1s, and drifts back */
  html .stats .stat .snum b{transition:translate var(--rise-dur) var(--rise-ease);will-change:translate}
  html .stats .stat:hover .snum b{translate:0 -16px}
  /* links: the underline fades in under the words; the › arrow slides forward */
  html .linkbtn{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;
    transition:text-decoration-color .2s ease,text-underline-offset .25s cubic-bezier(.22,1,.36,1),color .2s ease}
  html .linkbtn:hover{text-decoration-color:currentColor;text-underline-offset:3px}
  html .linkbtn span[aria-hidden="true"],html .archtoggle .achev{display:inline-block;transition:translate .25s cubic-bezier(.22,1,.36,1)}
  html .linkbtn:hover span[aria-hidden="true"],html .archtoggle:hover .achev{translate:3px 0}
  /* 2. side menu (Kazel, Nov 10): the whole item, icon and words, slides 5px right in 0.2s; the highlight fades in */
  /* (Nov 10, Kazel: "too quick and not smooth") the item itself stays put, so it never slides out from under the
     mouse and flickers; its icon, words and count glide 5px right, slower, with a soft landing; the highlight fades in */
  html .snitem{transition:background-color .3s ease,color .3s ease,transform .12s ease}
  html .snitem > *{transition:translate var(--slide-dur) var(--slide-ease),opacity .18s ease}
  html .snitem:hover > *{translate:5px 0}
  /* 3. content lists, layered depth (Kazel, Nov 10): the row lifts 3px with a soft shadow, its picture grows to 1.13x
     and tilts 3deg on its own, 0.3s. A swipe row lifts as a whole (the Delete layer behind never peeks out). Grouped
     lists (Home Upcoming, Calendar list) let a lifted row out of the group and round its corners, so nothing is cut off. */
  html .swipe,html :not(.swipe) > .ccard,html .ritem,html .wcard,html .tlrow,html .rowhead{position:relative;
    transition:translate var(--depth-dur) var(--depth-ease),box-shadow var(--depth-dur) var(--depth-ease),border-radius var(--depth-dur) var(--depth-ease),background-color .2s ease}
  html .swipe:hover,html :not(.swipe) > .ccard:hover,html .ritem:hover,html .wcard:hover,html .tlrow:hover,html .rowhead:hover{
    translate:0 -3px;box-shadow:var(--lift-shadow)!important;z-index:2}
  html .swipe > .ccard{box-shadow:none!important}
  html :is(.ccard,.ritem,.wcard,.tlrow,.rowhead) :is(.cthumb,.rthumb,img,.vthumb){transition:transform var(--depth-dur) var(--depth-ease)}
  html :is(.swipe,.ccard,.ritem,.wcard,.tlrow,.rowhead):hover :is(.cthumb,.rthumb,.wcard img,.wcard .vthumb){transform:scale(1.13) rotate(3deg)}
  html #upList,html #scrCal .tlcard{overflow:visible!important}
  html #upList > :first-child,html #upList > .swipe:first-child > .ccard,html #scrCal .tlcard > :first-child{border-top-left-radius:16px!important;border-top-right-radius:16px!important}
  html #upList > :last-child,html #upList > .swipe:last-child > .ccard,html #scrCal .tlcard > :last-child{border-bottom-left-radius:16px!important;border-bottom-right-radius:16px!important}
  html #upList > :hover,html #scrCal .tlcard > :hover,html #upList > .swipe:hover > .ccard{border-radius:16px!important}
  html .archtoggle,html .chip2,html .gicon{transition:background-color .2s ease,color .2s ease,transform .12s ease}
  /* buttons rise 1px (the press dip still works) */
  html .btn:not(:disabled){transition:background-color .2s ease,color .2s ease,translate .2s cubic-bezier(.22,1,.36,1),transform .12s ease}
  html .btn:not(:disabled):hover{translate:0 -1px}
}
@media (prefers-reduced-motion: reduce){
  html .stats .stat:hover .snum b,html .linkbtn:hover span[aria-hidden="true"],html .archtoggle:hover .achev,html .snitem:hover > *,
  html .swipe:hover,html .ccard:hover,html .ritem:hover,html .wcard:hover,html .tlrow:hover,html .rowhead:hover,html .btn:hover{translate:none!important}
  html :is(.swipe,.ccard,.ritem,.wcard,.tlrow,.rowhead):hover :is(.cthumb,.rthumb,img,video){transform:none!important}
}
/* summary dividers drawn as short lines (the rounded hover would bend a border); they hide next to the highlight */
html .stats .stat{position:relative}
html .stats .stat + .stat{border-left:0!important}
html .stats .stat + .stat::after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--divider);transition:opacity .2s ease;pointer-events:none}
html .stats .stat:hover::after,html .stats .stat:hover + .stat::after{opacity:0}
/* ---------- Sidebar (Kazel, Nov 10): New post on top; Work / Create / Manage; your own settings under your name ---------- */
.snnew{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:44px;margin:0 4px 4px;padding:0 14px;border:0;border-radius:12px;
  background:var(--fab-bg);color:var(--fab-fg);font:600 14px/1 "Barlow",system-ui,sans-serif;cursor:pointer;transition:background-color .2s ease,translate .2s cubic-bezier(.22,1,.36,1),transform .12s ease}
.snnew[hidden]{display:none}
.snnew svg{flex:none}
.snnew:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.snnew:hover{translate:0 -1px}}
.snfoot{position:relative}
.snmenu{list-style:none;margin:0 0 6px;padding:6px;border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.snmenu[hidden]{display:none}
.snmenu li{list-style:none}
button.snme{width:100%;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:12px;transition:background-color .2s ease}
button.snme:hover,button.snme[aria-expanded="true"]{background:var(--surface-2)}
button.snme .who{flex:1 1 auto}
.snchev{display:grid;place-items:center;color:var(--text-2);flex:none;margin-left:auto;transition:transform .25s cubic-bezier(.22,1,.36,1)}
button.snme[aria-expanded="true"] .snchev{transform:rotate(180deg)}
@media (min-width:768px){
  .nav-collapsed .snnew{padding:0;margin:0 0 4px}
  .nav-collapsed .snnew .snlbl,.nav-collapsed .snchev{display:none}
  .nav-collapsed button.snme{justify-content:center}
}
@media (prefers-reduced-motion: reduce){.snchev,.snnew{transition:none}}
/* the new-comment banner steps aside while the phone menu is open (it would cover your settings at the bottom) */
.nav-open .cbanner{visibility:hidden}
/* the Home summary highlight is rounded and soft on every device (iPad / touch laptops too), not only with a mouse */
html .stats .stat{border-radius:12px!important;transition:background-color .2s ease,transform .12s ease!important}
html .stats .stat:hover,html .stats .stat:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
html .stats .stat:hover::after,html .stats .stat:hover + .stat::after{opacity:0}
/* drawer (Kazel, Nov 10: "the slide to the side bar isn't smooth and glitching"): on phones the menu is one GPU layer;
   while it slides (nav-moving) nothing inside it scrolls, so the iPhone can't draw its words a step behind the panel */
@media (max-width:767px){
  .sidenav{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;contain:layout paint}
  .nav-moving .sidenav,.nav-moving .sidenav .snlist{overflow:hidden!important}
  .nav-open .sidenav{transform:translate3d(0,0,0)}
}

/* Lines between rows in grouped lists (Home Upcoming, Calendar list), Kazel, Nov 10: softer and inset from the edges,
   and they fade away around the row under the mouse */
#upList > * + *,#scrCal .tlrow + .tlrow{border-top:0!important;position:relative}
#upList > * + *::before,#scrCal .tlrow + .tlrow::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:var(--divider-soft);pointer-events:none;z-index:3;transition:opacity .3s ease}
#upList > :hover::before,#upList > :hover + *::before,#scrCal .tlrow:hover::before,#scrCal .tlrow:hover + .tlrow::before{opacity:0}
/* Assign to: a dropdown of the team, styled like the other right-hand values in the post form (Kazel, Nov 10) */
.arow .asel{position:relative;flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center}
.arow .asel select{-webkit-appearance:none;appearance:none;max-width:100%;border:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--text)!important;font:inherit;font-size:16px!important;text-align:right;text-align-last:right;padding:6px 22px 6px 4px!important;cursor:pointer;min-height:44px}
.arow .asel select:disabled{cursor:default;color:var(--text-2)!important}
.arow .asel select:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px;border-radius:8px}
.arow .asel-chev{position:absolute;right:2px;top:50%;transform:translateY(-62%);color:var(--text-2);pointer-events:none;font-size:16px;line-height:1}
.arow{cursor:pointer}
/* ---------- The new Home (Kazel, Nov 10; ui/home.js): Quick actions, For you, Facebook queue, Next 14 days, Upcoming,
   arranged by each person like widgets (Edit Home / press and hold) and saved to their account ---------- */
.heditbar{display:flex;justify-content:flex-end;margin:4px 0 -4px;min-height:32px}
.hw{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.hw{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.hw > [data-w="days"],.hw > [data-w="quick"]{grid-column:1 / -1}}
.hw > .w{position:relative;margin:0!important;min-width:0}
.hw .sechead h2{display:flex;align-items:center;gap:8px}
.hcount{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--orange-500);color:var(--ink);font:700 12px/1 "Barlow",system-ui,sans-serif}
.hlist{background:var(--surface);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.hrow2{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hlist > .hrow2 + .hrow2::before,.hlist > .hacts + .hrow2::before,.hlist > .hsub + .hrow2::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--divider-soft)}
.hlist > .hsub + .hrow2::before{display:none}
.hrow2 .cthumb{width:48px!important;height:48px!important;border-radius:12px!important;flex:none}
.hrtx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.hrtx b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrtx small{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hchip{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--chip-draft-bg);color:var(--chip-draft-fg)}
.hchip.review{background:var(--orange-500);color:var(--ink)}
.hacts{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px 76px;margin-top:-4px}
.hsub{margin:0;padding:12px 16px 2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.hempty{margin:0;padding:14px 16px;color:var(--text-2);font-size:14px}
.hfb{width:28px;height:28px;flex:none;display:grid;place-items:center}
.hfail{background:color-mix(in srgb,var(--warn) 12%,var(--surface));cursor:default}
.hfail .hrtx small{color:var(--warn);font-weight:600}
.hwhen{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-size:13px;color:var(--text-2);line-height:1.3}
.hwhen b{color:var(--text);font-size:14px}
/* quick actions */
.hqa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (min-width:1100px){.hqa{grid-template-columns:repeat(8,minmax(0,1fr))}}
.qbtn{position:relative;border:0;background:var(--surface);color:var(--text);border-radius:16px;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12.5px/1.2 "Barlow",system-ui,sans-serif;text-align:center;cursor:pointer}
.qbtn i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.qbtn i svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qbtn.main i{background:var(--fab-bg);color:var(--fab-fg)}
.qbtn.add{background:transparent;border:1.5px dashed color-mix(in srgb,var(--text-2) 55%,transparent);color:var(--text-2)}
.qbtn.add i{background:transparent;color:var(--text-2)}
.qx{position:absolute;top:-6px;right:-4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--warn);color:var(--white);font:700 16px/1 "Barlow",system-ui,sans-serif;z-index:4;cursor:pointer}
.hpick{margin-top:10px;background:var(--surface);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.hpick b{font-size:14px}
.hpickopts{display:flex;flex-wrap:wrap;gap:8px}
.hpickopts button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:8px 12px;font:600 13px "Barlow",system-ui,sans-serif;cursor:pointer}
.hpickopts svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* next 14 days */
.hdays{background:var(--surface);border-radius:16px;padding:12px 8px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
@media (min-width:1100px){.hdays{grid-template-columns:repeat(14,minmax(0,1fr))}}
.hday{border:0;background:transparent;color:var(--text);border-radius:12px;padding:6px 0 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;cursor:pointer}
.hday small{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.hday b{font-size:15px;font-weight:600;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.hday.today b{background:var(--accent);color:var(--on-accent)}
.hdots{display:flex;gap:3px;align-items:center;min-height:18px}
.hdots i,.hkey i{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--gray)}
.hdots i.k-sched,.hkey i.k-sched,.hdots i.k-posted{background:var(--teal-700)}
:root[data-theme="dark"] :is(.hdots,.hkey) i.k-sched,:root[data-theme="dark"] .hdots i.k-posted{background:var(--teal-200)}
.hdots i.k-event,.hkey i.k-event{background:var(--blue-300)}
.hplus{width:18px;height:18px;border:1.5px dashed color-mix(in srgb,var(--text-2) 60%,transparent);border-radius:6px;display:inline-grid;place-items:center;color:var(--text-2);font-size:12px;line-height:1}
.hkey{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12px;color:var(--text-2)}
.hkey > span{display:inline-flex;align-items:center;gap:6px}
.hkey .hplus{width:14px;height:14px;font-size:10px}
/* arranging (Edit Home): cards wiggle, a handle and − appear; shortcuts can be removed, added and dragged */
.wtools{display:none}
.hedit .wtools{display:block}
.hedit .hw > .w{outline:1.5px dashed color-mix(in srgb,var(--text-2) 55%,transparent);outline-offset:6px;border-radius:18px;animation:hwig .5s ease-in-out infinite alternate;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.hedit .hw > .w:nth-child(2n){animation-delay:-.25s}
@keyframes hwig{from{rotate:-.3deg}to{rotate:.3deg}}
.hedit .hw > .w > :not(.wtools){pointer-events:none}
.hedit .hw > [data-w="quick"] > .hqa,.hedit .hw > [data-w="quick"] > .hpick{pointer-events:auto}
.hedit .hqa .qbtn[data-qid]{animation:hwig .45s ease-in-out infinite alternate;cursor:grab;touch-action:none}
.wgrip{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:44px;height:20px;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--text-2);font-size:12px;z-index:3;pointer-events:none}
.whide{position:absolute;top:-12px;right:-8px;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ink);color:var(--white);font:700 18px/1 "Barlow",system-ui,sans-serif;cursor:pointer;z-index:3}
:root[data-theme="dark"] .whide{background:var(--white);color:var(--ink)}
.w.lift,.qbtn.lift{animation:none!important;z-index:20;opacity:.95;rotate:1.2deg}
.hhidden{margin-top:16px}
.hhidden h2{font-size:18px;margin:0 0 8px}
.hhid{display:flex;flex-wrap:wrap;gap:8px}
.hhid button{border:1.5px dashed var(--line);background:transparent;color:var(--text);border-radius:999px;padding:8px 14px;font:600 13px "Barlow",system-ui,sans-serif;cursor:pointer}
@media (prefers-reduced-motion: reduce){.hedit .hw > .w,.hedit .hqa .qbtn{animation:none}}
@media (min-width:1100px){.hw{grid-auto-flow:row dense}}
.hedit .hw > .w > .sechead{padding-right:34px}
/* phone tab bar: icons only, the chosen tab opens into a pill with its name, which springs open (Kazel approved
   artifact BZDUgUE9gTyBmNox1TwugL, Nov 11). Two groups keep the + in the middle while the tabs grow and shrink. */
:root{--tab-spring:cubic-bezier(.34,1.36,.64,1)}
@media (min-width:768px){.mbgrp{display:contents}}
@media (max-width:767px){
  html .mbar{display:flex!important;align-items:center}
  .mbgrp{flex:1;display:flex;align-items:center;justify-content:space-evenly;min-width:0}
  html .mbar .fab{flex:none}
  html .mbitem{flex:none;flex-direction:row!important;gap:0!important;height:46px;padding:0 9px!important;border-radius:999px!important;
    background:transparent!important;color:var(--text-2)!important;font:600 12.5px/1 "Barlow",system-ui,sans-serif!important;white-space:nowrap;
    transition:background-color .35s ease,color .25s ease,padding .5s var(--tab-spring),gap .5s var(--tab-spring),transform .12s ease!important}
  html .mbitem svg{flex:none;width:22px;height:22px;color:inherit!important}
  .mbitem .lb{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .5s var(--tab-spring),opacity .2s ease}
  html .mbitem[aria-current="page"]{background:var(--blue-100)!important;color:var(--accent)!important;padding:0 12px 0 10px!important;gap:5px!important;border-radius:999px!important}
  .mbitem[aria-current="page"] .lb{max-width:84px;opacity:1;transition:max-width .5s var(--tab-spring),opacity .3s ease .08s}
  html .mbitem .nbadge{left:20px!important;top:5px!important}
  html .mbitem[aria-current="page"] .nbadge{left:21px!important}
}
@media (max-width:767px) and (prefers-reduced-motion: reduce){html .mbitem,.mbitem .lb,.mbitem[aria-current="page"] .lb{transition:none!important}}
/* Next 14 days: on a day with an event but no post, the event dot sits above the dashed + (Kazel, Nov 11) */
.hday.gap .hdots{flex-direction:column;gap:4px}
.hdots{min-height:28px;justify-content:flex-start}
/* Edit Home sits at the bottom of Home (Kazel, Nov 11); while arranging, Done stays in reach just above the tab bar */
.heditbar{justify-content:center;margin:24px 0 8px}
.hedit .heditbar{position:sticky;bottom:calc(var(--mbar-h,0px) + 24px + env(safe-area-inset-bottom,0px));z-index:30;margin-top:16px}
.hedit .heditbar .btn{min-width:140px;min-height:44px}
@media (min-width:768px){.hedit .heditbar{bottom:24px}}
/* Next 14 days: every day has the same two lines, dots then the dashed +, so all of them line up (Kazel, Nov 11) */
.hday .hdots,.hday.gap .hdots{flex-direction:column;align-items:center;gap:5px;min-height:0}
.hdotrow{display:flex;gap:3px;justify-content:center;height:6px}
.hplusrow{display:flex;justify-content:center;height:18px}

/* phone tab bar docked to the bottom edge, rounded top corners (Kazel, Nov 11 2026): no gap under it, and its color
   fills the strip behind the iPhone home line; it still fades with the scroll (--barv) */
@media (max-width:767px){
  html .mbar{left:0!important;right:0!important;bottom:0!important;border-radius:24px 24px 0 0!important;
    height:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px))!important;
    padding:5px max(8px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
    box-shadow:inset 0 1px 0 var(--line)!important}
}

/* ---------- Post as Reel (Kazel approved the mockup, Nov 11): the switch, the checks, the Reel tag ---------- */
.reelbox{display:flex;flex-direction:column;gap:10px}
html .seg.reelseg{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border:0;border-radius:999px;background:var(--surface-2)}
html .seg.reelseg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;border-radius:999px;background:transparent!important;color:var(--text-2)!important;font:600 14px/1 "Barlow",system-ui,sans-serif;cursor:pointer;box-shadow:none!important;transition:color .2s ease}
html .seg.reelseg button[aria-pressed="true"]{background:transparent!important;color:var(--on-accent)!important}
/* one highlight behind the two buttons; it springs across like the Calendar's Month / Week / List (ui/reel.js) */
.reelseg .reelpill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:999px;background:var(--accent);pointer-events:none;will-change:transform}
.reelseg.pill-1 .reelpill{left:calc(50% + 2px)}
html .seg.reelseg button:disabled{opacity:.45;cursor:not-allowed}
.reelchecks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text)}
.reelchecks li{display:flex;gap:8px;align-items:flex-start}
.reelchecks .rk{flex:none;margin-top:1px}
.reelchecks .rk.ok{color:var(--ok)}
.reelchecks .rk.no{color:var(--warn)}
.reelwarn{margin:0;font-weight:600;color:var(--warn)}
.reelro{margin:0;display:flex;align-items:center;gap:6px;font-weight:600}
.reeltag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1;padding:3px 8px;border-radius:999px;background:var(--blue-100);color:var(--blue-500);white-space:nowrap}
:root[data-theme="dark"] .reeltag{background:var(--ink);color:var(--teal-200)}
.cwhen .reeltag{margin-left:6px;vertical-align:1px}
.pubreel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:4px 0 8px}
:root[data-theme="dark"] .seg.reelseg button[aria-pressed="true"]{color:var(--teal-200)!important}
:root[data-theme="dark"] .reelseg .reelpill{background:var(--ink)}

/* ---------- every segmented switch: one highlight that springs to the chosen button (ui/segslide.js, Kazel, Nov 11) ---------- */
.sslide{position:relative}
.sslide > .sspill{position:absolute;z-index:0;left:0;top:0;width:0;height:0;opacity:0;border-radius:8px;background:var(--surface);pointer-events:none;transform-origin:0 50%;will-change:transform}
:root[data-theme="dark"] .sslide > .sspill{background:var(--blue-500)}
.sslide > button{position:relative;z-index:1;transition:color .25s ease}
@media (prefers-reduced-motion: reduce){.sslide > button{transition:none}}
/* in the post window the dark track is Celeste Blue, so the highlight is the navy instead (it showed no highlight before) */
:root[data-theme="dark"] #postDlg .sslide > .sspill{background:var(--ink)}

/* ---------- video cover (Kazel approved the mockup, Nov 11): the row in the post window, the picker, the status ---------- */
.coverrow{display:flex;align-items:center;gap:12px}
.covthumb{flex:none;width:56px;height:76px;border-radius:12px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;color:var(--text-2)}
.covthumb img{width:100%;height:100%;object-fit:cover;display:block}
.covtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.covtext small{font-size:13px;color:var(--text-2)}
.coverrow .btn{display:inline-flex;align-items:center;gap:6px;flex:none}
.coverbody{display:flex;flex-direction:column;gap:14px}
.covstage{position:relative;align-self:center;overflow:hidden;border-radius:18px;background:var(--ink);display:grid;place-items:center}
.covstage.tall{width:min(220px,60vw);aspect-ratio:9/16}
.covstage.wide{width:100%;aspect-ratio:16/9}
.covstage video,.covstage img{width:100%;height:100%;object-fit:cover;display:block}
.covstamp{position:absolute;left:10px;top:10px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--text);font-variant-numeric:tabular-nums}
.covempty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--white);font-size:13px;padding:16px;text-align:center}
.covrange{display:flex;flex-direction:column;gap:6px}
.covrange input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}
.covends{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.covpick{display:flex;align-items:center;gap:10px}
.covpick .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.covstatus{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:13px}
.covstatus.ok{color:var(--ok);font-weight:600}
.covfail{margin-top:8px;padding:12px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:6px}
.covfail b{color:var(--warn)}
.covfail p{margin:0;font-size:13px;color:var(--text-2)}

/* Home summary (Kazel, Nov 11): numbers always on one line, labels start together under them, however many lines a label
   wraps to ("For Approval", "Changes Requested"); every box is the row's full height, its content at the top */
html #stats.stats{align-items:stretch!important}
html #stats .stat{align-self:stretch!important;justify-content:flex-start!important}
html #stats .stat .snum{justify-content:flex-start!important;align-self:stretch!important}
html #stats .stat .snum b{flex:none}
/* labels break only between words ("Changes / Requested", never "Requeste / d"); a long word may use the box's side padding */
html #stats .stat .snum > span{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;max-width:none}
html #stats .stat{padding:0 2px!important;min-width:0}
@media (max-width:350px){html #stats .stat .snum > span{font-size:10.5px!important;letter-spacing:-.1px}}

/* ---------- Make a graphic (Kazel approved the mockup, Nov 11): post window buttons, the template chooser, the editor ---------- */
.upgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.upgrid > .dropzone{margin:0}
.gfxmake{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;border:0;border-radius:18px;background:var(--blue-500);color:var(--white);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:12px}
.gfxmake svg{color:var(--teal-200)}
.upgrid.small .gfxmake{flex-direction:row;min-height:0;padding:10px 12px;gap:10px;justify-content:flex-start;border-radius:14px;background:var(--surface-2);color:var(--accent)}
.upgrid.small .gfxmake svg{color:var(--accent)}
.upgrid:not(.small) > .dropzone{min-height:104px}
.pmedia .upgrid:not(.small) > .dropzone{flex-direction:column;justify-content:center;border:2px dashed var(--line)}
.pmedia .upgrid:not(.small) > .dropzone .dzs{margin-left:0}
.gfxhint{margin:2px 0 0}
.gfxtag{position:absolute;top:6px;left:6px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:980px;color:var(--ink);background:var(--white);pointer-events:none}
.gfxbody{display:flex;flex-direction:column;gap:12px;padding:0 16px 24px}
.gfxhead{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.gfxsug{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid var(--accent);background:var(--surface-2);border-radius:16px;padding:10px;font:inherit;color:var(--text);cursor:pointer}
.gfxsugtext{display:flex;flex-direction:column;gap:4px;min-width:0}
.gfxsugtext small{font-size:13px;color:var(--text-2);line-height:1.4}
.gfxmini{flex:none;width:64px;height:80px;border-radius:10px}
.gfxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gfxtpl{display:flex;flex-direction:column;gap:6px;align-items:center;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--text);padding:0;cursor:pointer}
.gfxthumb{width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.gfxstage{display:flex;justify-content:center}
.gfxprev{display:block;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.gfxprev.gfx-feed{width:min(220px,56vw)}
.gfxprev.gfx-square{width:min(240px,62vw)}
.gfxprev.gfx-story{width:min(170px,44vw)}
.gfxsize{display:flex!important;width:100%}
.gfxsize button{flex:1}
.gfxform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gfxfield{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-2);grid-column:1 / -1;min-width:0}
.gfxfield input,.gfxfield textarea{font:inherit;font-size:16px;font-weight:500;color:var(--text);background:var(--surface);padding:10px 12px;border-radius:10px;border:1px solid var(--line);min-width:0;resize:vertical}
.gfxphoto{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gfxphoto .hint{flex:1;min-width:140px}
.gfxnote{text-align:center;margin:0}
.gfxback{margin-right:4px}
/* adjusting the photo in a graphic (Kazel, Nov 11): drag in the preview, pinch / slider to zoom, Reset */
.gfxprev.movable{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.gfxprev.movable.moving{cursor:grabbing}
.gfxadj{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--surface-2)}
.gfxadj .hint{margin:0;flex:1}
.gfxadjrow{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.gfxadjlbl{font-size:12px;font-weight:600;color:var(--text-2);min-width:44px}
.gfxadjrow input[type=range]{flex:1;min-width:0;accent-color:var(--accent);min-height:32px}
.gfxreset{margin-left:auto}

/* Edit requests (Kazel, Nov 11: the orange tint turned brown on the dark page): the same card as Waiting for approval and
   Ready to post, with a thin orange bar on the left to mark that something needs doing. Light and dark. */
html .ready.reqs{background:var(--surface)!important;box-shadow:inset 4px 0 0 var(--orange-500)!important}

/* Text boxes always look like text boxes (Kazel, Nov 11): a visible outline in light and dark (--line: Blue 100 / Blue 500),
   which turns Celeste Blue while typing. Rows that are a label + value on one line (post window) stay without a box. */
html :is(input[type=text],input[type=email],input[type=url],input[type=search],input[type=date],input[type=time],input[type=number],input:not([type]),textarea,select):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* any text box without its own look gets the same outlined field (zero specificity: every styled box keeps its own) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select){
  border:1.5px solid var(--line);background-color:var(--field);color:var(--text);border-radius:12px}
#managerDlg :is(input:not([type=checkbox]):not([type=radio]),textarea,select){background-color:var(--field)!important;border:1.5px solid var(--line)!important;color:var(--text)!important}
/* phone notification settings, folded until tapped (Kazel, Nov 11) */
details.pnotif{display:block}
.pushsum{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:32px}
.pushsum::-webkit-details-marker{display:none}
.pushsum b{flex:1}
.pushsum::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;flex:none}
details.pnotif[open] .pushsum::after{transform:rotate(225deg) translate(-2px,-2px)}
.pushin{display:flex;flex-direction:column;gap:8px;margin-top:10px}