/* The workspace frame: full-width page, size setting, header tools, guest badge,
   Report & Feedback drawer, ⚙ settings (size + themes), tips. Colours come from the
   theme tokens, so every theme and light/dark apply without extra rules. */

/* ---------- page width and size ---------- */
.frame{
  max-width:none;
  padding:28px max(16px, 2.5vw) 90px;
  zoom:var(--ui-scale, 1.2);
}
.drawer-panel,
.card-modal-scrim{zoom:var(--ui-scale, 1.2);}
@media (max-width:760px){
  .frame{padding:18px 16px 70px;}
}

/* ---------- header ---------- */
header{position:relative; z-index:100;}
.brand-row{align-items:center;}
.guest-badge{
  margin-left:auto;
  font-size:12.5px;
  color:var(--text-me);
  border:1px solid var(--line);
  padding:3px 9px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.guest-badge b{font-weight:400;}
.guest-badge i{font-style:normal; color:var(--text-dim);}

nav{align-items:center; gap:10px; flex-wrap:wrap;}
.nav-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.nav-tools .sound-toggles{display:flex; gap:6px;}
.tools-sep{width:1px; height:20px; background:var(--line);}
.feedback-btn{
  font-family:var(--font);
  font-size:13px;
  letter-spacing:.5px;
  color:var(--green-bright);
  background:none;
  border:1px solid var(--line);
  padding:5px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.feedback-btn:hover,
.feedback-btn[aria-expanded="true"],
.feedback-btn.is-active{background:var(--hover-mid); border-color:var(--green-dim); text-shadow:0 0 6px var(--glow);}
.gear-btn{display:inline-grid; place-items:center;}
.gear-btn svg{width:15px; height:15px;}
.gear-btn[aria-expanded="true"]{background:var(--hover-mid);}
nav [data-page="chat"].has-unread::after{
  content:"";
  opacity:1;
  position:absolute;
  top:6px; right:4px; left:auto; bottom:auto;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--pink);
  mix-blend-mode:normal;
}

/* ---------- ⚙ settings ---------- */
.settings-wrap{position:relative;}
.settings-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:200;
  width:min(360px, calc(100vw - 32px));
  max-height:calc(100vh / var(--ui-scale, 1) - 170px);   /* the page is zoomed by the size setting: always ends on screen */
  overflow:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--panel-menu);
  border:1px solid var(--green-dim);
  box-shadow:0 0 18px var(--glow-faint), 0 12px 30px var(--overlay);
}
.settings-pop[hidden]{display:none;}
.settings-pop h3{margin:0; font-family:var(--font-display); font-weight:var(--type-weight); font-size:24px; line-height:1; color:var(--green-bright);}
.settings-pop h4{margin:4px 0 0; font-weight:400; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);}
.size-pick{display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line);}
.size-pick button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 0; background:none; border:0; border-right:1px solid var(--line);
  color:var(--text-dim); font-family:var(--font); cursor:pointer;
}
.size-pick button:last-child{border-right:0;}
.size-pick b{font-family:var(--font-display); font-weight:var(--type-weight); line-height:1; color:var(--green-dim);}
.size-pick small{font-size:10.5px;}
.size-pick button[aria-pressed="true"]{background:var(--hover-focus); color:var(--green-bright);}
.size-pick button[aria-pressed="true"] b{color:var(--green-bright);}

.theme-pick{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.theme-option{
  position:relative;
  display:flex; flex-direction:column; gap:5px;
  padding:8px; min-width:0; text-align:left;
  background:none; border:1px solid var(--line); color:var(--text-body);
  font-family:var(--font); cursor:pointer;
}
.theme-option:hover{border-color:var(--green-dim);}
.theme-option.is-on{border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset;}
.theme-option:disabled{cursor:wait;}
.theme-swatch{height:34px; flex:none; border:1px solid var(--border-soft);}
.swatch-matrix .theme-swatch{background:#000 repeating-linear-gradient(90deg, transparent 0 9px, rgba(63,243,90,.55) 9px 10px);}
.swatch-aero .theme-swatch{background:radial-gradient(circle at 30% 20%, #ffffffcc 0 12%, transparent 30%), linear-gradient(160deg, #64d4ff, #0a8fd8 55%, #9fdcff);}
.swatch-meadow-field .theme-swatch{background:radial-gradient(circle at 20% 35%, #f783ac 0 3px, transparent 4px), radial-gradient(circle at 62% 60%, #fff 0 3px, transparent 4px), radial-gradient(circle at 80% 25%, #ffd43b 0 3px, transparent 4px), linear-gradient(180deg, #7cc26a, #4e9a45);}
.swatch-meadow-sky .theme-swatch{background:radial-gradient(circle at 78% 30%, #ffd76a 0 7px, transparent 9px), linear-gradient(180deg, #7ec8f2 0 62%, #5fa64a 62% 100%);}
.swatch-crystal-cave .theme-swatch{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%232c9a9e' d='M0 28h120v6H0z'/%3E%3Cpath fill='%23c79bff' d='M44 28l-5-13 7-11 7 11-5 13z'/%3E%3Cpath fill='%239a6fe0' d='M46 4l7 11-5 13h-2z'/%3E%3Cpath fill='%23b48af5' d='M36 28l-8-9 2-6 8 7 2 8z'/%3E%3Cpath fill='%236ee8d0' d='M78 28l-4-10 5-7 5 7-4 10z'/%3E%3Cpath fill='%2338b8a8' d='M79 11l5 7-4 10h-1z'/%3E%3Cpath fill='%23ffc27a' d='M98 28l-2-6 3-4 3 4-2 6z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat, linear-gradient(180deg, #1c1648, #4a3a94);}
.theme-name{display:flex; justify-content:space-between; gap:6px; font-size:13px;}
.theme-state{font-style:normal; font-size:10.5px; color:var(--green);}
.theme-music{font-size:11px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.theme-note{margin:0; min-height:1.4em; font-size:11.5px; color:var(--text-dim);}

/* after a switch every theme locks for 3 s; a grey clock face sweeps off the others */
@property --theme-cd{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.theme-pick.is-loading .theme-option:not(.is-on),
.theme-pick.is-cooling .theme-option:not(.is-on){filter:grayscale(1); opacity:.7;}
.theme-pick.is-cooling .theme-option:not(.is-on)::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:conic-gradient(from 0deg, transparent var(--theme-cd), rgba(110,110,110,.62) var(--theme-cd));
  animation:theme-cooldown 3s linear forwards;
}
@keyframes theme-cooldown{from{--theme-cd:0deg;} to{--theme-cd:360deg;}}

/* ---------- Report & Feedback drawer ---------- */
.drawer-scrim{
  position:fixed; inset:0; z-index:300;
  background:var(--overlay);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.drawer-scrim.is-open{opacity:1; pointer-events:auto;}
.drawer-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:301;
  width:min(380px, 100vw);
  display:flex; flex-direction:column; gap:12px;
  padding:calc(18px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 18px 18px;
  overflow:auto;
  background:var(--panel-menu);
  border-left:1px solid var(--green-dim);
  transform:translateX(105%);
  transition:transform .25s ease;
}
.drawer-panel.is-open{transform:none;}
.drawer-panel h3{margin:6px 0 0; font-family:var(--font-display); font-weight:var(--type-weight); font-size:30px; line-height:1; color:var(--green-bright);}
.drawer-close{align-self:flex-end; background:none; border:0; color:var(--text-dim); font-family:var(--font); font-size:13px; cursor:pointer;}
.drawer-close:hover{color:var(--green-bright);}
.drawer-note{margin:0; font-size:12.5px; color:var(--text-dim);}
.drawer-item{
  display:flex; flex-direction:column; gap:4px;
  padding:12px; text-align:left;
  background:none; border:1px solid var(--line);
  font-family:var(--font); color:var(--text-dim); cursor:pointer;
}
.drawer-item:hover,.drawer-item:focus-visible{background:var(--hover-mid); border-color:var(--green-dim);}
.drawer-item b{font-weight:400; font-size:15px; color:var(--green-bright);}
.drawer-item span{font-size:12.5px;}
.drawer-item em{font-style:normal; font-size:11.5px; color:var(--text-body);}

/* ---------- tips and status ---------- */
.tip{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:14px; padding:6px 0 6px 10px;
  font-size:12.5px; color:var(--amber);
  border-left:2px solid var(--amber);
}
.tip[hidden]{display:none;}
.tip > span{flex:0 1 auto; min-width:0;}
.tip-x{background:none; border:0; color:var(--amber); font-size:16px; line-height:1; padding:0 4px; opacity:.75; cursor:pointer;}
.tip-x:hover{opacity:1;}
.save-status{color:var(--text-dim); white-space:nowrap;}
.save-status.is-error{color:var(--red-fail);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

@media (max-width:760px){
  .guest-badge{margin-left:0;}
  .nav-tools{margin-left:0; width:100%; justify-content:center;}
  /* the gear sits mid-screen on a phone: keep its menu inside the screen */
  .settings-wrap{position:static;}
  .settings-pop{left:0; right:0; width:auto; top:calc(100% + 8px);}
}
@media (prefers-reduced-motion:reduce){
  .drawer-panel,.drawer-scrim{transition:none;}
  .theme-pick.is-cooling .theme-option:not(.is-on)::after{animation:none; background:rgba(110,110,110,.45);}
}

/* ---------- header that fits any width (and any size setting) ---------- */
header{container-type:inline-size; container-name:wp-header;}
header nav{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; grid-template-columns:none;}
.nav-tools{margin-left:auto; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:100%;}
/* folded: the tabs live in a [ menu ] list (nav-compact.js sets .is-compact) */
nav.is-compact .nav-more{display:inline-flex;}
nav.is-compact .nav-cluster{position:relative; flex:0 0 auto; justify-content:flex-start; justify-self:auto;}
nav.is-compact .nav-pages{
  display:none; position:absolute; left:0; top:calc(100% + 8px); transform:none; z-index:220;
  flex-direction:column; align-items:flex-start; min-width:max-content;
  padding:8px 14px; border:1px solid var(--line); background:var(--panel-menu);
  box-shadow:0 0 12px var(--glow-faint), 0 10px 24px var(--overlay);
}
nav.is-compact.is-open .nav-pages{display:flex;}
nav.is-compact [data-page]{margin:0 0 4px; padding:6px 4px; letter-spacing:0; white-space:nowrap;}
nav.is-compact [data-page]:last-child{margin-bottom:0;}
@container wp-header (max-width: 640px){
  .fb-long{display:none;}
  .tools-sep{display:none;}
  .brand-row .path{display:none;}
  .guest-badge{margin-left:0;}
}
@container wp-header (max-width: 420px){
  .nav-tools .sound-toggle{width:30px; height:30px; padding:0;}
  .feedback-btn{font-size:12px; padding:5px 6px;}
}
@media (max-width:720px){
  header{padding:14px;}
  .settings-wrap{position:static;}
  .settings-pop{left:0; right:0; width:auto;}
}

/* ---------- titles: smaller and thinner ---------- */
html .brand-row h1{font-size:26px; letter-spacing:1.5px; text-shadow:0 0 4px var(--glow);}
html .page-head{margin-bottom:16px;}
html .page-head h2{font-size:19px; letter-spacing:.5px; margin-bottom:4px; text-shadow:0 0 3px var(--glow);}
html .page-head p{font-size:12.5px;}
html .board-title{font-size:19px;}
html .list-name{font-size:18px;}
html .sched-day{font-size:26px;}
html .sched-clock b{font-size:20px;}
html .timeline-head h3,html .side-sec h3{font-size:18px;}
html .timeline-hours span{font-size:18px;}
html .card-modal-title{font-size:20px;}
html .drawer-panel h3,html .settings-pop h3{font-size:22px;}

/* ---------- section headings poof away after 20 s (shell.js) ---------- */
.page-head.is-poofing{overflow:hidden; animation:head-poof .9s ease forwards;}
.page-head.is-poofed{display:none;}
@keyframes head-poof{
  0%{opacity:1; filter:none; transform:none; max-height:240px;}
  55%{opacity:0; filter:blur(8px); transform:scale(1.04) translateY(-4px); max-height:240px;}
  100%{opacity:0; filter:blur(8px); max-height:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0;}
}
@media (prefers-reduced-motion:reduce){ .page-head.is-poofing{animation:none; display:none;} }

/* ---------- the first-visit tutorial (outside the size zoom, so sizes here are real pixels) ---------- */
.tour-ring{
  position:fixed; z-index:2147482000; pointer-events:none;
  border:2px solid var(--green-bright); border-radius:var(--radius, 0);
  box-shadow:0 0 0 100vmax var(--overlay), 0 0 16px var(--glow);
  transition:left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.tour-ring[hidden]{display:none;}
.tour-card{
  position:fixed; z-index:2147482001; left:12px; top:12px;
  width:min(340px, calc(100vw - 24px)); padding:16px;
  background:var(--panel-menu); border:1px solid var(--green); border-radius:var(--radius, 0);
  color:var(--text-body); font-family:var(--font); font-size:14px; line-height:1.45;
  outline:none; text-shadow:none;
  transition:left .2s ease, top .2s ease;
}
html[data-theme-name]:not([data-theme-name="matrix"]) .tour-card{backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);}
.tour-count{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);}
html .tour-card h3{margin:4px 0 8px; font-family:var(--font-display); font-weight:var(--type-weight); font-size:22px; line-height:1.1; color:var(--green-bright);}
.tour-card p{margin:0;}
.tour-card dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0;}
.tour-card dt{color:var(--green);}
.tour-card dd{margin:0;}
.tour-actions{display:flex; align-items:center; gap:8px; margin-top:14px;}
.tour-actions button{font-family:var(--font); font-size:13px; padding:6px 12px; cursor:pointer; background:none; border:1px solid var(--line); color:var(--green-dim);}
.tour-actions button:hover{color:var(--green-bright); border-color:var(--green-dim);}
.tour-actions .tour-skip{margin-right:auto; border-color:transparent; padding-left:0; color:var(--text-dim);}
.tour-actions .tour-next{background:var(--green); border-color:var(--green); color:var(--ink);}
.tour-actions .tour-next:hover{color:var(--ink);}
.tour-actions button:focus-visible{outline:2px solid var(--green-bright); outline-offset:2px;}
.settings-tour{align-self:flex-start; margin-top:2px; padding:0; background:none; border:0; font-family:var(--font); font-size:12px; color:var(--text-dim); text-decoration:underline; cursor:pointer;}
.settings-tour:hover{color:var(--green-bright);}
@media (prefers-reduced-motion: reduce){ .tour-ring,.tour-card{transition:none;} }