/* Marina: presentation only. Load after current workspace/site styles.
   Keep the writer's theme store, pre-paint script and event handlers. */
.theme-picker {
  --theme-bg:var(--surface,var(--paper,#f8f5ee));
  --theme-ink:var(--ink,#192724);
  --theme-muted:var(--muted,#59645e);
  --theme-edge:#78877e;
  --theme-active:var(--ink,#192724);
  --theme-active-ink:var(--ground,var(--paper,#f8f5ee));
  --theme-focus:var(--focus,var(--copper,#a5593c));
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:0;max-inline-size:100%;font-family:var(--sans);
}
.theme-picker .theme-label {
  flex:none;color:var(--theme-muted);font-size:.875rem;
  font-weight:600;line-height:1.4;
}
.theme-picker .theme-options {
  display:flex;flex:1 1 auto;flex-wrap:wrap;gap:4px;min-inline-size:0;
}
.theme-picker .theme-options button {
  flex:1 1 3.5em;min-inline-size:max-content;max-inline-size:100%;min-block-size:44px;
  border:1px solid var(--theme-edge);border-radius:6px;
  padding:9px 8px;background:var(--theme-bg);color:var(--theme-ink);
  font:500 1rem/1.4 var(--sans);text-align:center;cursor:pointer;
  white-space:nowrap;overflow-wrap:normal;transition:none;
}
.theme-picker .theme-options button[aria-pressed="true"] {
  background:var(--theme-active);color:var(--theme-active-ink);
  border-color:var(--theme-active);
}
.theme-picker .theme-options button:focus-visible {
  outline:3px solid var(--theme-focus);outline-offset:2px;
}
.rail .theme-picker {
  --theme-bg:#21352f;--theme-ink:#f8f5ee;--theme-muted:#d1dbd1;
  --theme-edge:#9fb2a1;--theme-active:#f8f5ee;
  --theme-active-ink:#21352f;--theme-focus:#ecb495;
  display:block;
}
.rail .theme-options {margin-block-start:8px}
.rail,.rail-inner {min-inline-size:0}
.rail .rail-top {flex-wrap:wrap;gap:8px}
.rail .brand {min-inline-size:0;max-inline-size:100%}
.rail .brand strong {min-inline-size:0;overflow-wrap:anywhere}
.app-theme-bar {max-inline-size:1040px;margin-inline:auto;padding:16px clamp(16px,4vw,44px) 0;display:flex;justify-content:flex-end}
.app-theme-bar .theme-picker {inline-size:min(100%,280px)}
.app-theme-bar + .home {padding-block-start:24px}
.site-header .theme-picker {flex:0 1 260px}
@media(max-width:820px) {
  .rail .theme-picker {display:flex}
  .rail .theme-options {margin-block-start:0}
}
@media(max-width:720px) {
  .site-header .theme-picker {order:2;flex-basis:100%}
  .site-header .header-inner nav {order:3}
}
@media(forced-colors:active) {
  .theme-picker .theme-options button[aria-pressed="true"] {border:3px solid Highlight}
}