/* documents area (redesign). Loaded after app.css; uses tokens.css only (the printed page itself lives in
   templates/doc/_style.html.twig and is shown in an iframe). */

/* ── Header and notices ─────────────────────────────────── */
.doc-head .page-head__actions { flex-wrap: wrap; }
.doc-notes { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.doc-notes:empty { display: none; }
.doc-notes .callout > .icon { flex: none; margin-top: 2px; }
.doc-notes__body { display: grid; gap: var(--space-2); }
.doc-notes__body form { margin: 0; }
.callout--ok { background: var(--ok-soft); color: var(--ink); }
.callout--ok > .icon { color: var(--ok); }
.doc-warn ul { margin: 6px 0; padding-left: 1.2em; }
.doc-warn p { margin: 0; color: var(--ink-2); }
.doc-long .row { flex-wrap: wrap; gap: var(--space-2); }
.doc-long strong { font-size: 1rem; }

/* ── Layout: large preview, panel on the right (below it on phones) ── */
.doc-layout { display: grid; gap: var(--space-5); }
@media (min-width: 980px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.doc-desk { background: var(--surface-2); border-radius: var(--radius-lg); overflow: hidden; }
.doc-desk__frame { display: block; width: 100%; height: 1180px; border: 0; background: var(--surface-2); color-scheme: normal; }
.doc-desk__frame--short { height: 520px; }
@media (max-width: 700px) { .doc-desk__frame { height: auto; aspect-ratio: 210 / 310; } .doc-desk__frame--short { aspect-ratio: auto; height: 420px; } }

.doc-panel { display: grid; gap: var(--space-3); min-width: 0; }
@media (min-width: 980px) { .doc-panel { position: sticky; top: calc(var(--space-5) + 64px); } }
.doc-tabs { display: flex; width: 100%; }
.doc-tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill);
  color: var(--ink-2); font: 600 .9375rem/1 var(--font-sans); text-decoration: none; }
.doc-tabs a:hover { color: var(--ink); }
.doc-tabs a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.doc-pane[hidden] { display: none; }
.doc-pane form { margin: 0; }
.doc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.doc-fieldset legend.label { margin-bottom: var(--space-2); padding: 0; }
.doc-pane .small .icon { vertical-align: -3px; }
.doc-pane p { margin: 0; }

/* ── Design: template thumbnails (CSS pictures) + accent swatches ── */
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) 10px; }
.tpl { display: grid; gap: 6px; margin: 0; cursor: pointer; color: var(--ink-2); font: var(--text-small); font-weight: 400; }
.tpl__thumb { aspect-ratio: 210 / 297; border-radius: 6px; background: #fff; border: 1px solid var(--line-strong); padding: 10px 9px; display: grid; align-content: start; gap: 4px; overflow: hidden;
  transition: transform var(--dur-fast, .15s); }
.tpl:hover .tpl__thumb { transform: translateY(-1px); }
.tpl:has(input:checked) { color: var(--ink); font-weight: 600; }
.tpl:has(input:checked) .tpl__thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl:has(input:focus-visible) .tpl__thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.tpl__thumb i { display: block; height: 3px; border-radius: 2px; background: #d6dadf; }
.tpl__thumb i.h { height: 6px; width: 60%; background: #3a4047; }
.tpl__thumb i.c { width: 40%; background: var(--sw); }
.tpl__thumb--side { grid-template-columns: 32% 1fr; padding: 0; }
.tpl__thumb--side > span { padding: 9px 6px; display: grid; align-content: start; gap: 4px; }
.tpl__thumb--side > span:first-child { background: color-mix(in srgb, var(--sw) 14%, #fff); }
.tpl__thumb--side i.o { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--sw) 35%, #fff); margin-bottom: 2px; }
.tpl__thumb--bold { padding: 0; }
.tpl__thumb--bold .band { background: var(--sw); padding: 9px; display: grid; gap: 4px; }
.tpl__thumb--bold .band i.c { background: rgba(255, 255, 255, .7); }
.tpl__thumb--bold .band i.h { background: #fff; }
.tpl__thumb--bold .rest { padding: 6px 9px; display: grid; gap: 4px; }
.tpl__thumb--timeline i.l { margin-left: 22%; position: relative; }
.tpl__thumb--timeline i.l::before { content: ""; position: absolute; left: -7px; top: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--sw); }
.tpl__thumb--classic { justify-items: center; }
.tpl__thumb--classic i.h { width: 70%; background: #222; }
.tpl__thumb--classic i.r { width: 100%; height: 1px; background: #222; }
.tpl__thumb--europass .top { display: flex; gap: 5px; margin-bottom: 3px; }
.tpl__thumb--europass .top b { width: 14px; height: 18px; border-radius: 2px; background: #d6dadf; flex: none; }
.tpl__thumb--europass .top > span { flex: 1; display: grid; gap: 3px; align-content: start; }
.tpl__thumb--europass > i.c { width: 100%; height: 2px; }
.tpl__thumb--europass i.l { margin-left: 26%; }
.tpl__name { line-height: 1.3; }

.doc-swatches { flex-wrap: wrap; gap: 6px; }
.doc-swatch { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.doc-swatch:has(input:checked) .swatch { box-shadow: 0 0 0 2px var(--ink); }
.doc-swatch:has(input:focus-visible) .swatch { outline: 3px solid var(--focus); outline-offset: 2px; }
.doc-swatch:has(input:disabled) { cursor: not-allowed; }
.doc-swatch:has(input:disabled) .swatch { opacity: .3; cursor: not-allowed; }

/* ── E-mail design: Simple / Plain text (small pictures; paper is always white) ── */
.doc-mail-designs { display: grid; gap: var(--space-2); }
.doc-mail-design { display: flex; gap: var(--space-3); align-items: center; margin: 0; padding: 10px 12px; min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer; font-weight: 400; }
.doc-mail-design > span:last-child { display: grid; gap: 2px; min-width: 0; }
.doc-mail-design:hover { border-color: var(--line-strong); }
.doc-mail-design:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.doc-mail-design:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.doc-mail-design__pic { flex: none; width: 56px; height: 44px; border-radius: 6px; background: #fff; border: 1px solid var(--line-strong); padding: 7px; display: grid; align-content: start; gap: 4px; }
.doc-mail-design__pic i { display: block; height: 3px; border-radius: 2px; background: #d6dadf; }
.doc-mail-design__pic i.s { width: 70%; }
.doc-mail-design__pic b { display: block; height: 8px; width: 55%; margin-top: 2px; border-left: 2px solid var(--sw); background: linear-gradient(#3a4047, #3a4047) 4px 1px / 60% 2px no-repeat, linear-gradient(#b7bec6, #b7bec6) 4px 5px / 80% 2px no-repeat; }
.doc-mail-design__pic--plain i, .doc-mail-design__pic--plain b { border-radius: 0; }
.doc-mail-design__pic--plain b { border-left: 0; background: linear-gradient(#9aa1a9, #9aa1a9) 0 1px / 60% 2px no-repeat, linear-gradient(#9aa1a9, #9aa1a9) 0 5px / 80% 2px no-repeat; }

/* ── Rewrite ─────────────────────────────────────────────── */
.doc-chip { margin: 0; font-weight: 600; min-height: 40px; }
.doc-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.doc-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.doc-textarea { min-height: 88px; }
.doc-optional { font-weight: 400; }

/* ── Versions ────────────────────────────────────────────── */
.doc-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.doc-versions a { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 8px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; min-height: 44px; }
.doc-versions a:hover { background: var(--surface-2); }
.doc-versions a[aria-current="true"] { background: var(--accent-soft); }
.doc-versions__dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); }
.doc-versions__dot.is-current { border-color: var(--ok); color: var(--ok); }
.doc-versions__text { display: grid; gap: 2px; min-width: 0; }
.doc-versions__text .pill { justify-self: start; }