/* Frame overrides for Azad studio sub-tools.
   Loaded by each srcdoc iframe. A relative href in a srcdoc frame resolves
   against the PARENT's base URL -- the site root -- which is the same reason
   lib/az-webfonts.1ea46267.css already works from here.

   Part 1 makes a standalone tool document sit inside a frame.
   Part 2 is density: these tools were built as full pages with a centred
   column and page-sized headings. Inside a 46px-barred shell that wastes both
   edges and the first 200px of every screen. */

/* ---------- part 1: living in a frame ---------- */
html,body{background:transparent!important}

/* The document must be able to scroll. Several tools were written as
   standalone full-page apps and pin themselves with overflow:hidden, so
   content taller than the frame is cut off with no scrollbar.
   ONLY overflow is touched. An earlier version also forced height:auto, which
   was unnecessary -- height:100% never prevented scrolling, only
   overflow:hidden does -- and destructive: collage, edit and svg size their
   canvas through a height:100% chain from body, so collapsing it left Collage
   with no canvas and the other two unable to scroll the stage. Heights stay
   exactly as the tools wrote them.
   overflow-x stays hidden where the fragments set it, on purpose. */
html{overflow-y:auto!important}
body{overflow-y:visible!important}

/* Panels here are capped at calc(100vh - N) so they scroll INSIDE the frame.
   That is the tools' own design and it is right -- what was missing is the
   pairing. A cap measured against the frame only fits if the panel starts at
   the top of the frame; these start below the tool's toolbar, so the box ran
   past the bottom and its last stretch was unreachable.
   Earlier attempts here lifted the cap instead. That was wrong twice over: it
   left overscroll-behavior:contain on an element with no scrollport, which
   swallowed the wheel entirely, and the accompanying html/body height:auto
   override collapsed the height:100% chain that collage, edit and svg size
   their canvas through -- the stage went to zero and the artwork disappeared.
   Both are reverted. The cap stays; sticky is added so the box fits; and
   overscroll is released so reaching the panel's end scrolls the page on. */
html body .az-scrollpanel{position:sticky!important;top:8px!important;
  align-self:start!important;max-height:calc(100vh - 16px)!important;
  overflow-y:auto!important;overscroll-behavior:auto!important}
header, .masthead, .wrap.masthead, .app-header, .dl-head, .topbar, #topbar,
#toolrail, #statusbar, .header-note, .brand-bar, .app-bar{
  background:var(--paper)!important;background-image:none!important;
  border-bottom:0!important;box-shadow:none!important}
.dl-hero,.dl-head .hero{background:var(--paper)!important}
.dl-head *,header .brand,.masthead .brand{color:#35251f}
.hero{display:none!important}
:root{color-scheme:light!important}
[hidden]{display:none!important}

/* ---------- part 2: density ---------- */

/* One lever for everything sized in rem: all eight tools use rem-based clamps
   for headings and body copy, so dropping the root brings the whole type scale
   down together instead of one selector at a time. */
html{font-size:14.5px!important}

/* NOTE ON CONTAINERS. Width and padding are deliberately NOT here.
   `.app-shell` means "centred 1180px column, needs padding" in the Persian
   Toolkit and "full-height 100dvh grid, overflow hidden" in the Web Studio
   code editor. A shared padding rule would add 30px to the editor's grid and
   clip the bottom of Ace with no scrollbar to reveal it. Same class name,
   opposite meaning -- so container geometry is declared per template, in the
   page config, where the class name can be read against the tool it belongs
   to. */

/* The frame's own title line, compressed to one row: mark, name, actions.
   The subtitle under it repeats what the tool rail and the About pane already
   say, so it goes. justify-content is dropped because with the subtitle gone
   space-between strands the name and any action button at opposite ends of an
   1800px row. */
.topbar{margin-bottom:8px!important;align-items:center!important;
  gap:10px!important;justify-content:flex-start!important}
.topbar .brand{gap:9px!important;align-items:center!important}
.topbar .brand>div>p,.topbar .brand p{display:none!important}
.topbar h2{font-size:var(--text-xl)!important;line-height:1.25!important;margin:0!important}
.brand-mark,.topbar .mark{width:26px!important;height:26px!important;
  border-radius:var(--radius-sm)!important;font-size:var(--text-lg)!important;box-shadow:none!important;
  flex:0 0 auto!important}
.top-actions,.topbar .actions{margin:0!important;margin-inline-start:auto!important}
.icon-button{padding:4px 8px!important;line-height:1!important}

/* Panel headings: name only. The descriptive paragraph under each one is the
   same copy that now lives in the How to use tab, so showing it twice costs a
   screen-inch per panel. Delete this one rule to bring them back. */
.panel-head,.cardhead,.panelhead{margin-bottom:10px!important;align-items:center!important}
.panel-head p,.cardhead p{display:none!important}
.panel-head h2,.cardhead h2{font-size:var(--text-xl)!important;margin:0!important;
  line-height:1.25!important}

/* ---------- part 3: compact type ----------
   Most of these tools size in px and inherit their control text from `body`,
   and two of them (Readable Pairs, the Inspector) never set a body size at
   all -- so they were running at the browser default 16px and every tab,
   label and select inherited it. One declaration moves all of that.

   Deliberately NOT `button{...}`: colour swatches, chips and the eyedropper
   are buttons whose size is their meaning. Named control classes only. */
body{font-size:var(--text-md)!important;line-height:var(--lh-base)!important}
h1{font-size:17px!important}
h2{font-size:var(--text-xl)!important;margin-block-end:8px!important}
h3{font-size:var(--text-xs)!important}
label,.field-label,legend{font-size:var(--text-xs)!important;margin-block-end:3px!important}
input[type=text],input[type=number],input[type=search],input[type=tel],select{
  padding:6px 9px!important;border-radius:7px!important;font-size:var(--text-sm)!important}
input[type=color]{height:34px!important}
/* The textarea is the work, not the chrome. Persian and Arabic need a little
   more than Latin to stay legible, so it does not follow the body down. */
textarea{font-size:14.5px!important;padding:8px 10px!important}
.tab,.tabs>button,.seg>button,.segmented>button,.btn,.button,.small-button,
.compact,.icon-button{padding:6px 11px!important;font-size:var(--text-sm)!important;
  border-radius:var(--radius-sm)!important}
.support,.notice-box,.status,.hint,.stats{font-size:var(--text-sm)!important}
.support,.notice-box{padding:7px 10px!important;margin-block-end:10px!important}
.panel,.card{margin-block-end:10px!important}