/* Bloomletter glass. All reflections and botanical decoration are static. */
html .site-header #theme-toggle {
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
  color:var(--accent);flex-shrink:0;
}
#theme-toggle svg{display:block;pointer-events:none}

/* Native scroll progress: slim rose ink in a quiet stationery-coloured gutter. */
html,.at-page {
  scrollbar-width:thin;
  scrollbar-color:var(--at-accent,var(--accent)) var(--at-glass,var(--header-surface));
}
@supports selector(::-webkit-scrollbar){
  html,.at-page{scrollbar-width:auto;scrollbar-color:auto}
  html::-webkit-scrollbar,.at-page::-webkit-scrollbar{width:10px;height:10px}
  html::-webkit-scrollbar-track,.at-page::-webkit-scrollbar-track {
    background:var(--at-glass,var(--header-surface));
  }
  html::-webkit-scrollbar-thumb,.at-page::-webkit-scrollbar-thumb {
    border:3px solid transparent;border-radius:999px;min-height:56px;
    background:linear-gradient(var(--at-accent,var(--accent)),color-mix(in srgb,var(--at-accent,var(--accent)) 70%,var(--at-ink,var(--ink))));
    background-clip:padding-box;
  }
  html::-webkit-scrollbar-thumb:hover,.at-page::-webkit-scrollbar-thumb:hover {
    background:var(--at-accent,var(--accent));background-clip:padding-box;
  }
  html::-webkit-scrollbar-button,.at-page::-webkit-scrollbar-button{display:none;width:0;height:0}
  html::-webkit-scrollbar-corner,.at-page::-webkit-scrollbar-corner{background:transparent}
}
body {
  --bloom-base:var(--at-surface,var(--surface));
  --bloom-accent:var(--at-accent,var(--accent));
  --bloom-line:var(--at-line,var(--line));
  --bloom-edge:color-mix(in srgb,var(--bloom-accent) 35%,transparent);
  --bloom-fill:linear-gradient(132deg,#ffffff1c 0%,#ffffff05 38%,transparent 60%,#ffffff0a 100%),
    color-mix(in srgb,var(--bloom-base) 89%,transparent);
  --bloom-shadow:inset 0 1px 0 #ffffff40,inset 1px 0 0 #ffffff12,inset 0 -1px 0 #ffffff09,0 12px 32px #16081312;
}

/* A pressed-flower silhouette at the edge of the first view. */
.hero::before,.at-workspace-intro::before {
  content:"";position:absolute;right:2%;top:85px;width:260px;height:390px;
  background:url('assets/botanical-ink.svg') center/contain no-repeat;
  opacity:.24;pointer-events:none;
}
.at-workspace-intro{position:relative}
.at-workspace-intro::before{top:-22px;right:0;width:200px;height:300px;opacity:.15}

/* The hero is the signature glass surface; paper artwork retains its texture. */
html .hero .content {
  box-sizing:border-box;position:relative;z-index:2;
  padding:clamp(24px,3vw,42px);
  border:1px solid var(--bloom-edge);
  border-radius:30px 30px 70px 30px;
  background:var(--bloom-fill);
  box-shadow:var(--bloom-shadow);
}
html .hero .content::before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,transparent 10%,#ffffff09 10.2%,transparent 39%);
}
html .hero .eyebrow{position:relative;z-index:1}

/* Theme-coloured glass prevents the old pale band in dark mode. */
html .site-header,.at-page .at-header,.at-studio .at-editor-footer {
  background:linear-gradient(110deg,#ffffff12,transparent 58%),
    linear-gradient(var(--at-glass,var(--header-surface)),var(--at-glass,var(--header-surface))),
    var(--bloom-base);
  border-color:var(--bloom-edge);
  box-shadow:inset 0 1px 0 #ffffff20,0 4px 18px #1608130c;
}

/* Workspace navigation floats within the page instead of forming a square slab. */
@media(min-width:761px){
  :is(.at-workspace,.at-studio,.pf-page)>.at-header {
    box-sizing:border-box;width:calc(100% - 64px);max-width:1240px;
    min-height:76px;margin:20px auto 0;padding:12px 24px;
    border:1px solid var(--bloom-edge);border-radius:24px;
    background:linear-gradient(125deg,#ffffff1c,transparent 58%),
      color-mix(in srgb,var(--at-glass) 92%,var(--at-surface));
    box-shadow:inset 0 1px 0 #ffffff50,0 8px 24px #1608130b;
  }
  :is(.at-workspace,.at-studio,.pf-page) .at-header .at-brand{font-size:28px;gap:9px}
  :is(.at-workspace,.at-studio,.pf-page) .at-brand small {
    font-size:9px;letter-spacing:.13em;margin-left:8px;padding:8px 11px;
    border:1px solid var(--bloom-line);border-radius:999px;
    background:color-mix(in srgb,var(--at-accent) 7%,transparent);
  }
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions{gap:8px;flex-wrap:nowrap}
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions>.at-button{min-height:44px;padding:10px 18px;font-size:12px}
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions>.at-button:first-child {
    border-color:transparent;background:transparent;box-shadow:none;color:var(--at-muted);
  }
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions>button[aria-label] {
    min-width:44px;min-height:44px;
    box-shadow:inset 0 1px 0 #ffffff30;
  }
}
@media(max-width:760px){
  :is(.at-workspace,.at-studio,.pf-page)>.at-header {
    border:0;border-bottom:1px solid var(--bloom-edge);
    border-radius:0 0 18px 18px;box-shadow:inset 0 1px 0 #ffffff20,0 3px 12px #16081308;
  }
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions{width:auto;flex-wrap:nowrap;flex-shrink:0}
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions>button[aria-label]{min-width:44px;min-height:44px}
}
@media(max-width:370px){
  :is(.at-workspace,.at-studio,.pf-page)>.at-header{padding:10px;gap:6px}
  :is(.at-workspace,.at-studio,.pf-page) .at-header .at-brand{font-size:19px;gap:4px}
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions{gap:3px}
  :is(.at-workspace,.at-studio,.pf-page) .at-header-actions>.at-button{padding:8px;font-size:10px}
}
html .collection-card,html .prompt-card,
.at-workspace .at-current,.at-workspace .at-template,
.at-studio .phone-content-tools,.at-studio .at-step-tip,
.at-studio .at-review,.at-studio .at-layout-preview {
  background:var(--bloom-fill);
  border:1px solid var(--bloom-edge);
  box-shadow:var(--bloom-shadow);
}
html .collection-card,.at-workspace .at-template{border-radius:22px}
html .prompt-card{border-radius:24px}
.at-workspace .at-current{border-radius:26px}
.at-new-letter-action{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--bloom-line)}
.at-new-letter-action>.at-button{min-height:44px}
.at-new-letter-action>p{margin:0!important;font-size:12px!important;color:var(--at-muted)}

/* A solid accent under the highlight keeps primary actions easy to read. */
html .button,html .header-cta,.at-page .at-primary {
  background:linear-gradient(155deg,#ffffff30,transparent 55%),var(--bloom-accent);
  box-shadow:inset 0 1px 0 #ffffff65,inset 0 -1px 0 #00000010,0 5px 16px #16081312;
}
html .theme-toggle,.at-page .at-button:not(.at-primary) {
  background:linear-gradient(145deg,#ffffff10,transparent 65%),
    color-mix(in srgb,var(--bloom-base) 78%,transparent);
  border-color:var(--bloom-edge);
  box-shadow:inset 0 1px 0 #ffffff20;
}
.at-studio .at-step {
  border:1px solid var(--bloom-line);
  background:linear-gradient(140deg,#ffffff0b,transparent),var(--at-surface);
}
.at-studio .at-step.is-active {
  color:var(--at-ink);border-color:var(--at-accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--at-accent) 23%,transparent),transparent),var(--at-surface2);
  box-shadow:inset 0 1px 0 #ffffff35,0 2px 8px #1608130c;
}
.at-studio .phone-content-tabs button[aria-pressed=true] {
  background:linear-gradient(145deg,#ffffff30,transparent 65%),var(--at-accent);
  box-shadow:inset 0 1px 0 #ffffff55;
}
.at-studio .seq-type-option {
  /* Background image overlays existing inline selected/unselected colours. */
  background-image:linear-gradient(135deg,#ffffff17,transparent 60%);
  box-shadow:inset 0 1px 0 #ffffff30;
}
.at-studio .phone-frame-rail {
  /* Override the existing mobile rail's inline/important surface rules. */
  background:var(--bloom-fill)!important;
  box-shadow:var(--bloom-shadow)!important;
  border-color:var(--bloom-edge);
}
.at-studio .at-sidebar{background:transparent}

/* A compact glass tray for the phone reel, with clear names and touch targets. */
@media(max-width:760px){
  .at-studio .phone-frame-rail{border-radius:24px!important;padding:4px 0 0}
  .at-studio .phone-frame-heading{padding:11px 16px 9px;align-items:center}
  .phone-frame-heading>div{display:flex;flex-direction:column;gap:4px}
  .phone-frame-heading strong{font:500 20px/1.1 'Cormorant Garamond',serif}
  .phone-frame-heading>div>span{font-size:11px;color:var(--at-muted)}
  .phone-frame-heading .phone-frame-count{border:1px solid var(--bloom-edge);border-radius:999px;padding:6px 9px;font:11px Jost,sans-serif;white-space:nowrap;background:#ffffff07}
  .at-studio .phone-frame-strip{gap:12px!important;padding:7px 16px 12px!important;scroll-padding-inline:16px;scrollbar-width:none}
  .phone-frame-strip::-webkit-scrollbar{display:none}
  .at-studio .phone-frame-cell{width:122px!important;border:1px solid var(--bloom-edge)!important;border-radius:16px!important;background:var(--at-surface);box-shadow:inset 0 1px 0 #ffffff1c!important}
  .at-studio .phone-frame-cell.is-selected{border-color:var(--at-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--at-accent) 30%,transparent),inset 0 1px 0 #ffffff50!important}
  .at-studio .phone-frame-cell>[role=button]{height:72px!important;border-radius:15px 15px 0 0!important}
  .at-studio .phone-frame-number{top:7px!important;left:7px!important;width:22px;height:22px!important;padding:0!important;border:1px solid #ffffff35;border-radius:50%!important;font-size:10px!important;box-sizing:border-box}
  .at-studio .phone-frame-cell [aria-label='Delete piece']{width:44px!important;height:44px!important;top:1px!important;right:1px!important;background:transparent!important}
  .at-studio .phone-frame-cell [aria-label='Delete piece']::before{content:'';position:absolute;inset:7px;border:1px solid #ffffff35;border-radius:50%;background:#210f1bc9;z-index:-1}
  .phone-frame-caption{display:flex;align-items:baseline;justify-content:space-between;gap:4px;padding:9px 10px;color:var(--at-ink)}
  .phone-frame-caption strong{font:500 12px/1.2 Jost,sans-serif}
  .phone-frame-caption>span{font:10px/1.3 Jost,sans-serif;color:var(--at-muted)}
  .is-selected .phone-frame-caption>span{color:var(--at-accent)}
  .at-studio .phone-frame-grip{min-height:44px;background:linear-gradient(125deg,#ffffff0c,transparent);border-top:1px solid var(--bloom-line);font-size:11px;gap:7px}
  .at-studio .phone-frame-grip>span:first-child{font-size:20px;line-height:1}
  .at-studio .phone-frame-hint{margin:0 16px 10px;color:var(--at-muted);font:11px/1.5 Jost,sans-serif}
  .phone-frame-hint>span{font-size:15px;color:var(--at-accent);margin-right:4px}
  .at-studio .phone-frame-add{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 16px 16px!important;min-height:46px!important;border:1px solid var(--bloom-edge)!important;border-radius:14px!important;background:linear-gradient(135deg,#ffffff15,transparent),var(--at-surface2)!important;color:var(--at-ink)!important;box-shadow:inset 0 1px 0 #ffffff25;font:500 12px Jost,sans-serif}
  .phone-frame-add>span:first-child{font-size:20px;color:var(--at-accent)}
  .at-studio .phone-frame-grip:focus-visible,.phone-frame-add:focus-visible{outline:2px solid var(--at-accent);outline-offset:-3px}
}

@media(hover:hover) and (pointer:fine){
  html .collection-card:hover,.at-workspace .at-template:hover {
    border-color:var(--bloom-accent);
    box-shadow:inset 0 1px 0 #ffffff55,0 16px 32px #1608131c;
  }
}
/* Limit actual blur to a small set of desktop surfaces. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  html .site-header,html .hero .content,.at-page .at-header,.at-studio .at-editor-footer {
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
}
@media(max-width:760px){
  .at-studio .at-sidebar {
    background:linear-gradient(110deg,#ffffff08,transparent),var(--at-surface);
  }
  .at-workspace-intro::before{width:145px;height:220px;opacity:.13}
}
@media(max-width:700px){
  html .hero .content{padding:23px 20px 22px;border-radius:24px 24px 48px 24px}
  html .chapter.hero h1{font-size:clamp(32px,10.5vw,48px);margin:20px 0}
  html .hero .lead{font-size:14px;line-height:1.75}
  html .hero .actions{margin-bottom:0}
  .hero::before{top:82px;right:0;width:170px;height:280px;opacity:.22}
}
/* Mobile and reduced-motion use painted reflections only: no new GPU blur. */
@media(max-width:760px),(prefers-reduced-motion:reduce){
  html .site-header,html .hero .content,.at-page .at-header,.at-studio .at-sidebar,
  .at-studio .at-editor-footer,html .collection-card,html .prompt-card,
  .at-workspace .at-current,.at-workspace .at-template,.at-studio .phone-content-tools {
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}