/* ======================================================================
   az-shabnameh.css — the whole appearance of Shab Nameh, in one file.

   RULES THIS FOLLOWS, which are the site's and not this app's
     * Every colour, size, radius and face is a theme token from
       az-theme.css. Nothing here is a literal, so the admin panel moves
       this app with the rest of the site.
     * No !important anywhere. If a rule needs force, the selector is wrong.
     * Mobile first: the base rules are the phone layout, and the wider
       screens are additions.
     * The page scrolls as one. No panel has a scrollbar of its own.

   WHAT IS SPECIFIC TO THIS APP
   A note may be written in Persian, Arabic, Hebrew or English, often mixed
   in one paragraph. Everything that could take a side is written in logical
   properties -- inline-start rather than left -- so the layout mirrors
   itself by direction rather than by a second set of rules. Where a value
   really is about the screen and not the text, it says so.
   ====================================================================== */

/* ---------------------------------------------------------------- shell */

.sn-wrap {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg) var(--space-3xl);
}

/* THE PAGE SHELL IS THE SITE'S, NOT THIS APP'S.
   #top, #az-tabs, .tbtn, .brand, .lock and .alltools all come from
   az-studio-shell.css, so the chrome on this page is the same object as the
   chrome on every other tool rather than a copy that drifts. What is left
   for this file is the pane switching -- the shell's own pane rules are
   scoped to `#app > .pane`, and this app has no #app, because #app is a
   100dvh grid whose panes scroll inside themselves and a long note with
   photos in it needs the page itself to scroll.

   .sn-pane is used instead of .pane for exactly the reason the shell's own
   comment gives: `.pane` is not a rare class name, and a two-class rule on
   it outranks another page's one-class rule whatever the order. */
/* THE PAGE MUST BE ABLE TO SCROLL, AND BY DEFAULT IT CANNOT.

   az-studio-shell.css sets `body { overflow: hidden }` and
   `html, body { height: 100% }`. That is right for every other studio
   page: they put everything inside #app, a 100dvh grid whose panes scroll
   inside themselves, so the page itself never should.

   This app has no #app, deliberately -- a note with photos in it is
   taller than the screen and wants the ordinary page scrollbar. With the
   shell's rule still in force the body is pinned to the viewport height
   and everything past the fold is simply unreachable: on a phone that was
   about nine hundred pixels of the writing page, including the button
   that makes the link.

   WHY IT WAS NOT OBVIOUS. CSS propagates the BODY's overflow to the
   viewport when html's overflow is visible, so the viewport stops
   responding to a wheel or a finger -- while window.scrollTo() still works
   perfectly, and a full-page screenshot still renders the whole document.
   Every automated check of this page said it was fine. Only a real wheel
   event shows it, and there is now a test that sends one. */
body[data-az-tool="shab-nameh"] {
  height: auto;
  min-block-size: 100%;
  overflow: visible;
}

.sn-pane:not(.on) { display: none; }

.sn-wrap {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg) var(--space-3xl);
}

/* The skip link. Defined here because the site keeps it in each page's own
   <style> block, and this app has no such block. */
.azx-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--text);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
}
.azx-skip:focus { inset-inline-start: var(--space-sm); top: var(--space-sm); }

/* The language switch sits in the top bar and its buttons are .tbtn, so
   they are drawn by the shell. All this adds is the grouping. */
.sn-langs { display: flex; gap: 3px; }

/* ----------------------------------------------------------- the editor */

.sn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.sn-label {
  display: block;
  font-weight: 500;
  font-size: var(--text-sm);
  margin-block-end: var(--space-2xs);
  color: var(--text);
}

/* A section heading and a field label should not look identical. They did:
   both were .sn-label, so "Options" read as the caption for the control
   under it rather than as the name of the group.

   The separation is carried by WEIGHT and SPACE, not by size or by the
   usual typographic tricks. The site's type scale is deliberately
   compressed -- one step is eight per cent -- so size alone cannot do it;
   and letter-spacing and small caps, which would, do nothing in Arabic or
   Hebrew and actively break Persian, where the letters of a word join. A
   note written in four scripts has to use the devices that work in all of
   them. */
h2.sn-label, h3.sn-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin-block: 0 var(--space-md);
}

.sn-help {
  margin-block: 0 var(--space-md);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--lh-relaxed);
}

/* The formatting bar wraps rather than scrolls sideways, so every control
   is reachable on a narrow screen without a hidden overflow. */
.sn-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding-block-end: var(--space-sm);
  margin-block-end: var(--space-sm);
  border-block-end: 1px solid var(--line);
}

.sn-tool {
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.sn-tool:hover { border-color: var(--primary); }
.sn-tool[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}

/* The direction override sits in the toolbar and should read as one of the
   tools, not as a form field that wandered in. */
.sn-tool-sel {
  min-width: auto;
  padding-inline: var(--space-xs);
}

/* Drawn rather than typed. An emoji is rendered by whatever emoji font the
   device happens to have, at whatever size and weight it likes -- next to
   letterforms it reads as a sticker, and the camera came out as a dark
   blob. These take the button's own colour and are the same on every
   device. currentColor, so they follow the pressed state too. */
.sn-ico {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sn-tool:has(.sn-ico) { display: inline-flex; align-items: center; justify-content: center; }

/* The writing surface. min-height rather than height, so it grows with the
   note and the page keeps the only scrollbar. */
.sn-editor {
  min-height: 14rem;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

.sn-editor:focus-visible,
.sn-field:focus-visible,
.sn-tool:focus-visible,
.sn-btn:focus-visible,
.sn-share a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The placeholder for a contenteditable, which has none of its own. */
.sn-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Note content, shared by the editor and the reading page so that what is
   written is what is seen. */
.sn-editor :is(h2, h3, h4) { font-family: var(--font-display); line-height: var(--lh-snug); }
.sn-editor h2 { font-size: var(--text-xl); margin-block: var(--space-lg) var(--space-sm); }
.sn-editor h3 { font-size: var(--text-lg); margin-block: var(--space-md) var(--space-xs); }
.sn-editor p { margin-block: 0 var(--space-md); }
.sn-editor :is(ul, ol) { margin-block: 0 var(--space-md); padding-inline-start: var(--space-xl); }
.sn-editor li { margin-block-end: var(--space-2xs); }
.sn-editor a { color: var(--primary); }
.sn-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-block: var(--space-xs);
}
.sn-editor blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--primary);
  color: var(--muted);
}
.sn-editor :is(code, pre) { font-family: var(--font-mono); font-size: var(--text-sm); }
.sn-editor pre {
  background: var(--surface-2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;        /* a long code line is the one thing allowed to
                              scroll on its own; wrapping it changes meaning */
}
.sn-editor [data-align="center"] { text-align: center; }
.sn-editor [data-align="end"]    { text-align: end; }

/* ---------------------------------------------------------- the options */

.sn-row {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

.sn-field {
  width: 100%;
  min-height: 2.75rem;         /* a comfortable touch target             */
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
}

.sn-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.sn-check input { margin-block-start: 0.2em; inline-size: 1.1em; block-size: 1.1em; }

/* THE RECIPIENT'S TAB, MADE FINDABLE.

   Someone arrives here holding four sentences and needs the second of four
   tabs that are deliberately identical -- quiet, equal, none of them
   shouting. For the writer that is right. For the reader it means the one
   thing they came to do is hidden in plain sight among three things they
   did not.

   It is given the accent as a border and full-strength text, not the
   accent as a fill: a filled tab is what the shell uses for the tab you
   are already on, and two tabs that look selected is worse than one that
   is hard to find. When it IS the current tab the shell's own rule takes
   over, so this says "start here" only while it is somewhere to go. */
#az-tabs .tbtn.sn-tab-cta:not([aria-pressed="true"]) {
  background: #212c3c;
  border-color: var(--bar-acc);
  color: var(--bar-ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------- bits */

/* One button rule for both <button> and <a>. The reading page's invitation
   back to the writing page is a link, because it navigates -- and a link
   needs the text-decoration and the centring that a button gets for free,
   or it renders as underlined text in a box. */
.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-lg);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.sn-btn:hover { background: color-mix(in srgb, var(--primary) 86%, #000); }

.sn-btn[disabled] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.sn-btn-quiet {
  background: var(--paper);
  color: var(--text);
  border-color: var(--line);
  font-weight: 500;
}

.sn-btn-quiet:hover { background: var(--surface); border-color: var(--primary); }

.sn-btn-danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.sn-btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }

.sn-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --------------------------------------------------------- the outcome */

.sn-linkbox {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: stretch;
}

/* The finished link, selectable and always read left to right. */
.sn-linkout {
  flex: 1 1 18rem;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: start;
}

.sn-share { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-md); }

.sn-share a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.sn-share a:hover { border-color: var(--primary); }

/* ------------------------------------------------------- notices, limits */

/* The QR code. The library emits an SVG with no dimensions of its own, so
   the size is set here rather than written onto the element by script. A
   white plate under it matters: a code inverted by a dark background is not
   read by most phone cameras. */
#sn-qr {
  margin-block-start: var(--space-md);
  display: flex;
  justify-content: center;
}
#sn-qr svg {
  width: 100%;
  max-width: 13rem;
  height: auto;
  background: #ffffff;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.sn-note {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--muted);
  background: var(--surface-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  margin-block-end: var(--space-md);
}

/* The status line is empty until the author asks for it. Empty, it still
   drew its card and its border -- a thin ruled box sitting in the middle of
   the result for no reason. */
#sn-status:empty { display: none; }

.sn-note-warn   { border-inline-start-color: var(--warning); }
.sn-note-bad    { border-inline-start-color: var(--danger); }
.sn-note-good   { border-inline-start-color: var(--success); }

.sn-limits { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.sn-limits h3 { font-size: var(--text-lg); font-family: var(--font-display); margin-block: 0 var(--space-sm); }
.sn-limits ul { margin-block: var(--space-sm) 0; padding-inline-start: var(--space-xl); }
.sn-limits li { margin-block-end: var(--space-xs); }

.sn-steps { font-size: var(--text-md); line-height: var(--lh-relaxed); padding-inline-start: var(--space-xl); }
.sn-steps li { margin-block-end: var(--space-sm); }

/* Shown only to screen readers. */
.sn-sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.sn-hidden { display: none; }

/* --------------------------------------------------------- the reading */

.sn-read {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

.sn-read :is(h2, h3, h4) { font-family: var(--font-display); line-height: var(--lh-snug); }
.sn-read h2 { font-size: var(--text-xl); margin-block: var(--space-lg) var(--space-sm); }
.sn-read h3 { font-size: var(--text-lg); margin-block: var(--space-md) var(--space-xs); }
.sn-read p { margin-block: 0 var(--space-md); }
.sn-read :is(ul, ol) { margin-block: 0 var(--space-md); padding-inline-start: var(--space-xl); }
.sn-read a { color: var(--primary); }
.sn-read img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin-block: var(--space-xs); }
.sn-read blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--primary);
  color: var(--muted);
}
.sn-read pre {
  background: var(--surface-2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.sn-read [data-align="center"] { text-align: center; }
.sn-read [data-align="end"]    { text-align: end; }

/* --------------------------------------------------------- wider screens */

@media (min-width: 40rem) {
  .sn-wrap { padding-inline: var(--space-xl); }
  .sn-title { font-size: var(--text-3xl); }
  .sn-row-2 { grid-template-columns: 1fr 1fr; }
}

/* Honour a stated preference for less movement. */
/* Every transition in this file, named rather than blanket-disabled, so
   adding one and forgetting it here shows up as a thing still moving.
   .sn-lang is gone -- those buttons are .tbtn now and the shell owns them
   -- and the disclosure triangle is the one that was added last. */
@media (prefers-reduced-motion: reduce) {
  .sn-btn, .sn-tool, .sn-share a, .sn-summary::before { transition: none; }
}

/* ------------------------------------------------- small spacing helpers */
/* These exist so the markup carries no style attributes. Each is one
   declaration and named for what it is, not for where it happens to be
   used, because the next thing that needs the same spacing should reuse it
   rather than grow a second class. */
.sn-help-block    { display: block; margin: 0; }
.sn-row-spaced    { margin-block-start: var(--space-md); }
.sn-label-spaced  { margin-block-start: var(--space-lg); }
.sn-note-spaced   { margin-block-start: var(--space-lg); }
.sn-card-nested   { margin-block-start: var(--space-lg); margin-block-end: 0; background: var(--surface-2); }
/* A <summary> loses its disclosure triangle the moment it is given
   display:block, which .sn-label does -- so the QR section read as a flat
   grey bar with nothing to say it opened. The marker is drawn back here.

   It points DOWN when closed and up when open, rather than sideways,
   because down and up mean the same thing in all four of this app's
   scripts while a sideways chevron would point the wrong way in Persian,
   Arabic and Hebrew. */
.sn-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}
.sn-summary::-webkit-details-marker { display: none; }
.sn-summary::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  border-inline-start: 0.32rem solid transparent;
  border-inline-end: 0.32rem solid transparent;
  border-block-start: 0.38rem solid currentColor;
  transition: transform 0.15s ease;
}
details[open] > .sn-summary::before { transform: rotate(180deg); }
.sn-prose         { line-height: var(--lh-relaxed); font-size: var(--text-md); }
.sn-share-why     { margin-block: var(--space-sm) 0; }

/* The <noscript> message is shown in all three languages at once, because
   the thing that would have chosen one of them is the thing that is not
   running. */
.sn-noscript      { margin-block-end: var(--space-sm); }

/* ------------------------------------------------------------- phrase */

/* The phrase is the thing a person will read off a screen and type into
   another one, so it is set larger and looser than the interface around
   it, and in the body face rather than the mono face -- it is meant to
   look like sentences somebody wrote down, not like a code. */
.sn-phrase {
  margin-block: var(--space-sm) 0;
  padding: var(--space-md);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text);
  /* Selectable in one gesture: people copy this by dragging across it. */
  user-select: all;
}

.sn-inline-label {
  align-self: center;
  font-size: var(--text-xs);
  color: var(--muted);
}

.sn-field-inline { inline-size: auto; }

/* Where the recipient pastes it. Tall enough for four sentences so the
   whole thing is visible at once and a missing line is obvious. */
.sn-open-in {
  min-block-size: 7rem;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  resize: vertical;
}