/* Azad studio shell — the parent chrome for every studio page.
   Geometry from /news-video/: 46px bar, viewport-locked grid, panes that
   scroll internally so the page itself never does.

   Shared deliberately. persian-studio and color-studio were already running
   byte-identical copies of this; keeping them separate is how the 23 copies of
   the consent bootstrap happened. One file, one visual identity. */
:root{
   --panel:var(--paper); --ink:#2A2418; --mut:var(--muted);
  --line:var(--surface-2); --line2:var(--line); --accent:var(--primary); --accent-d:var(--primary); --gold:var(--chrome-accent);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Top bar only: News Video's dark tokens. The tools themselves stay cream. */
  --bar:#151b25; --bar-2:#1b222e; --bar-line:#28313f;
  --bar-ink:#e8eef6; --bar-mut:#93a3b8; --bar-acc:var(--chrome-accent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);
  overflow:hidden}
[hidden]{display:none!important}

/* ---------- shell ----------
   Row 1 is `auto` rather than a hard 46px so a bar that wraps on a phone does
   not crush the tool underneath it; at any desktop width it measures 46px. */
#app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh}
/* Scoped to DIRECT children of #app on purpose. `.pane` is not a rare class
   name: Layout Studio calls its two side panels <aside class="pane left"> and
   <aside class="pane right">, nested inside .work. An unscoped
   `.pane:not(.on)` is two classes and outranks that page's own one-class
   `.pane` rule whatever the order, so linking this file would have hidden
   both panels. The child combinator cannot reach them. */
#app>.pane{grid-row:2;grid-column:1;min-width:0;min-height:0}
/* Two classes, so this beats `.az-wrap{display:grid}` (one class) no matter which
   is declared last. The first cut used `.pane{display:none}`, tied on
   specificity, lost on order, and left the Tool pane sitting on top of the
   other two -- which read as "About returns no data". */
#app>.pane:not(.on){display:none}
#app>.pane.on{display:grid}
#app>.pane.doc.on{display:block;overflow:auto;overscroll-behavior:contain}

/* ---------- top bar ---------- */
#top{grid-row:1;min-height:46px;display:flex;align-items:center;gap:10px;
  padding:0 12px;background:var(--bar);border-bottom:1px solid var(--bar-line);
  color:var(--bar-ink);flex-wrap:wrap}
#top .brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:inherit;border-radius:var(--radius-sm);padding:2px 6px;margin-inline-start:-6px;
  font-weight:700;font-size:var(--text-lg)}
#top .brand:hover{background:rgba(255,255,255,.07)}
#top .brand:focus-visible{outline:2px solid var(--bar-acc);outline-offset:2px}
#top .mark{color:var(--bar-acc);font-size:var(--text-md);line-height:1}
/* !important because several tools force `body h1{...!important}` to unify
   their headline -- pdf-editor paints it dark, which on this bar is unreadable,
   and its `body h1 span{color:inherit!important}` kills the gold accent. */
#top h1{font-size:var(--text-lg)!important;margin:0!important;font-weight:700!important;
  letter-spacing:.01em!important;white-space:nowrap;
  font-family:inherit!important;color:var(--bar-ink)!important;
  background:none!important;-webkit-text-fill-color:currentColor!important}
#top h1 span{color:var(--bar-acc)!important}
#top .sep{width:1px;height:22px;background:var(--bar-line);margin:0 2px}
#top .grow{flex:1}
#az-tabs{display:flex;gap:4px}
.tbtn{background:var(--bar-2);border:1px solid var(--bar-line);color:var(--bar-mut);
  border-radius:7px;padding:5px 10px;font:inherit;font-size:var(--text-sm);cursor:pointer;
  white-space:nowrap}
.tbtn:hover{border-color:#3a475a;color:var(--bar-ink)}
.tbtn[aria-pressed=true]{background:var(--bar-acc);border-color:var(--bar-acc);
  color:#1a1206;font-weight:700}
.tbtn:focus-visible{outline:2px solid var(--bar-acc);outline-offset:2px}
#top .lock{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:var(--text-sm);color:#9fe0c0;background:rgba(90,209,160,.10);
  border:1px solid rgba(90,209,160,.30);border-radius:var(--radius-pill);padding:4px 11px;
  white-space:nowrap}
#top .lock i{width:7px;height:7px;border-radius:50%;background:#5ad1a0;display:inline-block}
#top .alltools{font-family:var(--mono);font-size:var(--text-sm);color:var(--bar-ink);
  text-decoration:none;border:1px solid var(--bar-line);background:var(--bar-2);
  border-radius:var(--radius-sm);padding:5px 11px;white-space:nowrap}
#top .alltools:hover{border-color:var(--bar-acc)}
#top .menubtn{background:var(--bar-2);border:1px solid var(--bar-line);
  color:var(--bar-ink);border-radius:var(--radius-sm);padding:5px 11px;font-family:var(--mono);
  font-size:var(--text-sm);cursor:pointer;display:none}

/* ---------- left rail: 60px at rest, expands on hover over the stage ---------- */
.az-wrap{display:grid;grid-template-columns:60px minmax(0,1fr);min-height:0}
.az-side{position:relative;z-index:20;width:60px;background:var(--panel);
  border-right:1px solid var(--line);padding:12px 8px;display:flex;
  flex-direction:column;gap:4px;overflow:visible;
  transition:width .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease}
.az-side:hover,.az-side.expanded,.az-side:has(.tool:focus-visible){width:232px;
  box-shadow:14px 0 40px rgba(77,50,34,.10)}
.az-side h2{font-size:var(--text-sm);margin:2px 8px 8px;color:var(--mut);font-weight:600;
  white-space:nowrap;opacity:0;transition:opacity .14s ease;overflow:hidden}
.az-side:hover h2,.az-side.expanded h2,.az-side:has(.tool:focus-visible) h2{opacity:1}
.az-side h2 span{display:none}
.az-side .tool{appearance:none;border:1px solid transparent;background:transparent;
  border-radius:11px;padding:9px;display:flex;gap:12px;align-items:center;
  cursor:pointer;text-align:left;width:100%;color:var(--ink);
  font-family:var(--sans);white-space:nowrap;overflow:hidden}
.az-side .tool:hover{background:var(--paper)}
.az-side .tool.active{background:var(--accent);border-color:var(--accent-d);color:var(--paper)}
.az-side .tool .ico{font-size:20px;flex:none;width:26px;text-align:center}
.az-side .tool .lbl{display:flex;flex-direction:column;min-width:0;opacity:0;
  transition:opacity .14s ease}
.az-side:hover .tool .lbl,.az-side.expanded .tool .lbl,
.az-side:has(.tool:focus-visible) .tool .lbl{opacity:1}
.az-side .tool b{display:block;font-size:var(--text-md);line-height:var(--lh-tight);font-weight:600}
.az-side .tool small{display:block;font-size:var(--text-xs);color:var(--mut);margin-top:1px;line-height:1.25}
.az-side .tool.active small{color:color-mix(in srgb, var(--paper) 82%, transparent)}
.az-side .foot{margin-top:auto;padding:10px 8px 4px;font-size:var(--text-2xs);color:var(--mut);
  line-height:var(--lh-base);border-top:1px dashed var(--line2);white-space:normal;opacity:0;
  transition:opacity .14s ease;pointer-events:none}
.az-side:hover .foot,.az-side.expanded .foot,.az-side:has(.tool:focus-visible) .foot{
  opacity:1;pointer-events:auto}
.kbd{font-family:var(--mono);font-size:var(--text-2xs);border:1px solid var(--line2);
  border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--panel)}

/* ---------- stage ---------- */
.az-stage{position:relative;min-width:0;min-height:0;background:var(--paper)}
.az-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.az-stage .loading{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--paper);transition:opacity .25s ease;pointer-events:none;
  opacity:0;z-index:3}
.az-stage .loading.on{opacity:1;pointer-events:auto}
.az-stage .loading .card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px 26px;font-family:var(--mono);font-size:var(--text-md);
  color:var(--mut);box-shadow:0 14px 34px rgba(77,50,34,.10)}
.az-stage .loading .card b{color:var(--ink)}
.az-stage .dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ---------- document panes ---------- */
.doc-in{max-width:80ch;margin:0 auto;padding:16px 20px 48px;color:var(--ink)}
.doc-in h2{font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
.doc-in h3{font-size:16px;margin:0 0 5px}
.doc-in p{line-height:var(--lh-relaxed);font-size:var(--text-xl);color:#3A3222;margin:0 0 12px}
.doc-in .lede{color:#5A4F3B;font-size:var(--text-xl)}
.howblock{margin:0 0 26px}
.howblock .sl-how-intro{color:#5A4F3B;line-height:var(--lh-relaxed);margin:0 0 16px;font-size:var(--text-xl)}
.howblock ol{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:9px}
.howblock ol li{line-height:var(--lh-relaxed);font-size:var(--text-xl);color:#3A3222}
.howblock ol li::marker{color:var(--accent);font-weight:800}
.howblock .sl-how-tip{margin:18px 0 0;padding:13px 16px;background:rgba(159,51,44,.07);
  border:1px solid rgba(159,51,44,.18);border-radius:var(--radius);font-size:var(--text-lg);
  line-height:var(--lh-relaxed);color:#5A4F3B}
.howblock .sl-how-tip b{color:var(--accent-d)}
.abouttool{margin:0 0 26px}
.azx-badges{display:flex;flex-wrap:wrap;gap:8px}
.azx-badge{font-size:var(--text-sm);padding:5px 11px;border-radius:var(--radius-pill);background:var(--surface);
  color:#5a4a36;border:1px solid var(--line2);white-space:nowrap}
.azx-badge.ok{background:#E3F0E8;color:#0f6e56;border-color:#bcdccb}
.doc-links{display:flex;gap:8px 22px;flex-wrap:wrap;margin:0 0 10px}
.doc-links a{color:var(--accent);font-weight:600;text-decoration:none}
.doc-links a:hover{text-decoration:underline}
.doc-in .copy{font-size:var(--text-sm);color:var(--mut);margin:0}

/* ---------- printing ----------
   Layout Studio's own print sheet hides `.pane` with !important -- written for
   its two side panels, but the shell's tab panes carry that class too, so the
   tool pane vanished and printing produced a blank page. It also hides `.top`,
   the OLD header class, so the new #top bar printed at the head of every sheet.
   Both are fixed here rather than in that page, because every converted page
   has the same two shapes. */
@media print{
  #top{display:none!important}
  #app{display:block!important;height:auto!important}
  #app>.pane:not(.on){display:none!important}
  #app>.pane.on{display:block!important}
  body{overflow:visible!important}
}

/* ---------- narrow ---------- */
@media (max-width: 860px){
  .az-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .az-side{position:static;width:auto;flex-direction:row;flex-wrap:wrap;border-right:0;
    border-bottom:1px solid var(--line);padding:10px;max-height:44vh;overflow-y:auto;
    box-shadow:none}
  .az-side:hover,.az-side.expanded,.az-side:has(.tool:focus-visible){width:auto;box-shadow:none}
  .az-side h2,.az-side .foot{display:none}
  .tool{width:auto;padding:8px 11px}
  .tool .lbl{opacity:1}
  .tool small{display:none}
  .az-side.collapsed .tool:not(.active){display:none}
  #top .menubtn{display:inline-block}
}
@media (max-width: 620px){
  #top{gap:8px;padding:6px 12px}
  #top .lock{display:none}
  #top .alltools{margin-inline-start:auto}
  .doc-in{padding:18px 16px 48px}
}