/* ==========================================================================
   YazPlatform · Tool ENGINE styles (REUSABLE across all 5 tools)
   SozlesmeYaz / OzgecmisYaz / IlanYaz / DilekceYaz / TeklifYaz share this file.
   App workspace: full-viewport split (sidebar + preview). Mobile-first,
   tokens only, animations always on. Both light + dark.
   ========================================================================== */

/* ---------- App shell ---------- */
.tool-body {
  min-height: 100svh;
  overflow: hidden;            /* the workspace owns the scroll, not the page */
}

/* ============ SLIM APP TOP BAR ============ */
.app-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  block-size: var(--header-h);
  padding-inline: clamp(0.8rem, 3vw, 1.4rem);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid var(--border);
}
.app-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  padding-inline: 0.7rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text2);
  border: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-bar__back:hover { background: var(--accent-dim); color: var(--accent-l); }
.app-bar__back svg { inline-size: 1.1rem; block-size: 1.1rem; }
.app-bar__back span { display: none; }

.app-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline: auto;
}
.app-bar__brand img { inline-size: 1.7rem; block-size: 1.7rem; }
.app-bar__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.app-bar__title em { font-style: italic; font-weight: 300; color: var(--accent-l); }

.app-bar__theme {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-bar__theme:hover { background: var(--accent-dim); color: var(--accent-l); }
.app-bar__theme svg { inline-size: 1.3rem; block-size: 1.3rem; }
.app-bar__theme .ico-moon { display: none; }
:root[data-theme="dark"] .app-bar__theme .ico-sun,
.app-bar__theme .ico-sun { display: block; }
:root[data-theme="dark"] .app-bar__theme .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-bar__theme .ico-sun { display: none; }
  :root:not([data-theme="light"]) .app-bar__theme .ico-moon { display: block; }
}
:root[data-theme="light"] .app-bar__theme .ico-sun { display: block; }
:root[data-theme="light"] .app-bar__theme .ico-moon { display: none; }

@media (min-width: 30em) {
  .app-bar__back span { display: inline; }
}

/* ============ WORKSPACE SPLIT ============ */
.workspace {
  position: relative;
  block-size: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 64em) {
  .workspace {
    grid-template-columns: minmax(22rem, 30rem) 1fr;
    transition: grid-template-columns var(--dur) var(--ease-out);
  }
  /* Collapsed: sidebar becomes a slim vertical icon rail. */
  .workspace.is-sidebar-collapsed {
    grid-template-columns: 4.4rem 1fr;
  }
}

/* ---------- LEFT SIDEBAR ---------- */
.ws-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  block-size: calc(100svh - var(--header-h));
  border-inline-end: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-l) 5%, var(--surface)), var(--surface) 30%);
}

/* "Daralt" button at the top of the full sidebar (desktop). */
.ws-sidebar__collapse {
  display: none;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 2.2rem;
  margin-block-end: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  border: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ws-sidebar__collapse:hover { background: var(--accent-dim); color: var(--accent-l); }
.ws-sidebar__collapse svg { inline-size: 1rem; block-size: 1rem; }
@media (min-width: 64em) {
  .ws-sidebar__collapse[hidden] { display: none; }
  .ws-sidebar__collapse:not([hidden]) { display: inline-flex; }
}

/* ---------- Collapsed vertical type RAIL (item 6, desktop only) ---------- */
.ws-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.8rem;
  block-size: 100%;
}
.ws-rail__expand {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  margin-block-end: 0.4rem;
  border-radius: var(--r-pill);
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ws-rail__expand:hover { background: var(--accent-dim); color: var(--accent-l); }
.ws-rail__expand svg { inline-size: 1.2rem; block-size: 1.2rem; }
.ws-rail__types {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  inline-size: 100%;
  align-items: center;             /* center the icon rail in the column */
}
/* Each rail type (item 5): when COLLAPSED it is a perfect square whose icon is
   centered on both axes (grid place-items:center). On hover/focus it grows to
   a flyout row revealing the label · the icon box keeps its fixed square size so
   it never shifts or clips. */
.ws-rail__type {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem;   /* icon column; label column added on hover */
  align-items: center;
  justify-items: start;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  padding: 0;
  border-radius: var(--r-m);
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text2);
  overflow: hidden;
  transition: inline-size var(--dur) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ws-rail__ico {
  flex: none;
  display: grid; place-items: center;
  /* Fixed square that exactly fills the closed pill's inner box (2.8rem minus
     the 1.5px border on each side) · the icon stays perfectly centered. */
  inline-size: calc(2.8rem - 3px); block-size: calc(2.8rem - 3px);
}
.ws-rail__ico svg {
  inline-size: 1.35rem; block-size: 1.35rem;
  display: block;
  overflow: visible;               /* never clip stroke caps */
}
.ws-rail__label {
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 0;
  padding-inline-end: 0.9rem;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ws-rail__type:hover,
.ws-rail__type:focus-visible {
  inline-size: 9.5rem;
  /* Add the label column on hover so the text actually has room to appear.
     Without this the grid stays a single icon column and the label, even at
     opacity 1, is clipped by overflow:hidden (so no "Kira"/"Hizmet" showed). */
  grid-template-columns: 2.8rem 1fr;
  justify-items: start;
  border-color: var(--accent-l);
  color: var(--accent-l);
  /* SOLID opaque flyout · layer accent tint over an OPAQUE surface so content
     underneath never shows through (item 7c). */
  background:
    linear-gradient(150deg, var(--accent-dim), transparent),
    var(--surface);
  z-index: 2;
  box-shadow: var(--shadow-m);
}
.ws-rail__type:hover .ws-rail__label,
.ws-rail__type:focus-visible .ws-rail__label { opacity: 1; }
.ws-rail__type.is-active {
  border-color: var(--accent-l);
  color: var(--accent-l);
  box-shadow: inset 0 0 0 1px var(--accent-l);
}

/* When collapsed: hide the scroll panel, show the rail, shrink the column. */
@media (min-width: 64em) {
  .is-sidebar-collapsed .ws-sidebar { width: 100%; }
  .is-sidebar-collapsed .ws-sidebar__scroll,
  .is-sidebar-collapsed .ws-sidebar__foot { display: none; }
  .is-sidebar-collapsed .ws-rail { display: flex; }
}
.ws-sidebar__scroll {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vw, 1.7rem);
  scrollbar-width: thin;
}
.ws-sidebar__scroll::-webkit-scrollbar { inline-size: 8px; }
.ws-sidebar__scroll::-webkit-scrollbar-thumb {
  background: var(--border-s); border-radius: 99px;
}

.sb-eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-l);
  margin-block-end: 0.7rem;
}

/* ---------- Type tabs ---------- */
.type-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.type-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: start;
  min-block-size: 3.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-m);
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.type-tab:hover { border-color: var(--accent-l); transform: translateY(-1px); }
.type-tab[aria-checked="true"] {
  border-color: var(--accent-l);
  background: linear-gradient(150deg, var(--accent-dim), transparent);
  box-shadow: inset 0 0 0 1px var(--accent-l);
}
.type-tab__ico {
  flex: none;
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem;
  border-radius: var(--r-s);
  background: var(--accent-dim);
  color: var(--accent-l);
}
.type-tab__ico svg { inline-size: 1.2rem; block-size: 1.2rem; overflow: visible; }
.type-tab__txt { display: flex; flex-direction: column; line-height: 1.15; min-inline-size: 0; }
.type-tab__txt b { font-size: var(--step-0); font-weight: 600; }
.type-tab__txt span { font-size: 0.72rem; color: var(--muted); }

/* ---------- Fields ---------- */
.fields { display: flex; flex-direction: column; gap: 0.95rem; }
/* Section header inside the field list (data-driven `group` marker). */
.field-group {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-l);
  padding-block-end: 0.4rem;
  margin-block-start: 0.4rem;
  border-block-end: 1px solid var(--border);
}
.field-group:first-child { margin-block-start: 0; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-inline-size: 0; }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text2);
}
.field .req { color: var(--accent-l); }
.field__hint { font-size: 0.72rem; color: var(--muted); }

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  min-block-size: 2.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-s);
  border: 1.5px solid var(--border-s);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-block-size: 4.2rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-l);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.field--err input, .field--err textarea, .field--err select,
.field--err .currency-field, .field--err .wheel-date {
  border-color: #d65a4a !important;
  box-shadow: 0 0 0 3px rgba(214, 90, 74, 0.18) !important;
  animation: field-shake 0.4s var(--ease-out);
}
@keyframes field-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- Currency field ---------- */
.currency-field {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--r-s);
  border: 1.5px solid var(--border-s);
  background: var(--card-bg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.currency-field:focus-within { border-color: var(--accent-l); box-shadow: 0 0 0 3px var(--accent-dim); }
.currency-field input {
  border: none !important; box-shadow: none !important; background: transparent;
  min-block-size: 2.8rem;
}
.currency-field__sym {
  flex: none;
  padding-inline: 0.9rem;
  font-weight: 700;
  color: var(--accent-l);
  font-size: var(--step-0);
}

/* ---------- In-form SELECT · branded custom listbox (item G) ----------
   Replaces the native <select> with a brand-styled dropdown: custom arrow,
   focus ring, hover/selected states, and a custom-scrollbar menu. Stays an
   accessible listbox (roving options + keyboard) built in tool.js. */
.sel-dd { position: relative; }
.sel-dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  inline-size: 100%;
  min-block-size: 2.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-s);
  border: 1.5px solid var(--border-s);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--step-0);
  text-align: start;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sel-dd__btn:hover { border-color: var(--accent-l); }
.sel-dd__btn:focus-visible,
.sel-dd.is-open .sel-dd__btn {
  outline: none;
  border-color: var(--accent-l);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.sel-dd__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-dd__chev {
  flex: none;
  inline-size: 1.1rem; block-size: 1.1rem;
  color: var(--text2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.sel-dd.is-open .sel-dd__chev { transform: rotate(180deg); }
.sel-dd__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  z-index: 30;
  max-block-size: 15rem;
  overflow-y: auto;
  padding: 0.35rem;
  border-radius: var(--r-m);
  border: 1px solid var(--border);
  background: var(--surface);      /* SOLID · never see-through */
  box-shadow: var(--shadow-l);
  animation: font-dd-in var(--dur-fast) var(--ease-out);
}
.sel-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-s);
  color: var(--text);
  font-size: var(--step-0);
  text-align: start;
  transition: background var(--dur-fast) var(--ease-out);
}
.sel-dd__opt:hover { background: var(--accent-dim); }
.sel-dd__opt:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.sel-dd__tick { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent-l); opacity: 0; flex: none; }
.sel-dd__opt[aria-selected="true"] { background: var(--accent-dim); color: var(--accent-l); font-weight: 600; }
.sel-dd__opt[aria-selected="true"] .sel-dd__tick { opacity: 1; }

/* ---------- Custom-styled scrollbar for the dropdown menus (item G) ----------
   Thin, brand-accent thumb, rounded · applied to the font + select listboxes so
   long lists never show the default OS scrollbar. */
.font-dd__menu, .sel-dd__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-l) transparent;
}
.font-dd__menu::-webkit-scrollbar,
.sel-dd__menu::-webkit-scrollbar { inline-size: 8px; }
.font-dd__menu::-webkit-scrollbar-track,
.sel-dd__menu::-webkit-scrollbar-track { background: transparent; margin-block: 0.3rem; }
.font-dd__menu::-webkit-scrollbar-thumb,
.sel-dd__menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-l) 70%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.font-dd__menu::-webkit-scrollbar-thumb:hover,
.sel-dd__menu::-webkit-scrollbar-thumb:hover { background: var(--accent-l); background-clip: padding-box; }

/* ---------- Date field (clean native date selector · item 4) ----------
   A branded wrapper around <input type="date">. We overlay a readable Turkish
   caption ("3 Haziran 2026") on top of the native field while keeping the real
   input fully interactive (calendar + keyboard) underneath. */
.date-field {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 2.85rem;
  border-radius: var(--r-s);
  border: 1.5px solid var(--border-s);
  background: var(--card-bg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.date-field:focus-within {
  border-color: var(--accent-l);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.date-field__input {
  inline-size: 100%;
  min-block-size: 2.8rem;
  padding: 0.65rem 0.85rem;
  border: none !important;
  background: transparent;
  color: transparent;            /* native text hidden; caption shows instead */
  font-size: var(--step-0);
  caret-color: var(--accent-l);
}
.date-field__input::-webkit-datetime-edit { color: transparent; }
.date-field__input:focus { outline: none; }
.date-field__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: grayscale(1);
}
:root[data-theme="dark"] .date-field__input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .date-field__input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
}
/* Readable TR caption overlaid on the field (does not block the picker icon). */
.date-field__cap {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.85rem;
  inset-inline-end: 2.6rem;
  display: flex;
  align-items: center;
  font-size: var(--step-0);
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.date-field__cap.is-empty { color: var(--muted); }
/* Item 4: the "Tarih seçin" placeholder must NEVER linger.
   - EMPTY + focused: hide the caption and reveal the native editor so the user
     can type/pick (no "Tarih seçin" sitting over the live field).
   - FILLED (any focus state): the readable TR caption shows the chosen date and
     the native text stays hidden · no placeholder, no duplicate text. */
.date-field.is-focus:not(.is-filled) .date-field__cap { display: none; }
.date-field.is-focus:not(.is-filled) .date-field__input,
.date-field.is-focus:not(.is-filled) .date-field__input::-webkit-datetime-edit { color: var(--text); }

/* ---------- Sidebar sticky footer ---------- */
.ws-sidebar__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(0.9rem, 3vw, 1.3rem);
  border-block-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.progress__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.45rem;
  block-size: 4px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.progress__bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--pct, 0%);
  background: linear-gradient(90deg, var(--accent-l), var(--accent-ll));
  border-radius: 99px;
  transition: inline-size var(--dur) var(--ease-out);
}
.progress__txt { margin-inline-start: auto; }
.generate-btn { inline-size: 100%; }
.mobile-preview-btn { inline-size: 100%; display: none; }

/* ---------- RIGHT PREVIEW ---------- */
.ws-preview {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  block-size: calc(100svh - var(--header-h));
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-dim), transparent 60%),
    var(--bg2);
}
.ws-preview__bar {
  display: none;                 /* desktop: no header bar, full paper */
  align-items: center;
  gap: 0.6rem;
  flex: none;
  padding: 0.7rem 1rem;
  border-block-end: 1px solid var(--border);
}
.ws-preview__close {
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text2);
}
.ws-preview__close svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ws-preview__label { font-weight: 600; font-size: var(--step-0); }

.preview-notice {
  display: flex;
  gap: 0.6rem;
  flex: none;
  margin: 0.9rem clamp(0.9rem, 4vw, 2rem) 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-m);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text2);
  background: color-mix(in srgb, #d8a13a 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, #d8a13a 40%, transparent);
}
.preview-notice svg { flex: none; inline-size: 1.3rem; block-size: 1.3rem; color: #c98a22; }

.preview-scroll {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  place-items: start center;
}
/* A4 page look: ~21cm wide, sensible margins, white page so the on-screen
   preview matches the downloaded PDF. */
.preview-paper {
  inline-size: 100%;
  max-inline-size: 21cm;
}

/* ---------- Skeleton (live, mirrors the real document) ---------- */
.skeleton,
.doc {
  background: #fff;
  color: #14110d;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-l);
  inline-size: 100%;
  max-inline-size: 21cm;
  margin-inline: auto;
  padding: clamp(1.6rem, 2.2cm, 2.4cm) clamp(1.3rem, 2cm, 2.2cm);
}
.skeleton {
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(45,106,79,0.06) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: skel-shimmer 2.4s linear infinite;
  pointer-events: none;
}
@keyframes skel-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #14110d;
}
.skel__rule { block-size: 2px; background: #14110d; opacity: 0.8; margin-block: 0.8rem 1.4rem; }
.skel__sec {
  font-weight: 700; letter-spacing: 0.08em; font-size: 0.85rem;
  color: var(--accent); margin-block-end: 0.5rem;
}
.skel__party {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding-block: 0.35rem; border-block-end: 1px dashed rgba(20,17,13,0.14);
}
.skel__party b { font-weight: 600; color: #14110d; }
.skel__party span { font-size: 0.72rem; color: rgba(20,17,13,0.5); margin-inline-start: auto; }
.skel__madde { margin-block-start: 1.1rem; }
.skel__madde-h { display: block; font-weight: 700; font-size: 0.9rem; color: #14110d; margin-block-end: 0.4rem; }
.skel__line { display: block; block-size: 0.6rem; border-radius: 99px; background: rgba(20,17,13,0.08); margin-block: 0.3rem 0; }
.skel__line--short { inline-size: 62%; }
.skel__sign { display: flex; justify-content: space-between; gap: 1.5rem; margin-block-start: 2.4rem; }
.skel__sign span { flex: 1; text-align: center; font-size: 0.78rem; color: rgba(20,17,13,0.6); }
.skel__sign-line { display: block; block-size: 1px; background: #14110d; opacity: 0.5; margin-block-end: 0.4rem; }

/* ---------- The generated document ----------
   Sized like a real legal document: ~11pt base, line-height ~1.5, headings only
   modestly larger. Dense and professional, not oversized. Typography family /
   size / weight / alignment are overridden inline by the toolbar controls. */
.doc-wrap { position: relative; }
.doc {
  position: relative;
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;            /* ~11.5pt base */
  line-height: 1.5;
  color: #1c1812;
  outline: none;
}
.doc[contenteditable="true"] {
  box-shadow: var(--shadow-l), 0 0 0 2px var(--accent-l);
}
/* Justify alignment: keep last line + headings/signature ragged-left. */
.doc[data-align="justify"] p,
.doc[data-align="justify"] li { text-align: justify; text-justify: inter-word; }
.doc[data-align="justify"] h1,
.doc[data-align="justify"] h2,
.doc[data-align="justify"] h3,
.doc[data-align="justify"] .doc__sign { text-align: initial; }
.doc[data-align="justify"] h1 { text-align: center; }

.doc__sample-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c98a22;
  background: rgba(216,161,58,0.16);
  border: 1px solid rgba(216,161,58,0.4);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  margin-block-end: 1rem;
}

/* FIX 4 · ERROR STATE · shown when generation fails (no demo). A centred card
   inside the document area with a clear Turkish message and a "Tekrar Dene"
   button that re-runs generation. */
.doc-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-inline-size: 30rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 8vw, 4rem);
  font-family: var(--font-body);
}
.doc-error__ico {
  inline-size: 3rem; block-size: 3rem;
  color: #c0492f;
}
.doc-error__msg {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.45;
  color: #14110d;
}
.doc-error__retry {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  min-block-size: 2.75rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-l), var(--accent));
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 18px var(--accent-glow);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.doc-error__retry svg { inline-size: 1.2rem; block-size: 1.2rem; }
.doc-error__retry:hover { transform: translateY(-1px); box-shadow: 0 9px 24px var(--accent-glow); }
.doc-error__retry:active { transform: translateY(0); }
.doc-error__retry:focus-visible {
  outline: 2px solid var(--accent-l);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .doc-error__retry { transition: none; }
  .doc-error__retry:hover { transform: none; }
}
@media (prefers-color-scheme: dark) {
  .doc-error__msg { color: #f1ece4; }
}
.doc h1 {
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #14110d;
  margin-block-end: 0.4rem;
  break-after: avoid;            /* title never stranded from its content */
}
.doc h1 + * { margin-block-start: 1.2rem; }
.doc h2 {
  font-family: var(--font-display);
  font-size: 1.12em;
  font-weight: 700;
  color: var(--accent);
  margin-block: 1.2rem 0.4rem;
  break-after: avoid;            /* heading stays with the text under it */
  break-inside: avoid;
}
.doc h3 { font-size: 1.04em; font-weight: 700; margin-block: 0.9rem 0.3rem; break-after: avoid; }
.doc p { margin-block: 0.5rem; }
.doc strong { color: #14110d; }
.doc em { font-style: italic; }
.doc ul, .doc ol { padding-inline-start: 1.4rem; margin-block: 0.5rem; }
.doc ul li { list-style: disc; margin-block: 0.25rem; }
.doc ol { list-style: decimal; }
.doc ol li { margin-block: 0.25rem; }
/* Inline code rendered as a subtle styled span · never literal backticks. */
.doc__code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: rgba(20, 17, 13, 0.06);
  color: #14110d;
}
.doc hr {
  border: 0;
  block-size: 1px;
  background: rgba(20, 17, 13, 0.22);
  margin-block: 1.1rem;
}
/* Bilgi/künye tables rendered as clean bordered tables (item 1).
   FIX 1: the AI often emits a PLAIN <table> with NO class, so we style BOTH
   `.doc__table` AND any bare `<table>` inside the document the same way · borders,
   padding, header bg, full width, 2-column label/value look · so the AI table
   renders as a clean bordered künye table in the preview and matches the PDF. */
.doc__table,
.doc table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 0.9rem;
  font-size: 0.94em;
}
.doc__table th, .doc__table td,
.doc th, .doc td {
  border: 1px solid rgba(20, 17, 13, 0.22);
  padding: 0.4rem 0.6rem;
  text-align: start;
  vertical-align: top;
}
.doc__table th,
.doc th,
.doc thead th {
  background: rgba(20, 17, 13, 0.05);
  font-weight: 700;
}
/* First column of a 2-column künye table reads as a label (bold-ish, narrower). */
.doc table td:first-child { font-weight: 600; inline-size: 38%; }
/* Orphan / widow control across page breaks (item 3 · no sarkma). */
.doc p, .doc li { orphans: 3; widows: 3; break-inside: avoid; }
/* Keep a heading together with the paragraph that follows it. */
.doc h2 + p, .doc h3 + p { break-before: avoid; }

/* ---------- Hard page break (item 3 · table page 1 -> clauses page 2+) ----------
   The break is INVISIBLE in the document and PDF · NO "Sayfa sonu" label, no
   dashed marker leaking onto page 2. On screen it simply leaves clean vertical
   whitespace before the clauses so the multi-page document breathes like
   stacked A4 sheets; the PDF slicer reads its position and starts a fresh page
   with a top margin here. */
.doc__pagebreak {
  break-before: page;
  page-break-before: always;     /* legacy alias for print */
  display: block;
  block-size: 0;
  margin-block: 2.2rem;
}
/* No ::after label · the previous "Sayfa sonu" text + dashed line are removed. */

/* Item 3: parties' signature blocks sit HORIZONTALLY side by side at the bottom
   (KİRACI | KİRALAYAN, or with kefil: KİRACI | KEFİL | KİRALAYAN). A grid with
   equal columns keeps them in ONE row and bottom-aligned; the whole row never
   splits across a page break. On very narrow phones it falls back to stacking. */
.doc__sign {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 1.2rem 1.8rem;
  margin-block-start: 2.8rem;
  break-inside: avoid;           /* signature row never splits / strands alone */
  break-before: avoid;           /* keep it with the preceding final clause */
}
.doc__sign > div { text-align: center; min-inline-size: 0; }
.doc__sign span { display: block; font-size: 0.8em; color: rgba(20,17,13,0.6); }
.doc__sign b { display: block; margin-block: 0.3rem; word-break: break-word; }
.doc__sign-line { display: block; block-size: 1px; background: #14110d; opacity: 0.5; margin-block-start: 2.4rem; }

/* ============ TOP TOOLBAR (item 7 · all preview actions, sticky top) ============ */
.doc-toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 8;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.55rem clamp(0.7rem, 3vw, 1.2rem);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--border);
}
.doc-toolbar__grp {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.doc-toolbar__grp + .doc-toolbar__grp {
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--border);
}
.doc-toolbar__grp--share { margin-inline-start: auto; }

/* Typography controls · branded font dropdown (item 8) */
.font-dd { position: relative; }
.font-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-s);
  border: 1px solid var(--border-s);
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.font-dd__btn:hover { border-color: var(--accent-l); }
.font-dd__btn:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 1px; }
.font-dd__btn svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent-l); flex: none; }
.font-dd__btn [data-font-label] {
  max-inline-size: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.font-dd__chev {
  color: var(--text2) !important;
  transition: transform var(--dur-fast) var(--ease-out);
}
.font-dd.is-open .font-dd__chev { transform: rotate(180deg); }
.font-dd__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-start: 0;
  z-index: 30;
  min-inline-size: 13rem;
  max-block-size: 60vh;
  overflow-y: auto;
  padding: 0.4rem;
  border-radius: var(--r-m);
  border: 1px solid var(--border);
  background: var(--surface);     /* SOLID, opaque · never see-through */
  box-shadow: var(--shadow-l);
  animation: font-dd-in var(--dur-fast) var(--ease-out);
}
@keyframes font-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.font-dd__group {
  padding: 0.4rem 0.6rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.font-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-s);
  color: var(--text);
  font-size: 1rem;
  text-align: start;
  transition: background var(--dur-fast) var(--ease-out);
}
.font-dd__opt:hover { background: var(--accent-dim); }
.font-dd__opt:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.font-dd__tick { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent-l); opacity: 0; flex: none; }
.font-dd__opt[aria-selected="true"] { background: var(--accent-dim); color: var(--accent-l); }
.font-dd__opt[aria-selected="true"] .font-dd__tick { opacity: 1; }
.tb-step {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-s);
  background: var(--card-bg);
}
.tb-step__val {
  min-inline-size: 2.6rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}
.tb-btn {
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: var(--r-pill);
  color: var(--text2);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tb-step .tb-btn { inline-size: 2.1rem; block-size: 2.1rem; }
.tb-btn svg { inline-size: 1.05rem; block-size: 1.05rem; }
.tb-btn:hover { background: var(--accent-dim); color: var(--accent-l); }
.tb-btn:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 1px; }
.tb-btn[aria-pressed="true"], .tb-btn.is-on { background: var(--accent); color: #fff; }
/* Align button shows the icon matching the current alignment. */
.tb-btn[data-typo="align"] .ico-align-justify { display: none; }
.tb-btn[data-typo="align"][data-align="justify"] .ico-align-start { display: none; }
.tb-btn[data-typo="align"][data-align="justify"] .ico-align-justify { display: block; }

/* Document action buttons (shared) */
.doc-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.doc-action svg { inline-size: 1.1rem; block-size: 1.1rem; }
.doc-action:hover { background: var(--accent-dim); color: var(--accent-l); }
.doc-action:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 1px; }
.doc-action.is-on { background: var(--accent); color: #fff; }
/* Clear-preview action (item F): a subtle, intentional reset · neutral until
   hover, then a soft warning tint so it reads as "start over". */
.doc-action--clear { color: var(--muted); }
.doc-action--clear:hover {
  background: color-mix(in srgb, #d65a4a 14%, transparent);
  color: #d65a4a;
}
/* Edit/Save icon swap (item 1): the same button shows Kaydet while editing. */
.doc-action[data-action="edit"] .ico-save { display: none; }
.doc-action[data-action="edit"].is-editing .ico-edit { display: none; }
.doc-action[data-action="edit"].is-editing .ico-save { display: block; }

/* ---------- Share pills (slide in, under the toolbar) ---------- */
.share-pills {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.7rem clamp(0.9rem, 4vw, 2rem) 0;
}
.share-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.6rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border-s);
  box-shadow: var(--shadow-s);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-spring),
              border-color var(--dur-fast) var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.share-pills.is-on .share-pill { opacity: 1; transform: none; }
.share-pill:hover { border-color: var(--accent-l); }
.share-pill:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px; }
.share-pill svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent-l); }
.share-pill.is-busy { opacity: 0.6; pointer-events: none; }
.share-pill[disabled] { cursor: progress; }

/* ---------- Satisfaction prompt ---------- */
.satisfy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-m);
  font-size: 0.86rem;
  color: var(--text2);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent-l) 30%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.satisfy.is-on { opacity: 1; transform: none; }
.satisfy a {
  font-weight: 700;
  color: var(--accent-l);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ FULLSCREEN CREATION ANIMATION ============ */
.creation {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 2rem;
  text-align: center;
  background:
    radial-gradient(60% 50% at 50% 40%, var(--accent-dim), transparent 70%),
    color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.42s var(--ease-out);
}
.creation.is-on { opacity: 1; }
.creation__core {
  position: relative;
  inline-size: 6rem; block-size: 6rem;
  display: grid; place-items: center;
}
.creation__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid var(--accent-dim);
  border-block-start-color: var(--accent-l);
  animation: spin 1s linear infinite;
}
.creation__pen {
  display: grid; place-items: center;
  inline-size: 3.4rem; block-size: 3.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-l), var(--accent));
  color: #fff;
  box-shadow: 0 8px 26px var(--accent-glow);
  animation: pen-bob 1.6s var(--ease-out) infinite;
}
/* FIX 5: the brand pencil glyph (logo-glyph.svg · viewBox 0 0 500 500) is a
   FILLED path centred in its box; sized a touch larger so the pencil reads
   clearly inside the circular badge. */
.creation__pen svg { inline-size: 2.7rem; block-size: 2.7rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pen-bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
.creation__head {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
}
/* Item 9: the "hap bilgi" messages SLIDE across sequentially · each enters
   from the right, rests centered, then exits to the left as the next arrives. */
.creation__tip {
  max-inline-size: 32rem;
  min-block-size: 3.5rem;
  font-size: var(--step-0);
  color: var(--text2);
  line-height: 1.5;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  will-change: transform, opacity;
}
/* Pre-entry: parked off-screen to the right, no transition (set in JS). */
.creation__tip.is-pre {
  opacity: 0;
  transform: translateX(2.5rem);
  transition: none;
}
/* Resting in view. */
.creation__tip.is-in { opacity: 1; transform: translateX(0); }
/* Exiting to the left. */
.creation__tip.is-out { opacity: 0; transform: translateX(-2.5rem); }
@media (prefers-reduced-motion: reduce) {
  .creation__tip,
  .creation__tip.is-pre,
  .creation__tip.is-out { transform: none; }
}
.creation__bar {
  inline-size: min(20rem, 70vw);
  block-size: 5px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.creation__bar span {
  display: block;
  block-size: 100%;
  inline-size: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-l), var(--accent-ll));
  animation: bar-slide 1.4s var(--ease-out) infinite;
}
@keyframes bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  inset-block-end: 1.4rem;
  inset-inline: 0;
  margin-inline: auto;
  z-index: 300;
  inline-size: max-content;
  max-inline-size: calc(100vw - 2rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-l), var(--accent));
  box-shadow: var(--shadow-l);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }
.toast svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* ============ MOBILE (< 64em): fullscreen preview sheet ============ */
@media (max-width: 63.99em) {
  .workspace { grid-template-columns: 1fr; }
  .ws-sidebar { border-inline-end: none; }
  .mobile-preview-btn { display: inline-flex; }

  .ws-preview {
    position: fixed;
    inset: 0;
    z-index: 120;
    block-size: 100svh;
    transform: translateY(100%);
    transition: transform 0.45s var(--ease-out);
    visibility: hidden;
  }
  .is-preview-open .ws-preview {
    transform: none;
    visibility: visible;
  }
  .ws-preview__bar { display: flex; }
  /* Item 9: on phones the on-screen paper FITS the viewport · no 21cm-wide A4
     centered with huge side gaps / horizontal scroll. The paper fills the
     available width minus a small gutter, and the document padding shrinks to
     readable rem values so text is legible without zooming. The PDF export is
     unaffected · it always rebuilds the fixed 794px A4 clone. */
  .preview-scroll { padding: 0.85rem; }
  .preview-paper {
    max-inline-size: none;
    inline-size: 100%;
  }
  .skeleton,
  .doc {
    max-inline-size: none;
    inline-size: 100%;
    padding: 1.15rem 1.05rem;
    font-size: 0.9rem;
  }
  .doc__table, .doc table { font-size: 0.86em; }
  .doc__table th, .doc__table td,
  .doc th, .doc td { padding: 0.32rem 0.45rem; }
  /* Item 3: on narrow phones the signature columns may stack (PDF stays in
     columns across the A4 width · only the on-screen preview wraps here). */
  @media (max-width: 28em) {
    .doc__sign { grid-auto-flow: row; grid-auto-columns: auto; }
    .doc__sign-line { margin-block-start: 1.8rem; }
  }
  /* Item 5: the toolbar must FIT a 360px phone · no ambiguous sideways scroll.
     It WRAPS to multiple rows and the action labels collapse to icon-only
     (accessible aria-labels remain on the buttons). */
  .doc-toolbar {
    gap: 0.4rem 0.4rem;
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
  }
  .doc-toolbar__grp { flex: 0 1 auto; }
  .doc-toolbar__grp + .doc-toolbar__grp {
    padding-inline-start: 0.5rem;
    border-inline-start: 1px solid var(--border);
  }
  .doc-toolbar__grp--share { margin-inline-start: 0; }
  /* Icon-only document actions on mobile (keep them square + reachable). */
  .doc-action {
    padding: 0.4rem;
    inline-size: 2.6rem;
    justify-content: center;
  }
  .doc-action span { display: none; }
  .font-dd__btn [data-font-label] { max-inline-size: 5rem; }
  /* Desktop-only rail / collapse controls never apply on mobile. */
  .ws-rail, .ws-sidebar__collapse { display: none !important; }
}

/* ============ Reduced motion: keep flows, ease shimmer only ============ */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ============ PRINT · clean A4 pages (item 3) ============ */
@page { size: A4; margin: 1.6cm; }
@media print {
  .app-bar, .ws-sidebar, .ws-rail, .ws-preview__bar, .doc-toolbar, .share-pills,
  .satisfy, .preview-notice, .creation, yp-cookie { display: none !important; }
  .tool-body { overflow: visible; }
  .workspace, .ws-preview, .preview-scroll, .preview-paper, .doc-wrap {
    display: block; block-size: auto; max-inline-size: none; overflow: visible;
  }
  .ws-preview { background: none; }
  .doc {
    box-shadow: none;
    border-radius: 0;
    max-inline-size: none;
    inline-size: auto;
    padding: 0;
    font-size: 11pt;
    color: #000;
  }
  .doc__sample-tag { display: none !important; }
  /* Reinforce orphan/widow + keep-together rules for the printed output. */
  .doc h1, .doc h2, .doc h3 { break-after: avoid; }
  .doc p, .doc li { break-inside: avoid; orphans: 3; widows: 3; }
  .doc__sign { break-inside: avoid; break-before: avoid; }
}