/* TLTBE HQ theme for Final, Publish and Logo Studio: the same look as Studio (studio.css) and the public site.
   Loaded last on each page so it wins over their older inline styles. Tap controls come from studio-ui.js. */
@font-face { font-family: "Bebas Neue"; src: url(/site/fonts/bebas-neue-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(/site/fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(/site/fonts/eb-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(/site/fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Bebas Fallback"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial"); size-adjust: 78%; ascent-override: 115%; }

:root {
  --bg: #0e0d0c;
  --ink: #ecebe7;
  --muted: #bdb8b0;
  --accent: #ff5a1f;
  --accent-strong: #ff7843;
  --accent-ink: #160700;
  --glass: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .16);
  --display: "Bebas Neue", "Bebas Fallback", sans-serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
html { background: var(--bg) !important; }
html body { margin: 0; background: var(--bg) !important; color: var(--ink) !important; font: 17px/1.5 var(--text) !important; -webkit-tap-highlight-color: transparent; }
html body::before { display: none; }
html body :is(button, input, select, textarea) { font-family: var(--text) !important; }
:focus-visible { outline: 2px solid var(--accent-strong) !important; outline-offset: 2px !important; }
a { color: var(--ink); }
p, .note, .hint, small, .muted, .logo-status, .detail p, .intro p { color: var(--muted) !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 400 !important; letter-spacing: .01em !important; line-height: .95; color: var(--ink); }
h1 { font-size: clamp(56px, 8vw, 112px) !important; margin: 0 0 12px !important; }
h2 { font-size: clamp(28px, 3vw, 40px) !important; }
h3 { font-size: 22px !important; }
.kicker, .eyebrow, .logo-live-heading, .label, label, .destination-bar strong, .lane h3, .stat span {
  font-family: var(--display) !important; font-weight: 400 !important; letter-spacing: .08em !important; color: var(--muted) !important; font-size: 16px !important; text-transform: uppercase; }
.lane h3 { font-size: 18px !important; }

/* Headers (Final's studio header, Publish's header, Logo Studio's nav) */
.studio-header, body > header, .tltbe-os-nav { position: sticky !important; top: 0; z-index: 100; background: rgba(14, 13, 12, .62) !important; border: 0 !important; border-bottom: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
.studio-home, body > header > a, .tltbe-os-nav .tltbe-os-mark { font: 30px/1 var(--display) !important; letter-spacing: .02em !important; color: var(--ink) !important; }
.studio-home span, .tltbe-os-nav .tltbe-os-mark span { color: var(--accent) !important; }
.studio-mode-label, .studio-tagline, .tltbe-logo-nav-label, .tltbe-os-nav::after { font: 16px/1 var(--display) !important; letter-spacing: .08em !important; color: var(--muted) !important; border: 0 !important; }
body > header nav a { font-size: 18px !important; color: var(--muted) !important; }
body > header nav a.active { color: var(--ink) !important; text-decoration: underline; text-underline-offset: .3em; }

/* Glass surfaces */
.glass, .panel, .card, .stat, .lane, dialog, .save-project-box, .framing, .logo-export-settings {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; border-radius: 28px !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 34px rgba(0, 0, 0, .3) !important; color: var(--ink) !important; }
.save-project-box, .framing, .logo-export-settings { border-radius: 22px !important; background: rgba(0, 0, 0, .22) !important; box-shadow: none !important; }
.item, .saved-item, .saved-item-track, .caption { background: rgba(0, 0, 0, .25) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 20px !important; color: var(--ink) !important; }
.saved-item-track { border: 0 !important; }
.heading, .tabs { border-color: rgba(255, 255, 255, .1) !important; }
.preview { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 24px !important; }
canvas { border-radius: 18px; }
.stat strong { font: 48px/1 var(--display) !important; letter-spacing: .02em; color: var(--ink); }
dialog { width: min(94vw, 520px); padding: 26px !important; background: #191715 !important; }
dialog[open], .glass, .panel, .lane, .stat { animation: hq-rise .55s var(--ease) both; }
dialog::backdrop { background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes hq-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Fields */
html body :is(input:not([type=range]):not([type=file]):not([type=checkbox]), textarea, select) {
  background: rgba(0, 0, 0, .28) !important; border: 1px solid var(--glass-line) !important; border-radius: 18px !important; color: var(--ink) !important;
  padding: 13px 16px !important; font-size: 18px !important; text-transform: none; letter-spacing: 0; }
html body textarea { line-height: 1.5; }
label > :is(input, select, textarea) { margin-top: 10px !important; font-family: var(--text) !important; }
input[type=range] { accent-color: var(--ink) !important; background: none !important; border: 0 !important; padding: 0 !important; height: 30px; }
input[type=file] { font-size: 16px !important; color: var(--muted) !important; }
::placeholder { color: #8f8a83 !important; }

/* Buttons: glass pills; the main action of each page is orange */
html body :is(button, .btn):not(.ui-segment button):not(.saved-item-delete) {
  width: auto; min-height: 44px; padding: 0 18px !important; border-radius: 22px !important; border: 1px solid var(--glass-line) !important;
  background: var(--glass) !important; color: var(--ink) !important; font: 17px var(--text) !important; text-decoration: none; filter: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 22px rgba(0, 0, 0, .25); transition: transform 220ms var(--ease), background-color 220ms, color 220ms; }
@media (hover: hover) { html body :is(button, .btn):not(:disabled):hover { background-color: rgba(255, 255, 255, .14) !important; transform: none; } }
html body :is(button, .btn):not(:disabled):active { transform: scale(.95) !important; }
html body :is(.btn.primary, #share, #new, #export, form footer button[type=submit]) {
  background: var(--accent) !important; color: var(--accent-ink) !important; border: 0 !important; font: 22px/1 var(--display) !important; letter-spacing: .04em; min-height: 52px; border-radius: 26px !important;
  box-shadow: 0 10px 30px rgba(255, 90, 31, .25) !important; }
html body :is(.btn.primary, #share, #new, #export, form footer button[type=submit]):not(:disabled):hover { background: var(--accent-strong) !important; }
html body :is(button, .btn):disabled { opacity: .45; }
html body .destination-bar.destination-bar button[aria-pressed="true"], html body .tabs.tabs .tab[aria-selected="true"] { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.saved-item-delete { background: #a52a38 !important; color: #fff !important; }
.logo-actions, .actions { gap: 10px !important; }
#export { width: 100%; }

/* Tap controls built from selects (studio-ui.js) */
.ui-native { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.ui-segment { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 46px; padding: 3px; margin-top: 10px; border-radius: 23px; background: var(--glass); border: 1px solid var(--glass-line); }
.ui-segment button { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(14px, 3.9vw, 17px) !important; position: relative; z-index: 1; border: 0; background: none; border-radius: 20px; font: 17px var(--text); color: var(--ink); white-space: nowrap; text-transform: none; letter-spacing: 0; cursor: pointer; transition: color .3s; }
.ui-segment button[aria-pressed="true"] { color: var(--bg); }
.ui-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 20px; background: var(--ink); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .48s var(--ease); }
.ui-chips, .ui-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html body .ui-chips.ui-chips button[aria-pressed="true"] { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.ui-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 8px -2px 0; scroll-snap-type: x proximity; }
.ui-scroll::-webkit-scrollbar { display: none; }
.ui-scroll button { flex: none; scroll-snap-align: start; }
.ui-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; margin-top: 10px; }
html body .ui-grid.ui-grid button, .ui-gap { width: 44px; height: 44px; min-height: 0; padding: 0 !important; border-radius: 14px !important; display: grid; place-items: center; }
.ui-grid i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: transform .3s var(--ease), background-color .24s; }
.ui-grid button[aria-pressed="true"] i { background: var(--accent); transform: scale(1.8); }

/* Phone: the Studio / Final switcher as a floating glass bar */
@media (max-width: 900px) {
  body .tltbe-workflow { left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 4px; border-radius: 30px; border: 1px solid var(--glass-line);
    background: rgba(30, 27, 24, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 40px rgba(0, 0, 0, .45); }
  body .tltbe-workflow-indicator { top: 4px; left: 4px; width: calc((100% - 12px) / 2); height: 48px; border-radius: 25px; background: var(--ink); transition: transform .48s var(--ease); }
  body .tltbe-workflow a { border-radius: 25px; color: var(--ink); font: 17px var(--text); box-shadow: none; }
  body .tltbe-workflow a[aria-current=page] { color: var(--bg); }
}
@media (min-width: 901px) { .tltbe-workflow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Forms in dialogs: let fields shrink to the dialog's width on phones. */
dialog form, dialog label { grid-template-columns: minmax(0, 1fr); min-width: 0; }
dialog :is(input, textarea, select) { width: 100%; box-sizing: border-box; }
.synced-note { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); }
.synced-note strong { display: block; color: var(--ink); }