/* Enfilarra studio: theme-aware surfaces and orange actions. */
:root {
  --brand: #fd7a27;
  --accent: #b94708;
  --accent-fill: #fd7a27;
  --accent-ink: #fff;
  --accent-soft: #fff1e7;
  --ink: #171717;
  --muted: #686868;
  --hint: #686868;
  --paper: #fff;
  --ground: #f6f6f6;
  --field: #fafafa;
  --line: #e4e4e4;
  --divider: #ededed;
  --field-line: #929292;
  --success: #176642;
  --success-soft: #edf6f1;
  --error: #b52f36;
  --error-soft: #fff0f0;
  --warning: #8d5905;
  --info: #365979;
  --info-soft: #edf3f8;
  color-scheme: light;
  color: var(--ink);
  font: 15px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] {
  --accent: #fd7a27; --accent-soft: #342418; --ink: #f5f5f5; --muted: #b5b5b5; --hint: #b5b5b5;
  --paper: #1b1b1b; --ground: #131313; --field: #212121; --line: #393939; --divider: #303030;
  --field-line: #818181; --success: #a4ddbb; --success-soft: #1c3024; --error: #ff9398;
  --error-soft: #362125; --warning: #f4c36d; --info: #a6c5e3; --info-soft: #213040; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --accent: #fd7a27; --accent-soft: #342418; --ink: #f5f5f5; --muted: #b5b5b5; --hint: #b5b5b5;
    --paper: #1b1b1b; --ground: #131313; --field: #212121; --line: #393939; --divider: #303030;
    --field-line: #818181; --success: #a4ddbb; --success-soft: #1c3024; --error: #ff9398;
    --error-soft: #362125; --warning: #f4c36d; --info: #a6c5e3; --info-soft: #213040; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; min-height: 100vh; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--accent); text-underline-offset: .25em; }
button, .button {
  display: inline-flex; justify-content: center; align-items: center; gap: .65rem;
  min-height: 3.2rem; padding: .75rem 1.15rem; border: 1px solid var(--accent);
  border-radius: .5rem; background: var(--accent-fill); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
button:hover, .button:hover { background: #b94708; }
button.secondary, .button.secondary { color: var(--ink); background: var(--paper); border-color: var(--field-line); }
button.secondary:hover, .button.secondary:hover { background: var(--ground); border-color: var(--ink); }
button:disabled { opacity: .5; cursor: default; }
button.link { background: transparent; border: 0; color: var(--accent); padding: 0; }
.icon-button { padding: .7rem; min-width: 3rem; min-height: 3rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.ui-icon { display: block; width: 1.35rem; height: 1.35rem; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -8rem; left: 1rem; z-index: 100; padding: 1rem; background: var(--paper); border: 2px solid var(--accent); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .65rem; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; font-weight: 650; letter-spacing: -.045em; }
h2 { font-size: 1.2rem; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; margin-bottom: .8rem; }
h3 { font-size: 1rem; margin-bottom: .65rem; font-weight: 600; }
p { margin-bottom: 1rem; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 650; margin-bottom: .75rem; }
.muted, .hint { color: var(--muted); }
.hint { font-size: .86rem; line-height: 1.6; }
.error, .card p.error { color: var(--error); }
.warning, .card p.warning { color: var(--warning); }
.ok, .card p.ok { color: var(--success); }
.error[role="alert"], .notice { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--ground); }
.error[role="alert"] { background: var(--error-soft); border-color: var(--error); }
.ok.notice { background: var(--success-soft); border-color: var(--success); }
label { display: block; margin: 0 0 1rem; color: var(--ink); font-size: .85rem; font-weight: 600; }
input, select, textarea { display: block; width: 100%; min-width: 0; min-height: 3.2rem; margin-top: .45rem; padding: .75rem .85rem; color: var(--ink); background: var(--field); border: 1px solid var(--field-line); border-radius: .45rem; font-weight: 400; }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* Native popup menus need their own colors, including when the chosen theme differs from the OS. */
select { color-scheme: inherit; }
select option, select optgroup { color: var(--ink); background: var(--field); }
input[readonly], textarea[readonly] { background: var(--ground); }
textarea { min-height: 0; resize: vertical; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: .78rem; line-height: 1.5; }
label.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .87rem; font-weight: 400; color: var(--muted); }
label.check input { width: 1.15rem; height: 1.15rem; min-height: 0; flex: none; padding: 0; margin: .2rem 0 0; accent-color: var(--accent-fill); }
form.inline { display: inline; }
.buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.password-label { margin-bottom: .45rem; }
.password-field { position: relative; margin-bottom: 1.1rem; }
.password-field input { margin: 0; padding-right: 3.5rem; }
.password-toggle { position: absolute; top: 50%; right: .15rem; transform: translateY(-50%); min-height: 3rem; width: 3rem; padding: .75rem; border: 0; border-radius: .35rem; background: transparent; color: var(--muted); }
.password-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.password-toggle svg { width: 1.3rem; height: 1.3rem; }
/* App frame */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: 15rem; background: var(--ground); color: var(--ink); border-right: 1px solid var(--line); padding: 2.15rem 1.15rem 1.3rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 10.5rem; height: auto; display: block; }
.sidebar-brand { margin: 0 .6rem 3.3rem; min-height: 3rem; }
.sidebar-caption { margin: 0 .85rem .8rem; color: var(--muted); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.app-nav { display: flex; flex-direction: column; gap: .4rem; }
.app-nav a { display: flex; align-items: center; gap: .85rem; min-height: 3.3rem; padding: .85rem; border-radius: .5rem; text-decoration: none; color: var(--muted); font-weight: 500; }
.app-nav a:hover { color: var(--ink); background: var(--line); }
.app-nav a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--brand); }
.app-nav a[aria-current="page"] .ui-icon { color: var(--brand); }
.sidebar-bottom { margin-top: auto; }
.sidebar-signout { display: flex; width: 100%; justify-content: flex-start; min-height: 3rem; border: 0; background: transparent; color: var(--muted); padding: .85rem; gap: .85rem; font-weight: 400; }
.sidebar-signout:hover { color: var(--ink); background: var(--line); }
.sidebar-footer { display: flex; justify-content: space-between; margin: 1.5rem .85rem 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.cabinet-shell .app-workspace { margin-left: 15rem; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .75rem clamp(1.5rem, 4vw, 3.5rem); gap: 1rem; }
.workspace-location { display: inline-flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; }
.workspace-location strong { font-weight: 500; color: var(--ink); }
.workspace-location > span { color: var(--field-line); }
.mobile-brand { display: none; }
.header-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .9rem; margin-left: auto; min-width: 0; max-width: 100%; }
.language-control { margin: 0; display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); min-width: 0; }
.language-control select { margin: 0; min-height: 2.95rem; width: auto; max-width: 11rem; padding: .5rem .65rem; border-color: var(--field-line); background: var(--field); font-size: .8rem; }
.language-form { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.language-apply { min-height: 2.95rem; padding: .5rem .65rem; font-size: .8rem; }
/* One press switches to the other look; the icon shows the look it switches to. */
.theme-toggle { flex: none; width: 2.95rem; min-height: 2.95rem; padding: 0; border-color: var(--field-line); background: var(--field); color: var(--muted); }
.theme-toggle:hover { background: var(--ground); border-color: var(--ink); color: var(--ink); }
.theme-toggle > span { display: block; }
.theme-toggle > .theme-to-light, :root[data-theme="dark"] .theme-toggle > .theme-to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle > .theme-to-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle > .theme-to-dark { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle > .theme-to-light { display: block; }
}
.brand .brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand .brand-logo-light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand .brand-logo-dark { display: block; }
}
main.app-content { max-width: 90rem; margin: 0 auto; padding: 3rem clamp(1.5rem, 4vw, 3.5rem) 4rem; min-height: calc(100vh - 9rem); }
main.app-content:not(.wide) { max-width: 60rem; }
body > main { max-width: 50rem; margin-inline: auto; padding: 3rem 1.5rem; }
.site-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin: 0 clamp(1.5rem, 4vw, 3.5rem); padding: 1.3rem 0; color: var(--muted); font-size: .7rem; }
.page-intro { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.5rem; }
.page-intro p:last-child { margin-bottom: 0; max-width: 43rem; font-size: .9rem; }
.page-intro > .button { flex: none; }
.title-count { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; margin-left: .8rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: .4rem; color: var(--muted); font-size: .9rem; letter-spacing: 0; }
.card { padding: 1.65rem; background: var(--paper); border: 1px solid var(--line); border-radius: .65rem; margin-bottom: 1.3rem; }
.card > :last-child { margin-bottom: 0; }
.focused-panel { max-width: 40rem; }
.separated { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--divider); }
/* Collection */
.tour-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.tour-filters { display: flex; flex-wrap: wrap; gap: .25rem; }
.filter-button { min-height: 2.95rem; padding: .5rem .8rem; gap: .5rem; border-color: transparent; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 500; }
.filter-button span { font-size: .7rem; min-width: 1.2rem; padding: .1rem .25rem; border-radius: .25rem; background: var(--ground); color: var(--muted); }
.filter-button:hover { color: var(--ink); background: var(--ground); }
.filter-button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.filter-button[aria-pressed="true"] span { color: var(--accent); background: var(--paper); }
.tour-search { display: flex; align-items: center; position: relative; flex: 1 1 13rem; max-width: 19rem; margin: 0; }
.tour-search .ui-icon { position: absolute; left: .8rem; color: var(--muted); width: 1.1rem; }
.tour-search input { margin: 0; min-height: 2.95rem; padding-left: 2.5rem; font-size: .8rem; background: var(--paper); }
.collection-labels, .project-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .65fr) 11rem 3rem; gap: 1.5rem; align-items: center; }
.collection-labels { padding: .65rem 1.25rem; color: var(--muted); font-size: .72rem; border-bottom: 1px solid var(--line); }
.project-grid { border-bottom: 1px solid var(--line); }
.project-grid:empty { border: 0; }
.project-card { position: relative; padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--line); transition: background .15s; }
.project-card:last-child { border-bottom: 0; }
.project-card:hover { background: var(--ground); }
.project-identity { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.project-symbol { display: grid; place-items: center; width: 3.3rem; height: 3.8rem; flex: none; border: 1px solid var(--line); border-radius: .45rem; background: var(--ground); color: var(--muted); }
.project-symbol .ui-icon { width: 1.65rem; height: 1.65rem; }
.project-card h2 { font-size: 1rem; margin-bottom: .3rem; }
.project-card h2 a { color: var(--ink); text-decoration: none; }
.project-card h2 a:hover { color: var(--accent); }
.project-room-count { color: var(--muted); font-size: .8rem; margin: 0; }
.project-progress p { font-size: .75rem; color: var(--muted); margin-bottom: .45rem; }
.project-progress .progress-label { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; }
.progress-label strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.progress-label strong span { color: var(--muted); font-weight: 400; }
.project-progress .hint { display: block; margin-top: .5rem; font-size: .7rem; }
.project-open { display: inline-flex; justify-content: center; align-items: center; min-width: 3rem; min-height: 3rem; color: var(--ink); border-radius: .4rem; }
.project-open:hover { color: var(--accent); background: var(--accent-soft); }
.project-open span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; max-width: 100%; padding: .35rem .6rem; margin-bottom: 0; background: var(--ground); color: var(--muted); font-size: .82rem; font-weight: 500; border-radius: .35rem; }
.status-dot { display: inline-block; width: .4rem; height: .4rem; flex: none; background: currentColor; border-radius: 50%; }
.status[data-tone="processing"] { color: var(--accent); background: var(--accent-soft); }
.status[data-tone="success"], .status[data-tone="ready"] { color: var(--success); background: var(--success-soft); }
.status[data-tone="published"] { color: var(--info); background: var(--info-soft); }
.status[data-tone="attention"] { color: var(--error); background: var(--error-soft); }
.room-progress { display: block; width: 100%; height: .25rem; border: 0; border-radius: .25rem; overflow: hidden; background: var(--line); color: var(--brand); accent-color: var(--brand); margin: 0 0 1.2rem; }
.room-progress::-webkit-progress-bar { background: var(--line); }
.room-progress::-webkit-progress-value { background: var(--brand); }
.room-progress::-moz-progress-bar { background: var(--brand); }
.project-progress .room-progress { margin: 0; }
.empty-state, .search-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 1.5rem; border: 1px dashed var(--field-line); border-radius: .75rem; background: var(--ground); margin-top: 1.5rem; }
.empty-state p { color: var(--muted); max-width: 30rem; font-size: .9rem; }
.empty-symbol { display: grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid var(--line); background: var(--paper); border-radius: .65rem; margin-bottom: 1.5rem; color: var(--accent); }
.empty-symbol .ui-icon { width: 2rem; height: 2rem; }
.search-empty { border: 0; }
.search-empty > .ui-icon { margin-bottom: 1rem; }
.refresh-note { color: var(--muted); font-size: .75rem; display: flex; gap: .5rem; align-items: center; margin-top: 1.25rem; }
.create-project { border: 1px solid var(--line); border-radius: .65rem; padding: 2rem; margin-top: 2rem; max-width: 40rem; }
.create-project > p { color: var(--muted); font-size: .9rem; }
.create-project form > input { margin-bottom: .75rem; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.dialog-heading h2 { font-size: 1.6rem; margin: 0; }
.dialog-heading .eyebrow { margin-bottom: .4rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.create-dialog { width: min(32rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); color: var(--ink); box-shadow: 0 24px 100px #0004; }
.create-dialog::backdrop { background: #0008; backdrop-filter: blur(4px); }
.create-dialog .create-project { margin: 0; max-width: none; border: 0; padding: 2rem; }
/* Project */
.project-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; }
.back-link, .refresh-link { display: inline-flex; align-items: center; min-height: 2.8rem; color: var(--muted); font-size: .8rem; text-decoration: none; }
.back-link:hover, .refresh-link:hover { color: var(--accent); }
.project-heading { margin-bottom: 1.75rem; }
.project-heading h1 { margin-bottom: 1rem; }
.project-section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.project-section-nav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.4rem; color: var(--muted); text-decoration: none; font-size: .83rem; border-bottom: 2px solid transparent; }
.project-section-nav a:hover, .project-section-nav a[aria-current="location"] { color: var(--ink); border-color: var(--brand); }
.project-section-nav span { border: 1px solid var(--line); font-size: .7rem; line-height: 1.5; padding: 0 .3rem; border-radius: .2rem; }
.workflow { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 0 1.75rem; padding: 1rem 0; gap: 1rem; }
.workflow li { display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.step-number { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border: 1px solid var(--line); border-radius: .35rem; font-size: .7rem; }
.workflow strong { display: block; font-size: .82rem; font-weight: 500; }
.workflow li div > span { display: block; font-size: .65rem; margin-top: .1rem; }
.workflow .is-current { color: var(--ink); }
.workflow .is-current .step-number { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); }
.workflow .is-done .step-number { color: var(--success); background: var(--success-soft); border-color: transparent; }
.project-main { min-width: 0; max-width: 60rem; }
.tour-hero { padding: 2.25rem; color: var(--ink); border-color: var(--line); background: var(--ground); overflow: hidden; }
.tour-hero .eyebrow { color: var(--accent); }
.tour-hero h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); letter-spacing: -.04em; max-width: 32rem; margin-bottom: .75rem; }
.tour-hero p { color: var(--muted); font-size: .87rem; }
.tour-hero p.ok { color: var(--success); }
.tour-hero p.warning { color: var(--warning); }
.tour-hero > p:not(.eyebrow):not(.hint):not(.status) { max-width: 42rem; font-size: .92rem; }
.tour-hero .hero-shortcut { display: block; width: fit-content; color: var(--ink); min-height: 2.9rem; padding-top: .8rem; font-size: .8rem; }
.tour-hero .hero-meta { margin: 1.2rem 0 0; font-size: .75rem; }
.tour-hero .hero-meta span { display: block; }
.tour-hero .refresh-note { margin: 1rem 0 0; }
.hero-actions { margin: 1.4rem 0 0; }
.publish-panel { margin-top: 1.4rem; padding: 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: .55rem; max-width: 42rem; }
.publish-panel > :last-child { margin-bottom: 0; }
.publish-panel > button[type="submit"] { min-width: 14rem; }
.publish-panel .hint { font-size: .8rem; }
.card-fields { margin: 0 0 1.2rem; padding: 0 0 .2rem; border: 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.card-fields legend { padding: 0; margin-bottom: .45rem; font-weight: 650; font-size: .95rem; }
.share-field { margin-top: 1.4rem; max-width: 46rem; }
.share-field > label { margin-bottom: .45rem; }
.share-field > .hint { margin-bottom: .6rem; font-size: .8rem; }
.share-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.share-row > input, .share-row > textarea { flex: 1 1 18rem; margin: 0; }
.share-row > button, .share-row > .button { flex: none; }
.hero-more { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.hero-more > summary { font-weight: 500; color: var(--muted); font-size: .8rem; }
.hero-more form { margin-top: .6rem; }
summary { cursor: pointer; min-height: 2.8rem; padding: .5rem 0; color: var(--ink); font-weight: 600; font-size: .85rem; }
details.card > summary { margin: -.4rem 0; }
details[open].card > summary { margin-bottom: 1rem; }
.compact-card { padding-block: 1rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-header h2 { margin: 0; }
.section-header .eyebrow { margin-bottom: .4rem; }
.room-fraction { font-size: .8rem; color: var(--muted); }
.room-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--divider); }
.room-row:last-of-type { padding-bottom: 0; }
.room-info { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.room-icon { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; color: var(--muted); background: var(--ground); border: 1px solid var(--line); border-radius: .4rem; }
.room-row[data-tone="attention"] .room-icon { background: var(--error-soft); color: var(--error); }
.room-row h3 { margin: 0 0 .4rem; }
.room-row p { margin: .35rem 0 0; }
.room-row .warning { font-size: .8rem; }
.room-actions { flex: none; max-width: 16rem; }
.room-actions summary { font-size: .72rem; font-weight: 400; }
.room-actions[open] { flex: 0 1 16rem; }
.room-actions form { padding-top: 1rem; }
.capture-help { padding: 1.2rem; background: var(--ground); border-radius: .45rem; }
.capture-help p { margin-bottom: 0; font-size: .85rem; color: var(--muted); }
.copy-result:empty { display: none; }
.copy-result { margin-top: .7rem; }
.stats-card > summary { display: list-item; }
.stats-card > summary .hint { float: right; font-weight: 400; }
.period-form { display: flex; flex-wrap: wrap; align-items: end; gap: .85rem; margin: 1.5rem 0; max-width: 42rem; }
.period-form label { flex: 1 1 10rem; margin: 0; }
.metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; font-size: .85rem; color: var(--muted); margin: 1.5rem 0; }
.metric strong { color: var(--ink); font-size: 2rem; font-weight: 600; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--muted); margin-bottom: .65rem; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--divider); }
thead th { background: var(--ground); }
tbody th { font-weight: 400; }
td:last-child, thead th:last-child { text-align: right; }
.danger-link { color: var(--error); }
button.danger-button { border-color: var(--error); color: var(--error); }
button.danger-button:hover { background: var(--error-soft); }
.danger-zone { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1rem 0; }
.question { font-size: 1.1rem; font-weight: 600; }
#business-card, #devices, #security, #rooms, #tour, #publish, #statistics, #processing { scroll-margin-top: 1.5rem; }
/* Account */
.account-summary { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.account-summary .page-intro { display: block; margin: 0; }
.account-summary .page-intro > p { color: var(--muted); font-size: .9rem; }
.account-identity { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; font-size: .85rem; }
.account-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.credit-card { border: 1px solid var(--line); border-radius: .65rem; padding: 1.4rem; }
.credit-card strong { display: block; font-size: 2.6rem; line-height: 1; font-weight: 600; letter-spacing: -.05em; margin-bottom: .8rem; }
.credit-card p:last-child { margin-bottom: 0; font-size: .72rem; }
.account-sections { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2.5rem; }
.section-nav { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; position: sticky; top: 1.5rem; align-self: start; }
.section-nav a { min-height: 3rem; padding: .7rem .8rem; color: var(--muted); font-size: .82rem; text-decoration: none; border-radius: .4rem; }
.section-nav a:hover, .section-nav a[aria-current="location"] { color: var(--accent); background: var(--accent-soft); }
.settings-content { min-width: 0; }
.settings-section { padding: 0 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.section-heading { margin-bottom: 1.5rem; }
.section-heading p { color: var(--muted); font-size: .85rem; max-width: 38rem; }
.settings-section form { max-width: 38rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--divider); font-size: .85rem; }
.list li:first-child { padding-top: 0; }
.list li:last-child { border-bottom: 0; }
.list .muted { display: block; margin-top: .35rem; font-size: .75rem; }
.list .inline { flex: none; }
.security-block + .security-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.form-heading { margin: 0 0 1.25rem; }
.account-delete { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .82rem; }
/* Welcome and account flows */
.auth-story { position: fixed; inset: 0 auto 0 0; width: 43%; display: flex; flex-direction: column; padding: 3rem; overflow: hidden; color: var(--ink); background: var(--ground); border-right: 1px solid var(--line); }
.story-brand { flex: none; }
.story-brand img { width: 12rem; }
.story-copy { position: relative; z-index: 1; margin-top: clamp(3rem, 8vh, 6rem); max-width: 30rem; }
.story-copy .eyebrow { color: var(--accent); margin-bottom: 1.5rem; }
.story-copy h2 { font-size: clamp(2.5rem, 4.3vw, 4.6rem); line-height: 1.06; font-weight: 500; letter-spacing: -.055em; margin-bottom: 1.5rem; }
.story-copy > p:last-child { max-width: 24rem; color: var(--muted); font-size: .95rem; }
.tour-scene { position: absolute; color: var(--ink); bottom: -5rem; left: -1rem; width: calc(100% + 4rem); opacity: .85; pointer-events: none; }
.tour-scene svg { width: 100%; display: block; }
.story-footer { position: absolute; z-index: 1; bottom: 1.5rem; left: 3rem; color: var(--muted); font-size: .7rem; }
.auth-shell .app-workspace { margin-left: 43%; }
.auth-shell .site-header { border-bottom: 0; }
.auth-shell .header-inner { padding: 1rem 2rem; }
main.auth { width: 100%; max-width: 33rem; margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) 3rem 3rem; min-height: calc(100vh - 5rem); }
.auth-intro { margin-bottom: 2rem; }
.auth-intro h1 { font-size: 2.25rem; margin-bottom: .8rem; }
.auth-intro p { color: var(--muted); font-size: .9rem; }
.auth-intro .eyebrow { color: var(--accent); }
.auth-panel { margin-bottom: 1.5rem; }
.auth-form > button[type="submit"], .auth-provider > button { width: 100%; }
.auth-form > label:not(.password-label) + input { margin-top: -.5rem; margin-bottom: 1.2rem; }
.auth-provider { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.auth-note { color: var(--muted); font-size: .78rem; line-height: 1.7; margin-top: 1.4rem; }
.auth .card { padding: 1.5rem; }
.auth .card > button, .auth .card > form > button { width: 100%; }
.auth .field-grid { grid-template-columns: 1fr; gap: 0; }
.auth-shell .site-footer { display: none; }
@media (min-width: 110rem) { .auth-story { padding: 4rem 5rem; } .story-footer { left: 5rem; } }
@media (max-width: 80rem) {
  .collection-labels, .project-card { grid-template-columns: minmax(0, 1fr) 9rem 9.5rem 3rem; gap: 1rem; }
  .card { padding: 1.4rem; }
  .story-copy h2 { font-size: 3.25rem; }
  .story-copy > p:last-child { font-size: .88rem; }
}
@media (max-width: 68rem) {
  .app-sidebar { width: 12.5rem; padding-inline: .8rem; }
  .sidebar-brand img { width: 9rem; }
  .cabinet-shell .app-workspace { margin-left: 12.5rem; }
  .collection-labels, .project-card { grid-template-columns: minmax(0, 1fr) 9rem 3rem; }
  .collection-labels > span:nth-child(2) { display: none; }
  .project-progress { grid-column: 1; padding-left: 4.3rem; }
  .project-card .status { grid-column: 2; grid-row: 1; }
  .project-open { grid-column: 3; grid-row: 1; }
  .project-progress .room-progress { max-width: 13rem; }
  .account-sections { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; }
  .account-summary { gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 13rem; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .auth-story { width: 40%; padding: 2.5rem; }
  .auth-shell .app-workspace { margin-left: 40%; }
  .story-copy h2 { font-size: 2.8rem; }
  .story-footer { left: 2.5rem; }
  .tour-scene { bottom: -1rem; }
}
@media (max-width: 50rem) {
  .app-sidebar { inset: auto 0 0; width: 100%; height: 4.8rem; padding: .3rem .6rem; flex-direction: row; gap: .2rem; border-top: 1px solid var(--line); border-right: 0; }
  .sidebar-brand, .sidebar-caption, .sidebar-footer { display: none; }
  .app-nav { flex: 1; flex-direction: row; gap: .25rem; }
  .app-nav a { flex: 1; justify-content: center; gap: .5rem; padding: .5rem; font-size: .8rem; min-height: 4rem; }
  .app-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); }
  .sidebar-bottom { margin-top: 0; display: flex; align-items: stretch; }
  .sidebar-bottom form { display: flex; }
  .sidebar-signout { width: auto; gap: .4rem; padding: .5rem; font-size: .75rem; }
  .cabinet-shell .app-workspace { margin-left: 0; padding-bottom: 4.8rem; }
  .mobile-brand { display: inline-flex; }
  .mobile-brand img { width: 9.5rem; }
  .workspace-location { display: none; }
  .header-inner { min-height: 4.5rem; padding: .75rem 1.25rem; flex-wrap: wrap; }
  main.app-content { padding: 2rem 1.25rem 3rem; }
  .page-intro { gap: 1.5rem; margin-bottom: 2rem; }
  .page-intro > .button { font-size: .83rem; }
  .account-sections { display: block; }
  .section-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
  .account-summary { grid-template-columns: minmax(0, 1fr) 13rem; }
  .auth-story { display: none; }
  .auth-shell .app-workspace { margin-left: 0; }
  .auth-shell .header-inner { padding-inline: 1.5rem; }
  main.auth { max-width: 32rem; padding: 3rem 2rem; }
  .auth-intro { padding-top: 1rem; }
}
@media (max-width: 36rem) {
  h1 { font-size: 2rem; }
  .page-intro { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .page-intro > .button { width: 100%; }
  .title-count { height: 1.7rem; min-width: 1.7rem; font-size: .8rem; }
  .tour-tools { flex-direction: column-reverse; align-items: stretch; gap: .8rem; }
  .tour-search { max-width: none; flex-basis: auto; }
  .tour-filters { gap: .15rem; }
  .filter-button { padding: .5rem .55rem; font-size: .75rem; }
  .collection-labels { display: none; }
  .project-card { grid-template-columns: minmax(0, 1fr) 2.9rem; gap: .65rem; padding: 1.3rem 0; }
  .project-identity { grid-column: 1; gap: .75rem; }
  .project-symbol { width: 2.7rem; height: 3.2rem; }
  .project-progress { grid-column: 1; padding-left: 3.45rem; }
  .project-progress .hint { font-size: .7rem; }
  .project-card .status { grid-column: 1; grid-row: auto; margin-left: 3.45rem; }
  .project-open { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .project-card h2 { font-size: .95rem; }
  .workflow { gap: .75rem; }
  .workflow li { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .workflow strong { font-size: .73rem; }
  .workflow li div > span { font-size: .6rem; }
  .project-section-nav { gap: 1rem; }
  .project-section-nav a { font-size: .75rem; }
  .project-page.app-content { padding-top: 1rem; }
  .project-page .project-topbar { margin-bottom: .75rem; }
  .project-page .project-heading { margin-bottom: 1rem; }
  .project-page .project-heading h1 { margin-bottom: .65rem; }
  .project-page .project-section-nav { margin-bottom: .75rem; }
  .project-page .project-section-nav a { min-height: 2.95rem; }
  .project-page .workflow { padding-block: .5rem; margin-bottom: .75rem; }
  .tour-hero { padding: 1.3rem; }
  .tour-hero button, .tour-hero .button { width: 100%; }
  .publish-panel { padding: 1.1rem; }
  .publish-panel > button[type="submit"] { min-width: 0; }
  .share-row > input, .share-row > textarea { flex-basis: 100%; }
  .card { padding: 1.3rem; }
  .room-row { flex-wrap: wrap; }
  .room-actions, .room-actions[open] { flex: auto; width: 100%; max-width: none; padding-left: 3.55rem; }
  .period-form { gap: .7rem; }
  .period-form label { flex-basis: 100%; }
  .period-form button { width: 100%; }
  .account-summary { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
  .credit-card { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding: 1rem; }
  .credit-card .eyebrow { margin-bottom: .3rem; }
  .credit-card strong { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 2rem; }
  .credit-card p:last-child { grid-column: 1; }
  .list li { flex-wrap: wrap; }
  .header-controls { width: 100%; gap: .65rem; align-items: flex-start; }
  .cabinet-shell .header-inner { row-gap: .75rem; }
  .language-form { flex: 1; }
  .language-control { flex: 1; }
  .language-control { gap: .35rem; }
  .language-control .ui-icon { display: none; }
  .language-control select { width: 100%; max-width: none; }
  .language-form { flex-wrap: wrap; }
  .language-apply { padding-inline: .5rem; width: 100%; }
  .sidebar-signout { flex-direction: column; justify-content: center; gap: .25rem; min-width: 3.8rem; font-size: .6rem; }
  .app-nav a { flex-direction: column; gap: .25rem; font-size: .68rem; }
  main.auth { padding: 2rem 1.5rem; }
  .auth-intro h1 { font-size: 2rem; }
  .create-dialog .create-project { padding: 1.5rem; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { flex: 1; }
  .empty-state { padding: 3rem 1.25rem; }
  .site-footer { margin-inline: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }