/* ---------- MY BLOG ----------
   docs/BLOG-NATIVE-PORT.md. This sheet used to style ONE ELEMENT: an iframe of
   the news Worker's admin page, and a rule that hid its scroll bar. The glass
   is gone and the desk is drawn by rooms/blog.js, so this is the desk's own
   look, ported from the news repo's public/styles.css and rewritten onto the
   HOUSE's tokens.

   NOTHING HERE IS A CONTROL PANEL. Mark's ruling over that desk, 2026-09-02:
   "a proper WYSIWYG editor, a lovely one", and the ruling he made over Comic
   Forge the same morning. The house body face, sentence case, no mono caps
   kickers, no pills, no dashed boxes, no blue fill. The desk reads top to
   bottom the way the post will: cover, title, the writing.

   EVERY SIZE IS OFF THE --t-* SCALE AND EVERY COLOUR IS A TOKEN. The news
   sheet had a --t-read of its own for the reading measure; the house scale
   tops out at --t-room and its reading size is --t-sub, so that is what the
   copy wears here. Nothing branches on a theme name and nothing is hardcoded
   that the house has a token for. */

/* ---------- the room ----------
   Mark, 2026-09-04: "ITS WIDE IT IGNORES THE GLASS MODE".

   THE BLOG IS A WRITING DESK, NOT A WALL-TO-WALL DASHBOARD. The iframe port
   let the desk fill every pixel the centre stage offered while only the copy
   inside it kept a reading measure. On a wide screen that made one enormous
   dark slab between the two house panels. The whole room holds the Storyboard's
   editorial measure now: enough room for a wide picture and the post shelf,
   still a page a person can take in at once.

   The horizontal padding belongs here rather than on the canvas. The article
   shelf and utilities have moved to the side panels, so 780px is the whole
   honest working width now, rather than a second dashboard across the stage. */
.blog-room{display:flex;flex-direction:column;gap:var(--s7);width:100%;max-width:780px;
  margin:0 auto;padding:22px 24px 70px;}
.blog-bar{display:flex;justify-content:flex-end;}
.blog-link{font-size:var(--t-small);color:var(--accent);}
.blog-h2{font-family:var(--font-trajan);font-weight:var(--w-med);font-size:var(--t-title);
  letter-spacing:.02em;margin:var(--s7) 0 var(--s5);color:var(--text);}
.blog-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.blog-hidden-file{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}

/* ONE COLUMN. It was a two column grid while the desk carried an AI Chat of
   its own down the left (Mark, 2026-09-03: "CUT IT").

   THE PANEL FILLS THE ROOM AND THE COPY HOLDS THE MEASURE. Those are two
   different jobs and they belong on two different boxes: .blog-prose below is
   already 70ch, which is what keeps a line of the post readable. Capping the
   DESK as well squeezed the whole panel into a narrow strip down the middle of
   a wide screen, which is what a cut column looks like when the wrong element
   is asked to hold the measure. */
.blog-desk{display:block;}

/* ---------- THE CANVAS ----------
   The post itself, on a panel, and the bubbles float inside it: everything
   positioned by lib/blog-surface.js is measured against this box. */
.blog-canvas{position:relative;border:var(--bd) solid var(--edge);border-radius:var(--r-lg);
  background:var(--panel);padding:var(--s7);box-shadow:var(--sh-panel);}

/* ---------- THE BLOG JOINS THE HOUSE GLASS ----------
   The shell has two honest roads to glass: house-shell-show when a wall stands
   behind it, and house-shell-glass when the room wears the house glow alone.
   The native blog arrived with opaque panels copied from the old news app, so
   either road stopped at the edge of the desk. These are the blog's own panes,
   at the same --wall-mix and --wall-blur the shell already reads. Pictures are
   deliberately absent: glass dresses the frame around art, never the art. */
.house-shell-show .blog-canvas,
.house-shell-glass .blog-canvas,
.house-shell-show .blog-card,
.house-shell-glass .blog-card,
.house-shell-show .blog-src-list,
.house-shell-glass .blog-src-list{
  background:color-mix(in srgb,var(--panel) var(--wall-mix,62%),transparent);
  backdrop-filter:blur(var(--wall-blur,12px));
  -webkit-backdrop-filter:blur(var(--wall-blur,12px));
  border-color:color-mix(in srgb,var(--edge) 72%,transparent);}

/* Small working surfaces sit on the main pane, so they wear a lighter frost
   instead of stacking a second opaque rectangle over it. */
.house-shell-show .blog-cover,
.house-shell-glass .blog-cover,
.house-shell-show .blog-input,
.house-shell-glass .blog-input,
.house-shell-show .blog-bubble,
.house-shell-glass .blog-bubble,
.house-shell-show .blog-pic-bubble,
.house-shell-glass .blog-pic-bubble,
.house-shell-show .blog-link-pop,
.house-shell-glass .blog-link-pop,
.house-shell-show .blog-plus-row,
.house-shell-glass .blog-plus-row{
  background:color-mix(in srgb,var(--inset) 56%,transparent);
  backdrop-filter:blur(var(--wall-blur,12px));
  -webkit-backdrop-filter:blur(var(--wall-blur,12px));}

/* the tabs: two quiet words, the open one carrying the accent under it */
.blog-tabs{display:flex;gap:var(--s7);margin:0 0 var(--s6);border-bottom:var(--bd) solid var(--edge);}
.blog-tab{padding:0 0 var(--s4);border:none;background:none;font:inherit;font-size:var(--t-small);
  font-weight:var(--w-med);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;}
.blog-tab:hover{color:var(--text);}
.blog-tab.is-on{color:var(--text);border-bottom-color:var(--accent);}

/* ---------- THE COVER BAND ----------
   A wide quiet strip that takes a click or a drop. No dashed box. An empty
   band is an invitation, not a hole: it stands one line tall until there is a
   photo in it, and only then takes the wide band's proportion. */
.blog-cover{position:relative;display:grid;place-items:center;width:100%;
  margin:0 0 var(--s6);border:var(--bd) solid var(--edge);border-radius:var(--r-lg);
  background:var(--inset);overflow:hidden;cursor:pointer;min-height:96px;}
.blog-cover.has-photo{aspect-ratio:21/9;min-height:0;}
.blog-cover.is-over{border-color:var(--accent);}
.blog-cover-shot{width:100%;height:100%;object-fit:cover;grid-area:1/1;
  transition:opacity 160ms ease;}
.blog-cover-shot.is-coming{opacity:0;}
.blog-cover-say{grid-area:1/1;display:inline-flex;align-items:center;gap:var(--s3);
  color:var(--muted);font-size:var(--t-small);}
.blog-cover-say svg{display:block;}
.blog-cover-over{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  justify-content:center;gap:var(--s4);opacity:0;
  background:color-mix(in srgb,var(--surround) 55%,transparent);
  transition:opacity var(--mo-fast);pointer-events:none;}
.blog-cover.has-photo:hover .blog-cover-over{opacity:1;pointer-events:auto;}
.blog-cover-act{padding:var(--s3) var(--s6);border:var(--bd) solid var(--ink4);
  border-radius:var(--r-pill);background:var(--chrome);color:var(--text);font:inherit;
  font-size:var(--t-small);cursor:pointer;transition:border-color var(--mo-fast);}
.blog-cover-act:hover{border-color:var(--accent);}

/* ---------- THE TITLE ----------
   One line of the display face with nothing drawn around it. */
.blog-title{width:100%;padding:0;margin:0 0 var(--s6);border:none;background:none;
  font-family:var(--font-trajan);font-weight:var(--w-med);font-size:var(--t-room);
  letter-spacing:.02em;line-height:1.15;color:var(--text);outline:none;}
.blog-title.is-blank::before{content:attr(data-placeholder);color:var(--ink4);pointer-events:none;}

/* the say line where a photo's progress and a snag are said, quietly */
.blog-say{min-height:16px;margin:0 0 var(--s4);color:var(--muted);font-size:var(--t-tiny);}

/* ---------- THE PROSE ----------
   What you type is what the post looks like: the same face, the same measure,
   the same heading, figure and quote as the published page. One class carries
   all of it, and the preview wears it too, which is what makes Preview honest. */
.blog-prose{max-width:70ch;--blog-fig-room:100%;}
.blog-prose p{font-size:var(--t-sub);line-height:var(--lh-read);color:var(--ink2);margin:0 0 var(--s7);}
.blog-prose h1{font-family:var(--font-trajan);font-weight:var(--w-med);font-size:var(--t-room);
  letter-spacing:.02em;line-height:1.15;margin:0 0 var(--s5);color:var(--text);}
.blog-prose h2{font-family:var(--font-trajan);font-weight:var(--w-med);font-size:var(--t-title);
  letter-spacing:.02em;margin:var(--s8) 0 var(--s5);color:var(--text);}
.blog-prose strong{color:var(--text);font-weight:var(--w-semi);}
.blog-prose a{color:var(--accent);border-bottom:var(--bd) solid var(--accent-line);}
.blog-prose blockquote{margin:0 0 var(--s7);padding-left:var(--s6);
  border-left:2px solid var(--accent-line);color:var(--ink2);font-size:var(--t-sub);
  line-height:var(--lh-read);}
.blog-prose ul{margin:0 0 var(--s7);padding-left:var(--s7);}
.blog-prose li{font-size:var(--t-sub);line-height:var(--lh-read);color:var(--ink2);
  margin-bottom:var(--s2);}
.blog-prose li::marker{color:var(--muted);}

/* the divider: a hairline, not a border on a box */
.blog-prose .post-rule{height:1px;border:none;background:var(--edge);margin:var(--s8) auto;width:38%;}

/* ---------- THE WRITING SURFACE ---------- */
.blog-write-wrap{position:relative;padding-left:34px;margin-left:-34px;}
.blog-surface{position:relative;display:block;width:100%;min-height:52vh;padding:0;border:none;
  background:none;color:var(--ink2);font-size:var(--t-sub);line-height:var(--lh-read);
  --blog-fig-room:calc(100% + 2 * var(--s7) - var(--s2));}
.blog-surface:focus{outline:none;}
.blog-surface.is-over{background:var(--sel);}
.blog-surface>*:last-child{margin-bottom:0;}
.blog-surface h2:first-child{margin-top:0;}
.blog-surface.is-blank::before{content:attr(data-placeholder);color:var(--ink4);
  font-size:var(--t-sub);line-height:var(--lh-read);position:absolute;pointer-events:none;}

/* ---------- THE QUIET PLUS ON AN EMPTY LINE ----------
   Medium's gesture: it stands in the left margin, it turns into a cross when
   the row under it is open, and the row offers the three things a line can be. */
.blog-plus{position:absolute;left:0;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;border:var(--bd) solid var(--edge);border-radius:var(--r-round);
  background:none;color:var(--muted);cursor:pointer;
  transition:color 140ms ease,border-color 140ms ease,transform 140ms ease;}
.blog-plus:hover{color:var(--text);border-color:var(--ink4);}
.blog-plus.is-open{transform:rotate(45deg);border-color:var(--accent);color:var(--accent);}
.blog-plus[hidden]{display:none;}
.blog-plus-row{position:absolute;left:36px;z-index:14;display:flex;align-items:center;gap:var(--s1);
  padding:var(--s2);border:var(--bd) solid var(--edge);border-radius:var(--r-md);
  background:var(--panel);box-shadow:var(--sh-menu);}
.blog-plus-row[hidden]{display:none;}
.blog-plus-act{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);
  border:none;border-radius:var(--r-sm);background:none;color:var(--muted);font:inherit;
  font-size:var(--t-small);cursor:pointer;transition:color 140ms ease,background 140ms ease;}
.blog-plus-act:hover{background:var(--sel);color:var(--text);}
.blog-plus-act svg{display:block;}

/* ---------- THE TWO BUBBLES ----------
   One over a selection with the five marks, one under a picked picture with
   the three widths. Same body, different contents. */
.blog-bubble,.blog-pic-bubble{position:absolute;z-index:22;display:flex;align-items:center;gap:2px;
  padding:var(--s1);border:var(--bd) solid var(--edge);border-radius:var(--r-md);
  background:var(--panel);box-shadow:var(--sh-menu);animation:blog-bubble-in 140ms ease;}
.blog-bubble[hidden],.blog-pic-bubble[hidden]{display:none;}
@keyframes blog-bubble-in{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.blog-mark{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;
  transition:color 140ms ease,background 140ms ease;}
.blog-mark:hover{background:var(--sel);color:var(--text);}
.blog-mark.is-on{color:var(--accent);}
.blog-mark svg{display:block;}
.blog-pic-bubble{gap:var(--s1);padding:var(--s1) var(--s2);}
.blog-pic-press{padding:5px var(--s4);border:none;border-radius:var(--r-sm);background:none;
  color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer;
  transition:color 140ms ease,background 140ms ease;}
.blog-pic-press:hover{background:var(--sel);color:var(--text);}
.blog-pic-press.is-on{color:var(--accent);}
.blog-pic-x{display:inline-flex;align-items:center;padding:5px 6px;}
.blog-pic-x:hover{color:var(--danger);background:none;}
.blog-pic-x svg{display:block;}
.blog-pic-sep{width:1px;height:14px;background:var(--edge);margin:0 2px;}

/* the link popover: a small input where the caret is, never a browser prompt */
.blog-link-pop{position:absolute;z-index:24;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3);border:var(--bd) solid var(--edge);border-radius:var(--r-sm);
  background:var(--panel);box-shadow:var(--sh-menu);}
.blog-link-pop[hidden]{display:none;}
.blog-link-pop input{width:22ch;padding:4px 8px;border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm);background:var(--inset);color:var(--text);font:inherit;
  font-size:var(--t-small);}
.blog-link-pop input:focus{outline:none;border-color:var(--accent);}
.blog-link-go,.blog-link-x{padding:4px 10px;border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm);background:var(--chrome);color:var(--text);font:inherit;
  font-size:var(--t-small);cursor:pointer;}
.blog-link-go:hover,.blog-link-x:hover{background:var(--sel);}
.blog-link-x{display:inline-flex;align-items:center;padding:5px 6px;}

/* ---------- A PICTURE IN THE COPY ----------
   At the desk it is clicked, it is outlined, and its caption is typed into.
   On the published page and in the preview it is the same figure at the same
   size, which is the whole point of the width riding in the markdown. */
.post-figure{margin:0 0 var(--s8);}
.post-figure img{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r-lg);
  border:var(--bd) solid var(--edge);}
.post-figure figcaption{margin-top:var(--s3);color:var(--muted);font-size:var(--t-small);}
.blog-surface figure.post-figure{position:relative;outline:1px solid transparent;outline-offset:3px;
  border-radius:var(--r-lg);transition:opacity 160ms ease,outline-color 140ms ease;}
.blog-surface figure.post-figure.is-picked{outline-color:var(--accent);}
.blog-surface figure.post-figure.is-coming{opacity:0;}
.blog-surface figure.post-figure img{cursor:pointer;}
.blog-surface figcaption{outline:none;min-height:1.4em;}
.blog-surface figcaption.is-blank::before{content:attr(data-placeholder);color:var(--ink4);}

/* THE THREE WIDTHS, at the desk and in the preview alike. Column is the
   reading measure and needs no rule of its own. Wide and full reach past the
   measure by growing from the centre, and each is capped by the room it is
   standing in, so a wide picture at the desk stops at the panel's inside edge
   instead of sliding out over the chat. */
.post-figure.fig-wide{width:min(118%,var(--blog-fig-room));margin-left:50%;transform:translateX(-50%);}
.post-figure.fig-full{width:var(--blog-fig-room);margin-left:50%;transform:translateX(-50%);}
.post-figure.fig-full img{border-radius:var(--r-md);}
.post-figure.fig-wide figcaption,.post-figure.fig-full figcaption{text-align:center;}

/* ---------- SETTINGS AND DESK ACTIONS ---------- */
.blog-fold{margin:var(--s7) 0 0;border-top:var(--bd) solid var(--edge);padding-top:var(--s5);}
.blog-fold>summary{color:var(--muted);font-size:var(--t-small);cursor:pointer;list-style:none;}
.blog-fold>summary::-webkit-details-marker{display:none;}
.blog-fold>summary::before{content:"+ ";}
.blog-fold[open]>summary::before{content:"- ";}
.blog-fold>summary:hover{color:var(--text);}
.blog-fold-in{display:grid;gap:var(--s2);max-width:68ch;padding-top:var(--s5);}
.blog-cap{color:var(--muted);font-size:var(--t-tiny);}
.blog-input{padding:var(--s4) var(--s5);border:var(--bd) solid var(--edge);border-radius:var(--r-md);
  background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-body);
  margin-bottom:var(--s4);}
.blog-input:focus{outline:none;border-color:var(--accent);}

/* ---------- THE FOOT ----------
   How many words, whether they are saved, the switch, the way out and the one
   press. */
.blog-count{display:flex;align-items:center;gap:var(--s3);margin:0;
  color:var(--muted);font-size:var(--t-tiny);}
.blog-count-sep{opacity:.5;}
.blog-foot{display:flex;align-items:center;gap:var(--s7);margin-top:var(--s7);
  padding-top:var(--s6);border-top:var(--bd) solid var(--edge);}
.blog-check{display:inline-flex;align-items:center;gap:var(--s3);color:var(--ink2);
  font-size:var(--t-small);cursor:pointer;}
.blog-close{border:none;background:none;color:var(--muted);font:inherit;font-size:var(--t-small);
  cursor:pointer;}
.blog-close:hover{color:var(--text);}
.blog-save{margin-left:auto;padding:9px 16px;border:var(--bd) solid var(--edge);
  border-radius:var(--r-md);background:var(--chrome);color:var(--text);font:inherit;
  font-size:var(--t-small);font-weight:var(--w-med);cursor:pointer;
  transition:border-color var(--mo-fast);}
.blog-save:hover{border-color:var(--accent);}
.blog-save:disabled{opacity:.5;cursor:default;}

/* ---------- PREVIEW ----------
   The published post's own markup, drawn from the same markdown, on nothing. */
.blog-preview{padding-top:var(--s3);}
.blog-post{max-width:68ch;}
.blog-post-hero{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  border:var(--bd) solid var(--edge);margin-bottom:var(--s6);}
.blog-post-meta{color:var(--muted);font-size:var(--t-tiny);margin:0 0 var(--s7);}

/* ---------- THE ARTICLES TAB ----------
   One card to a row in the left panel. It is deliberately denser than a card
   on the centre stage, but still shows the three things Mark asked to scan:
   picture, description and share doors. */
.blog-shelf{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);}
.blog-card{position:relative;display:flex;flex-direction:column;border:var(--bd) solid var(--edge);
  border-radius:var(--r-lg);background:var(--panel);overflow:hidden;
  transition:border-color var(--mo-fast);}
.blog-card:hover{border-color:var(--ink4);}
.blog-card-open{display:flex;flex-direction:column;border:none;background:none;padding:0;
  color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.blog-card-media{display:block;aspect-ratio:16/9;background:var(--inset);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-card-body{display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s4) var(--s4) var(--s3);}
.blog-card-title{font-size:var(--t-body);font-weight:var(--w-semi);line-height:var(--lh-tight);}
.blog-card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;color:var(--ink2);font-size:var(--t-tiny);line-height:var(--lh-body);}
.blog-card-meta{color:var(--muted);font-size:var(--t-tiny);}
.blog-card-actions{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-top:var(--bd) solid var(--edge);}
.blog-card-share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);min-width:0;}
.blog-card-share a{color:var(--accent);font-size:var(--t-tiny);}
.blog-card-draft{color:var(--muted);font-size:var(--t-tiny);}
.blog-card-del{margin-left:auto;padding:0;border:0;background:none;color:var(--muted);
  font:inherit;font-size:var(--t-tiny);cursor:pointer;transition:color var(--mo-fast);}
.blog-card-del:hover{color:var(--danger);}

/* ---------- THE BLOG TOOL BOX ---------- */
.blog-toolbox{gap:var(--s6);}
.blog-tool-public{color:var(--accent);font-size:var(--t-small);}
.blog-tool-section{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5);
  border-top:var(--bd) solid var(--edge);min-width:0;}
.blog-tool-head{margin:0;color:var(--text);font-size:var(--t-small);font-weight:var(--w-semi);}
.blog-tool-actions{display:flex;align-items:center;gap:var(--s3);}
.blog-toolbox .blog-save{flex:1;margin-left:0;}
.blog-toolbox .blog-close{padding:9px 0;}
.blog-toolbox .blog-input{width:100%;min-width:0;margin:0;padding:var(--s3) var(--s4);
  font-size:var(--t-small);}
.blog-tool-description{min-height:78px;resize:vertical;line-height:var(--lh-body);}

/* ---------- THE SOURCES ----------
   The feeds the editor gathers from. Three columns and a Remove, then one row
   to add another. */
.blog-src-list{display:flex;flex-direction:column;border:var(--bd) solid var(--edge);
  border-radius:var(--r-lg);background:var(--panel);overflow:hidden;}
.blog-src-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
  gap:var(--s5);align-items:center;padding:var(--s4) var(--s6);
  border-bottom:var(--bd) solid var(--edge);font-size:var(--t-body);}
.blog-src-row:last-child{border-bottom:none;}
.blog-src-name{color:var(--text);}
.blog-src-url{color:var(--muted);font-size:var(--t-tiny);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.blog-src-x{padding:2px var(--s4);border:var(--bd) solid var(--edge);border-radius:var(--r-sm);
  background:var(--chrome);color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer;
  transition:color var(--mo-fast);}
.blog-src-x:hover{color:var(--danger);}
.blog-src-x:disabled{opacity:.5;cursor:default;}
.blog-src-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s5);
  align-items:end;margin-top:var(--s6);}
.blog-src-field{display:flex;flex-direction:column;gap:var(--s2);}
.blog-src-field .blog-input{margin-bottom:0;}
.blog-src-go{padding:9px 16px;border:var(--bd) solid var(--edge);border-radius:var(--r-md);
  background:var(--chrome);color:var(--text);font:inherit;font-size:var(--t-small);
  font-weight:var(--w-med);cursor:pointer;transition:border-color var(--mo-fast);}
.blog-src-go:hover{border-color:var(--accent);}
.blog-src-go:disabled{opacity:.5;cursor:default;}

/* Sources used to be a three-column table under the centre editor. In the
   Tool Box each source is a compact stack and the long address can wrap. */
.blog-toolbox .blog-sources{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.blog-toolbox .blog-src-list{border-radius:var(--r-md);}
.blog-toolbox .blog-src-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  padding:var(--s3) var(--s4);font-size:var(--t-small);}
.blog-toolbox .blog-src-url{width:100%;white-space:normal;overflow-wrap:anywhere;}
.blog-toolbox .blog-src-x{align-self:flex-end;}
.blog-toolbox .blog-src-add{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);margin-top:var(--s2);}
.blog-toolbox .blog-src-field{min-width:0;}
.blog-toolbox .blog-src-go{width:100%;}

/* no dashed box anywhere on the desk. An empty shelf is one muted line. */
.blog-none{margin:0;padding:var(--s5) 0;color:var(--muted);font-size:var(--t-small);}
.blog-src-row.blog-none{display:block;padding:var(--s5) var(--s6);}

/* the one focus ring on the desk: the house accent, thin */
.blog-tab:focus-visible,.blog-mark:focus-visible,.blog-pic-press:focus-visible,
.blog-plus-act:focus-visible,.blog-plus:focus-visible,.blog-cover-act:focus-visible,
.blog-save:focus-visible,.blog-title:focus-visible,.blog-src-go:focus-visible,
.blog-card-open:focus-visible,.blog-card-del:focus-visible,.blog-card-share a:focus-visible{
  outline:1px solid var(--accent);outline-offset:2px;}

/* ---------- THE SCROLL BARS ----------
   Mark, 2026-09-02: "Fix the ugly scroll bars." The house hides its own in
   base.css and the desk's own scrolling boxes follow it, so nothing white ever
   sits down the right edge. Scrolling itself is untouched; only the bar goes. */
@media (max-width:1100px){
  .blog-src-add,.blog-src-row{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .blog-room{padding:18px 14px 48px;}
  .blog-canvas{padding:var(--s5);}
}