/* Shared Freeify theme: the portfolios' midnight, gold, serif and fine-rule system.
   Editing surfaces and runtime canvas geometry deliberately retain their own colors. */
:root {
  color-scheme: dark;
  --freeify-gutter: clamp(16px, 2.5vw, 40px);
  --freeify-bg: #0a0a1a;
  --freeify-panel: #0f1626;
  --freeify-raised: #192336;
  --freeify-text: #ececf1;
  --freeify-muted: #acb6c9;
  --freeify-gold: #d4af37;
  --freeify-line: #354056;
  --freeify-serif: Georgia, 'Times New Roman', serif;
  --studio-ivory: var(--freeify-bg);
  --studio-paper: var(--freeify-panel);
  --studio-ink: var(--freeify-text);
  --studio-muted: var(--freeify-muted);
  --studio-teal-950: #0a0a1a;
  --studio-teal-900: #182335;
  --studio-teal-800: #e0c577;
  --studio-teal-100: #192336;
  --studio-line: var(--freeify-line);
  --studio-apricot: var(--freeify-gold);
  --studio-ochre: var(--freeify-gold);
  --suite-bg: var(--freeify-bg);
  --suite-surface: var(--freeify-panel);
  --suite-surface-soft: var(--freeify-raised);
  --suite-ink: var(--freeify-text);
  --suite-muted: var(--freeify-muted);
  --suite-border: var(--freeify-line);
  --suite-accent: var(--freeify-gold);
  --suite-accent-strong: #e0c577;
  --suite-accent-soft: #192336;
}
* { box-sizing: border-box; }
body[data-studio] { margin: 0; background: var(--freeify-bg); color: var(--freeify-text); font: 16px/1.6 Inter, system-ui, sans-serif; }
body[data-studio] a { color: var(--freeify-gold); }
body[data-studio] :is(a, button, input, select, [tabindex]):focus-visible,
body[data-studio] :is(.upload, .drop):focus-within { outline: 3px solid #f1d978; outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--freeify-panel); }
.skip-link:focus { top: 12px; }
body[data-studio] > main { width: calc(100% - 2 * var(--freeify-gutter)); max-width: none; margin-inline: auto; }
.freeify-home { margin: auto; }
.freeify-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--freeify-line); }
.freeify-brand { display: inline-flex; gap: 20px; align-items: center; font: 23px var(--freeify-serif); color: var(--freeify-text) !important; text-decoration: none; }
.freeify-monogram { padding-right: 20px; border-right: 1px solid var(--freeify-line); font-size: 29px; }
.freeify-monogram span { color: var(--freeify-gold); }
.freeify-local { color: var(--freeify-muted); font-size: .875rem; }
.freeify-local::before { content: '●'; color: var(--freeify-gold); margin-right: 9px; font-size: 10px; }
.freeify-intro { padding: 58px 0 38px; }
.freeify-eyebrow { font-size: .875rem; color: var(--freeify-gold); letter-spacing: .14em; text-transform: uppercase; }
.freeify-intro h1 { font: 400 clamp(2.75rem, 5.7vw, 4.75rem)/1.08 var(--freeify-serif); letter-spacing: -.035em; margin: 22px 0; }
.freeify-intro h1 em { color: #e0c577; font-weight: 400; }
.freeify-intro > p:last-of-type { color: var(--freeify-muted); line-height: 1.8; }
.freeify-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; list-style: none; padding: 0; margin: 24px 0 0; font-size: .875rem; color: var(--freeify-muted); }
.freeify-trust li::before { content: '✓'; color: var(--freeify-gold); margin-right: 9px; }
.freeify-section-head { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--freeify-line); }
.freeify-section-head h2 { margin: 0; font: 400 1.65rem var(--freeify-serif); }
.freeify-section-head > span { color: var(--freeify-muted); font-size: .875rem; }
.freeify-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 22px; }
.freeify-tool { display: flex; flex-direction: column; padding: 28px; background: var(--freeify-panel); border: 1px solid var(--freeify-line); text-decoration: none; transition: border-color .18s, background .18s; }
.freeify-tool:hover { background: #151d2e; border-color: var(--freeify-gold); }
.freeify-tool-meta { display: flex; justify-content: space-between; gap: 15px; font-size: .875rem; color: var(--freeify-muted); }
.freeify-tool-meta > span:first-child { color: #e0c577; }
.freeify-tool h3 { font: 400 2rem var(--freeify-serif); color: var(--freeify-text); margin: 30px 0 12px; }
.freeify-tool p { color: var(--freeify-muted); margin: 0 0 25px; }
.freeify-tool-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--freeify-line); font-size: .875rem; }
.freeify-tool-bottom > span:last-child { font-size: 1.6rem; }
.freeify-privacy { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 28px 0; margin-top: 20px; font-size: .875rem; }
.freeify-privacy strong { color: #e0c577; font-weight: 500; }
.freeify-privacy p { color: var(--freeify-muted); margin: 0; }
.freeify-footer { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 24px 0; border-top: 1px solid var(--freeify-line); color: var(--freeify-muted); font-size: .875rem; }
/* Shared application chrome; existing responsive grids and drawer behavior remain. */
body[data-studio] :is(.studio-pdf-appbar, .studio-collage-appbar) { background: var(--freeify-panel); border: 1px solid var(--freeify-line); border-radius: 4px; box-shadow: none; }
body[data-studio] :is(.studio-pdf-brand-mark, .studio-collage-brand-mark) { background: transparent; color: var(--freeify-gold); border-right: 1px solid var(--freeify-line); border-radius: 0; box-shadow: none; font: 24px var(--freeify-serif); width: 54px; }
body[data-studio] :is(.studio-pdf-brand, .studio-collage-brand) strong { font: 20px var(--freeify-serif); }
body[data-studio] :is(.studio-pdf-brand, .studio-collage-brand) small { font-size: .875rem; }
body[data-studio] :is(.studio-pdf-local, .studio-collage-local) { color: var(--freeify-muted); font-size: .875rem; }
body[data-studio] :is(.studio-pdf-local, .studio-collage-local) i { background: var(--freeify-gold); box-shadow: none; }
body[data-studio] :is(.studio-pdf-intro, .studio-collage-intro) { padding: 28px 0 22px; margin-top: 4px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body[data-studio] :is(.studio-pdf-intro, .studio-collage-intro)::after { content: none; }
body[data-studio] :is(.studio-pdf-intro, .studio-collage-intro) h1 { font: 400 clamp(2.3rem, 4vw, 3.4rem)/1.15 var(--freeify-serif); letter-spacing: -.025em; color: var(--freeify-text); }
body[data-studio] :is(.studio-pdf-intro, .studio-collage-intro) .tag { color: var(--freeify-gold); font-size: .875rem; letter-spacing: .13em; margin-bottom: 10px; }
body[data-studio] :is(.studio-pdf-intro, .studio-collage-intro) .lead { margin-top: 12px; color: var(--freeify-muted); font-size: 1rem; }
body[data-studio] :is(.toolbar, .studio-pdf-output, #pages, .page, .modal-box, .preview-box) { background: var(--freeify-panel); border-color: var(--freeify-line); border-radius: 6px; box-shadow: none; }
body[data-studio] .drop { background: var(--freeify-panel); color: #e0c577; border: 1px dashed #7e744c; border-radius: 6px; box-shadow: none; }
body[data-studio] .drop:hover { background: #192336; border-color: var(--freeify-gold); box-shadow: none; }
body[data-studio] :is(button, select, .upload) { font-family: inherit; font-size: .875rem; font-weight: 600; }
body[data-studio] :is(.toolbar button, .toolbar select, .toolbar .upload, .toolbar .color-control, .toolbar .settings, .global-controls label, .page .controls button, .modal-actions button, #modalDone, #closePreview, .studio-tools-toggle-button) { background: var(--freeify-raised); color: var(--freeify-text); border: 1px solid var(--freeify-line); border-radius: 4px; box-shadow: none; min-height: 44px; }
body[data-studio] :is(.toolbar button, .toolbar select, .toolbar .upload, .page .controls button, .modal-actions button, #modalDone, #closePreview):hover { background: #29364d; color: var(--freeify-text); border-color: #897e54; box-shadow: none; }
body[data-studio] :is(.toolbar #preview, #download) { background: var(--freeify-gold); color: #101321; border: 1px solid var(--freeify-gold); border-radius: 4px; box-shadow: none; min-height: 44px; font-size: .875rem; }
body[data-studio] :is(.toolbar #preview, #download):hover:not(:disabled) { background: #e0c577; color: #101321; box-shadow: none; }
body[data-studio] #download:disabled { background: #293144; border-color: var(--freeify-line); color: #a7afbf; opacity: 1; }
body[data-studio] :is(.toolbar .settings input, .toolbar input[type=number]) { background: #0a101d; color: var(--freeify-text); border-color: #63718a; font-size: .875rem; }
body[data-studio] :is(.global-controls, .modal-actions label, .toolbar .settings label, .toolbar .color-control, .page .quality-row) { color: var(--freeify-muted); font-size: .875rem; }
body[data-studio] input[type=range] { accent-color: var(--freeify-gold); }
body[data-studio] :is(.studio-pdf-section-kicker, .studio-pdf-pages-head p, .drop .sub, .page .name, .notice, footer, .back) { font-size: .875rem; }
body[data-studio] :is(.studio-pdf-output h2, .studio-pdf-pages-head h2) { font: 400 1.6rem var(--freeify-serif); }
body[data-studio] :is(.studio-pdf-output .bar, .modal-head) { border-color: var(--freeify-line); }
body[data-studio] .studio-pdf-output-head #count { color: #e0c577; font-size: .875rem; border-radius: 4px; }
body[data-studio] :is(.toolbar #status, .status:not(:empty), .notice) { background: #192336; color: var(--freeify-muted); border-color: var(--freeify-line); border-radius: 4px; }
body[data-studio] :is(.page .controls button.delete, .modal-actions #modalDelete) { background: #39232e; color: #ffb8b8; border-color: #865665; }
body[data-studio] :is(.modal, .preview-modal) { background: #050811de; }
body[data-studio] .modal-preview { background: #252d3c; }
body[data-studio] .canvas-wrap { background: #252d3c; border-color: var(--freeify-line); border-radius: 6px; box-shadow: none; }
/* Keep the white artboard and black/white export text independent of UI colors. */
body[data-studio] .canvas { color-scheme: light; }
body[data-studio] .canvas .empty { color: #536174; }
body[data-studio] .canvas .empty strong { color: #25334b; }
@media(max-width: 700px) {
  .freeify-header { align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px 0; }
  .freeify-home { width: calc(100% - 32px); }
  .freeify-intro { padding-top: 32px; }
  .freeify-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .freeify-tools { grid-template-columns: 1fr; gap: 16px; }
  .freeify-tool { padding: 22px; }
  .freeify-tool-meta { flex-wrap: wrap; }
  .freeify-privacy { grid-template-columns: 1fr; gap: 8px; }
}
@media(max-width: 560px) {
  body[data-studio] .studio-collage-local { display: none; }
  body[data-studio] :is(.studio-pdf-appbar, .studio-collage-appbar) .back { font-size: .875rem; }
  body[data-studio] #pages { grid-template-columns: 1fr; }
  body[data-studio] .page .controls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-studio] .modal-actions label { flex-wrap: wrap; }
}
@media(prefers-reduced-motion: reduce) {
  body[data-studio] *, body[data-studio] *::before, body[data-studio] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body[data-studio] .canvas .empty { align-content: center; gap: 10px; padding: 24px; }
body[data-studio] .studio-tools-toggle-button { gap: 16px; }

body[data-studio] .freeify-tip { padding: 14px 18px; margin: 0 0 22px; background: var(--freeify-panel); border-left: 2px solid var(--freeify-gold); color: var(--freeify-muted); font-size: .875rem; }
body[data-studio] .freeify-tip strong { color: #e0c577; font-weight: 600; }
body[data-studio] .freeify-tip p { margin: 4px 0; line-height: 1.55; }
body[data-studio] .freeify-tip small { font-size: .875rem; }
body[data-studio] .freeify-tip a { text-decoration: underline; text-underline-offset: 3px; }

/* Full-width workspaces, with readable prose independent of grid width. */
.freeify-intro > p, .freeify-tool p, .freeify-privacy p, body[data-studio] .freeify-tip p { max-width: 72ch; }
.freeify-tool { min-width: 0; }
.freeify-tool h3 { overflow-wrap: anywhere; }