/* ====================================================
   Photo Border tool styles for /tools/photo-border/

   Loaded after /css/site.css. Shared design tokens, base reset,
   and body baseline come from site.css. This file contains the
   site chrome (nav, hero, footer) used by the tool pages and the
   component styles the Photo Border UI needs.

   Many of the component classes (drop-zone, option-btn, slider-card,
   toggle-switch, swatch, etc.) are also used by the Song Reel and
   Video Sync tools. They live in this file for Stage 1 to keep the
   page self-contained. After Stages 2 and 3 land their own tool
   stylesheets, shared component CSS can move into a dedicated
   shared file as a separate cleanup.
   ==================================================== */


/* ====================================================
   Drifted palette (matches /tools/index.html)

   This page intentionally uses the same drifted palette as the
   social tools tabs page so the visual switch between the two is
   seamless. The DRIFT comments and canonicalization plan in
   specs/DESIGN-tools-page-extraction.md apply here too.
   ==================================================== */

/* DRIFT: differs from /css/site.css canonical (e.g., --void: #0a0a0b
   vs canonical #0d0d0b; --parchment: #e8e0d0 vs #f4f1ea;
   --gold: #c9a84c vs #c9a96e). Resolve in the palette canonicalization
   task tracked in TASKS.md. */
:root {
  --void: #0a0a0b;
  --ink: #141416;
  --ink-light: #1e1e22;
  --ink-raised: #28282d;
  --parchment: #e8e0d0;
  --parchment-dim: rgba(232,224,208,0.65);
  --parchment-faint: rgba(232,224,208,0.35);
  --parchment-trace: rgba(232,224,208,0.12);
  --hazel: #6b7c4a;
  --hazel-glow: rgba(107,124,74,0.12);
  --hazel-dim: rgba(107,124,74,0.4);
  --gold: #c9a84c;
  --gold-bright: #d9b85c;
  --gold-dim: #7a6530;
  --gold-faint: rgba(201,168,76,0.10);
  --gold-glow: rgba(201,168,76,0.25);
  --labradorite: #5878a0;
  --rule: rgba(201,168,76,0.15);
  --danger: #c97e7e;
}

/* DRIFT: see :root above. */
[data-theme="light"] {
  --void: #f4f0e8;
  --ink: #faf7f2;
  --ink-light: #ffffff;
  --ink-raised: #ebe4d4;
  --parchment: #28221a;
  --parchment-dim: rgba(40,34,26,0.72);
  --parchment-faint: rgba(40,34,26,0.45);
  --parchment-trace: rgba(40,34,26,0.18);
  --hazel: #4a6230;
  --hazel-glow: rgba(74,98,48,0.10);
  --hazel-dim: rgba(74,98,48,0.40);
  --gold: #9a6e10;
  --gold-bright: #b07f1c;
  --gold-dim: #6e5010;
  --gold-faint: rgba(154,110,16,0.08);
  --gold-glow: rgba(154,110,16,0.25);
  --labradorite: #385870;
  --rule: rgba(40,34,26,0.14);
  --danger: #b54848;
}

html, body {
  font-size: 1.05rem;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.4; }
input, select { font-family: inherit; }


/* ====================================================
   Theme toggle (component styling; behavior in /scripts/site.js)
   ==================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--parchment-dim);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-dim); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }


/* ====================================================
   Navigation
   ==================================================== */
.tool-nav {
  position: relative;
  z-index: 10;
  padding: 2rem 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tool-nav a { color: var(--parchment-faint); text-decoration: none; font-size: 1.0rem; letter-spacing: 0.08em; transition: color 0.3s; }
.tool-nav a:hover { color: var(--hazel); }
.tool-nav .home { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--parchment); letter-spacing: 0.05em; }
.tool-nav-right { display: flex; align-items: center; gap: 1.2rem; }


/* ====================================================
   Hero
   ==================================================== */
.tool-hero { padding: 4vh 8vw 5vh; text-align: center; border-bottom: 1px solid var(--rule); }
.tool-hero .eyebrow { display: inline-block; padding: 5px 16px; background: var(--gold-faint); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 20px; margin-bottom: 1.4rem; }
.tool-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.15; color: var(--parchment); margin-bottom: 1rem; letter-spacing: -0.005em; }
.tool-hero .subtag { font-family: 'Source Sans 3', sans-serif; font-weight: 300; font-size: 1.15rem; color: var(--parchment-dim); max-width: 620px; margin: 0 auto; line-height: 1.65; }
/* Visible deploy stamp so the live build is verifiable without
   devtools. Format: Build YYYY-MM-DD (N). Bump on every push that
   changes this page. Pattern codified in CLAUDE.md. */
.tool-hero .build-stamp { margin-top: 1.2rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment-faint); font-variant-numeric: tabular-nums; }


/* ====================================================
   Privacy banner
   ==================================================== */
.privacy-banner {
  max-width: 880px;
  margin: 2.4rem auto 0;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(122,140,94,0.06);
  border: 0.5px solid var(--hazel-dim);
  border-radius: 999px;
  color: var(--parchment-dim);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}
.privacy-banner svg { color: var(--hazel); flex-shrink: 0; }
.privacy-banner strong { color: var(--parchment); font-weight: 500; }


/* ====================================================
   Main container, section tags, helper text
   ==================================================== */
main.tool { padding: 4vh 8vw 8vh; max-width: 1320px; margin: 0 auto; }
.section-tag { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 1rem; }
.tool-section { margin-bottom: 3rem; }
.helper-text { font-size: 0.95rem; color: var(--parchment-dim); margin-bottom: 1rem; line-height: 1.6; }


/* ====================================================
   Drop zone (file upload)
   ==================================================== */
.upload-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.drop-zone { background: rgba(244,241,234,0.025); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px dashed var(--parchment-trace); border-radius: 8px; padding: 1.6rem 1.8rem; cursor: pointer; display: flex; align-items: center; gap: 1.1rem; transition: border-color 0.3s, background 0.3s; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--gold-glow); background: rgba(244,241,234,0.05); }
.drop-zone.has-file { border-style: solid; border-color: var(--hazel-dim); }
.drop-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--void); border-radius: 4px; border: 1px solid var(--rule); color: var(--parchment-faint); flex-shrink: 0; transition: color 0.3s, border-color 0.3s; }
.drop-zone.has-file .drop-icon { color: var(--gold); border-color: var(--gold-dim); }
.drop-text { flex: 1; min-width: 0; }
.drop-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 0.3rem; }
.drop-name { font-size: 1.0rem; color: var(--parchment-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-zone.has-file .drop-name { color: var(--parchment); }


/* ====================================================
   Editor grid: preview on the left, settings on the right
   ==================================================== */
.editor-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 880px) { .editor-grid { grid-template-columns: 1fr; gap: 2rem; } }


/* ====================================================
   Preview card and frame
   ==================================================== */
.preview-card { background: rgba(244,241,234,0.03); border: 0.5px solid var(--parchment-trace); border-radius: 8px; padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.preview-frame { background: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,0.55); position: relative; }
.preview-frame canvas { display: block; }
.preview-controls { display: flex; align-items: center; gap: 1rem; width: 100%; padding-top: 0.4rem; }
.time-display { flex: 1; }
.time-display .dims { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--parchment-faint); text-transform: uppercase; margin-top: 0.25rem; }


/* ====================================================
   Aspect ratio picker (option button grid)
   ==================================================== */
.settings-stack { display: flex; flex-direction: column; gap: 2rem; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 0.55rem; }
.option-btn { padding: 0.95rem 0.8rem; background: rgba(244,241,234,0.025); color: var(--parchment-dim); border: 0.5px solid var(--parchment-trace); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; transition: all 0.2s; }
.option-btn:hover { color: var(--parchment); border-color: var(--hazel-dim); }
.option-btn.active { color: var(--parchment); border-color: var(--gold-dim); background: var(--gold-faint); }
.option-btn .hint { font-size: 0.72rem; color: var(--parchment-faint); font-weight: 300; letter-spacing: 0.02em; }
.option-btn.active .hint { color: var(--gold); }


/* ====================================================
   Feather controls: toggle switch, fade-color swatches, slider
   ==================================================== */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 6px; padding: 0.95rem 1.2rem; }
.toggle-label { display: flex; flex-direction: column; gap: 0.2rem; }
.toggle-label .label-main { font-size: 0.95rem; color: var(--parchment); }
.toggle-label .label-hint { font-size: 0.78rem; color: var(--parchment-faint); }
.toggle-switch { position: relative; width: 44px; height: 24px; background: var(--rule); border-radius: 12px; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--parchment-dim); border-radius: 50%; transition: transform 0.25s, background 0.25s; }
.toggle-switch.on { background: var(--gold-dim); }
.toggle-switch.on::after { transform: translateX(20px); background: var(--gold); }

.color-swatches {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.7rem;
  padding: 0.4rem 0.2rem;
}
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, transform 0.1s;
  position: relative;
}
.swatch:hover { border-color: var(--hazel-dim); }
.swatch.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--gold);
}
.swatch-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.swatch-input-wrap.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px var(--void) inset;
  pointer-events: none;
}
.color-input {
  width: 32px;
  height: 32px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input::-moz-color-swatch { border: none; border-radius: 50%; }
.swatch-label {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--parchment-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slider-card { background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 6px; padding: 1.1rem 1.3rem; }
.slider-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem; }
.slider-card-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment-dim); }
.slider-card-value { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.slider-card-extremes { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--parchment-faint); letter-spacing: 0.04em; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--rule); outline: none; border-radius: 1px; margin: 0.4rem 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 2px solid var(--void); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 2px solid var(--void); }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--parchment-faint); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--parchment-faint); }


/* ====================================================
   Export panel
   ==================================================== */
.export-card { background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 8px; padding: 1.8rem; display: flex; flex-direction: column; gap: 1.4rem; }
.export-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.export-header .summary { flex: 1; min-width: 240px; }
.export-header .summary .tag { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 0.5rem; }
.export-header .summary .figure { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--parchment); line-height: 1.2; }
.export-header .summary .figure .secondary { color: var(--parchment-faint); font-size: 1.2rem; }
.btn-primary { padding: 0.95rem 1.8rem; background: var(--gold); color: var(--void); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.7rem; transition: background 0.2s, transform 0.1s; }
.btn-primary:hover:not(:disabled) { background: var(--gold-bright); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }


/* ====================================================
   Empty state
   ==================================================== */
.placeholder-state { text-align: center; padding: 3rem 1rem; color: var(--parchment-dim); font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-style: italic; }


/* ====================================================
   Footer
   ==================================================== */
footer.tool-footer { padding: 3rem 8vw; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; color: var(--parchment-faint); font-size: 0.95rem; }
footer.tool-footer a { color: var(--parchment-faint); text-decoration: none; letter-spacing: 0.06em; transition: color 0.3s; }
footer.tool-footer a:hover { color: var(--hazel); }
.footer-privacy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.4rem;
  color: var(--hazel);
}
.footer-privacy svg { flex-shrink: 0; }


/* ====================================================
   Visibility utilities
   ==================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }


/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 768px) {
  .tool-nav { padding: 1.4rem 5vw; }
  main.tool { padding: 3vh 5vw 6vh; }
  .upload-row { grid-template-columns: 1fr; }
  .export-header { flex-direction: column; gap: 1rem; }
  .btn-primary { width: 100%; justify-content: center; }
  .settings-stack { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .option-grid { grid-template-columns: 1fr 1fr; }
  .settings-stack { gap: 1.2rem; }
  .swatch, .swatch-input-wrap { width: 40px; height: 40px; }
  .color-input { width: 40px; height: 40px; }
  .drop-zone { padding: 1.2rem 1.2rem; }
}