/* OBSCURA Foundry - the application's window.
 *
 * The page is an application while body carries fd-app, which pro-load.js
 * takes off when the page is showing its lock screen instead, so the lock
 * screen is laid out as an ordinary page. Colours come from theme.css's
 * tokens only, so every colourway and both themes get the window; the
 * drawing's own colours are read from the same tokens by foundry-app.js.
 */

.fd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ the frame */

/* The window fills the screen and does not scroll: the drawing pans, the
   page stays put. It has a bar of its own, as the Engineering Suite's 3D
   parts and the Sovereign Suite do, rather than the site's. */
body.fd-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
/* There is no .app-wrapper on this page, as there is none on Drive's or the
   Sovereign Suite's: its gutter and reading width are for pages of text, and
   the lock screen brings its own. */
body.fd-app > .fd-main { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
body.fd-app .os-footer { display: none; }
/* The privacy badge sits in the status bar's right-hand end, as it does in
   the Photo Editor, rather than over the drawing. */
body.fd-app #ppBadge { left: auto; right: 6px; bottom: 3px; min-height: 22px; padding: 1px 8px; font-size: 11px; box-shadow: none; }

.fd {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  /* One column the width of the window. Left to size itself it took the
     widest row's content, 454px on a 390px phone, and every row was cut
     off at the right. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.35 var(--font-sans);
}

/* ------------------------------------------------- the bar and its menus */

/* The way home, the suite's name and which part of it this is, then the
   menus. On a phone the two go on rows of their own, so the menus are
   never cut short and their lists open in full. */
/* Above the tool row (z-index 44, for More's list), or a menu's list
   opened under it and its first items. */
.fd-top {
  position: relative;
  z-index: 45;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
.fd-id { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.fd-home { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); color: var(--ink-soft); }
.fd-home:hover { background: var(--paper-inset); color: var(--ink); }
.fd-home svg { width: 20px; height: 20px; }
.fd-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.fd-menubar {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}
.fd-menu { position: relative; }
.fd-menu > summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  color: var(--ink);
}
.fd-menu > summary::-webkit-details-marker { display: none; }
.fd-menu > summary:hover, .fd-menu[open] > summary { background: var(--paper-inset); }
.fd-drop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  /* As wide as its longest item, on one line where the window allows; and
     no taller than the window, scrolling inside rather than running off
     its foot (Draw holds thirty items). */
  width: max-content;
  min-width: 240px;
  max-width: min(440px, calc(100vw - 16px));
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule), 0 16px 34px -14px rgba(0, 0, 0, 0.35);
}
/* A shut menu's list takes no part in the layout. The browser only hides
   what a closed <details> holds, and still lays it out, so without this
   its buttons are measured - and found wanting - at whatever width that
   hidden box happens to get. */
.fd-menu:not([open]) > .fd-drop { display: none; }
/* The last two menus' lists open leftwards, so on a narrow window they
   are not cut off at its edge. */
.fd-menu:nth-last-of-type(-n+2) > .fd-drop { left: auto; right: 0; }
.fd-drop button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fd-drop button:hover, .fd-drop button:focus-visible { background: var(--accent-soft); color: var(--ink); outline: none; }
.fd-drop kbd { font: 11.5px var(--font-mono); color: var(--ink-faint); background: none; border: 0; padding: 0; }
.fd-drop hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--rule); }
.fd-title {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.fd-title[data-dirty]::after { content: " \2022"; color: var(--accent-strong); }

/* ------------------------------------------------------------ the toolbar */

.fd-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  overflow-x: auto;
  scrollbar-width: none;
}
.fd-toolbar::-webkit-scrollbar { display: none; }
.fd-group { display: flex; gap: 2px; padding-right: 6px; border-right: 1px solid var(--rule); }
.fd-tool, .fd-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.fd-tool svg, .fd-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fd-tool:hover, .fd-icon:hover { background: var(--paper-inset); color: var(--ink); }
.fd-tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.fd-tool:focus-visible, .fd-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-layerpick { display: flex; align-items: center; gap: 6px; flex: none; margin-left: 4px; color: var(--ink-soft); font-size: 12.5px; }
.fd-layerpick select, .fd-form select, .fd-form input[type="text"], .fd-form input[type="number"], .fd-props select, .fd-props input {
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  color: var(--ink);
  font: inherit;
}
.fd-panels-btn { display: none; margin-left: auto; }
/* What does not fit the row on a wider screen is in More, at the end of
   the tools (foundry-ux.js); with it there the row fits, so its list may
   hang below the bar. */
.fd-toolbar[data-folded] { position: relative; z-index: 44; overflow: visible; }
.fd-toolbar .fd-group[hidden], .fd-toolbar .fd-tool[hidden], .fd-more[hidden] { display: none; }
.fd-more { position: relative; flex: none; }
.fd-more-btn {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft);
  font: inherit; font-size: var(--text-xs); white-space: nowrap; cursor: pointer;
}
.fd-more-btn svg { width: 19px; height: 19px; fill: currentColor; }
.fd-more-btn:hover, .fd-more-btn[aria-expanded="true"] { background: var(--paper-inset); color: var(--ink); }
.fd-more-btn:focus-visible, .fd-more-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-more-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: min(380px, calc(100vw - 20px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  border-radius: var(--radius-md); background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule), 0 16px 34px -14px rgba(0, 0, 0, 0.35);
}
.fd-more-list[hidden] { display: none; }
.fd-more-h { grid-column: 1 / -1; margin: 6px 6px 2px; font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fd-more-h:first-child { margin-top: 2px; }
.fd-more-list button {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 4px 8px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink);
  font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer;
}
.fd-more-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-more-list button:hover { background: var(--paper-inset); }
.fd-more-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- the stage */

.fd-main { display: flex; min-height: 0; }
.fd-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--paper); }
/* The block editor's bar (foundry-blocks.js): across the top of the
   drawing while a block's definition is open in place of it. */
.fd-bedit {
  position: absolute; z-index: 20; top: 8px; left: 8px; right: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule-strong);
}
.fd-bedit[hidden] { display: none; }
/* The buttons are the site's .btn, drawn here as every application's own
   buttons are (Case, Keep, Books and the rest): 36px, the label at 14px
   and 600, the accent behind the one that does the thing and a rule
   round the secondary ones. A plain .btn is filled, as it is on the
   rest of the site. Before this they kept the site's larger 42px
   button at 13px and the reset's weight, so the start screen read as a
   different product. The rules after this one size the buttons in
   particular places. */
.fd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; }
/* The colours at an element's weight more, to outrank the site's
   :root button.btn-secondary, which takes the rule away. */
.fd :is(a, button, label).btn { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: none; }
.fd :is(a, button, label).btn:not(.btn-secondary, .btn-danger, .ghost):hover:not(:disabled) { background: var(--accent-strong); }
.fd :is(a, button, label).btn-secondary { border-color: var(--rule-strong); background: var(--paper-raised); color: var(--ink); }
.fd :is(a, button, label).btn-secondary:hover:not(:disabled) { background: var(--paper-inset); }
.fd :is(a, button, label).btn.ghost { border-color: transparent; background: transparent; color: var(--ink); }
.fd :is(a, button, label).btn.ghost:hover:not(:disabled) { background: var(--paper-inset); }
.fd-bedit .btn { min-height: 30px; padding: 3px 12px; font-size: var(--text-xs); }
.fd-bedit-label { font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); }
.fd-bedit-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: var(--text-xs); }
#fdCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
@media (hover: hover) and (pointer: fine) {
  /* The crosshair is drawn on the canvas, as a CAD program's is. */
  #fdCanvas { cursor: none; }
  #fdCanvas[data-pan] { cursor: grabbing; }
}
.fd-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(540px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 22px 24px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  box-shadow: 0 0 0 1px var(--rule), 0 20px 50px -30px rgba(0, 0, 0, 0.4);
  text-align: center;
  pointer-events: auto;
  /* Never taller than the drawing it sits on: on a short phone the stage
     is under 300px, and the card was cut off at the top. */
  max-height: calc(100% - 16px);
  overflow-y: auto;
}
/* Its own entrance, and one that keeps it centred. The site's arrival
   (.os-arriving, theme.css) animates transform, which replaced the
   translate(-50%, -50%) holding the card in the middle, so it slid in
   from well down and to the right. Two classes, so this beats that one
   rather than trading places with it on every showing. */
@keyframes fd-empty-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.985); } }
.fd-stage .fd-empty { animation: fd-empty-in 360ms var(--ease-out) backwards; }
.fd-empty .fd-empty-head { margin: 0 0 6px; font: 600 21px/1.2 var(--font-headline); color: var(--ink); }
.fd-empty p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.fd-empty kbd { font: 12px var(--font-mono); padding: 1px 5px; border-radius: 4px; background: var(--paper-inset); border: 1px solid var(--rule); }
.fd-empty-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fd-readout {
  position: absolute;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-strong);
  color: var(--on-accent);
  font: 600 11.5px/1.3 var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------------- the panels */

.fd-side {
  flex: none;
  width: 300px;
  overflow-y: auto;
  border-left: 1px solid var(--rule);
  background: var(--paper-raised);
}
.fd-panel { padding: 12px 14px 14px; border-bottom: 1px solid var(--rule); }
.fd-panel h2 { margin: 0 0 10px; font: 700 11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.fd-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fd-panel-head h2 { margin: 0; }
.fd-icon { width: 30px; height: 30px; }
.fd-icon svg { width: 16px; height: 16px; }

.fd-props { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.fd-props label { color: var(--ink-soft); font-size: 12.5px; }
.fd-props input, .fd-props select { width: 100%; min-width: 0; box-sizing: border-box; font: 12.5px var(--font-mono); }
.fd-props select { font-family: var(--font-sans); }
.fd-props .fd-val { font: 12.5px var(--font-mono); color: var(--ink); }
.fd-props-note { margin: 0 0 8px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.fd-props-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fd-props-actions .btn { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }

.fd-layers { list-style: none; margin: 0; padding: 0; }
.fd-layer { padding: 2px 4px 4px; border-radius: var(--radius-sm); }
.fd-layer-top { display: flex; align-items: center; gap: 4px; }
/* The layer's linetype and weight, a line under its name. */
/* The linetype's name is the longer of the two, so it has the wider column:
   CONTINUOUS whole at the panel's width, not cut to "Continuou". */
.fd-layer-more { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4px; padding: 0 0 0 64px; }
.fd-layer-more select {
  min-width: 0;
  min-height: 26px;
  padding: 1px 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  color: var(--ink-soft);
  font: var(--text-2xs) var(--font-sans);
}
.fd-layer[data-frozen] .fd-layer-name { color: var(--ink-faint); }
.fd-layer-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fd-layer-tools .btn, .fd-mini { min-height: 30px; padding: 3px 10px; font-size: var(--text-2xs); }
.fd-layer-tools .btn[hidden] { display: none; }
.fd-layer[aria-current="true"] { background: var(--accent-soft); }
.fd-layer .fd-icon { width: 28px; height: 28px; color: var(--ink-faint); }
.fd-layer .fd-icon[aria-pressed="true"] { color: var(--ink-soft); }
.fd-swatch { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper-inset); cursor: pointer; }
.fd-swatch select { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fd-layer-name {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.fd-layer-name:hover { background: var(--paper-inset); }
.fd-layer-name input { width: 100%; box-sizing: border-box; font: inherit; }
.fd-layer-count { flex: none; min-width: 22px; color: var(--ink-faint); font: 11px var(--font-mono); text-align: right; }
/* The faint ink falls under 4.5:1 on the current row's tint in some colourways. */
.fd-layer[aria-current="true"] .fd-layer-count { color: var(--ink-soft); }

/* ------------------------------------------------------- the command line */

.fd-command { border-top: 1px solid var(--rule); background: var(--paper-raised); padding: 4px 10px 6px; }
.fd-log {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 3.9em;
  overflow-y: auto;
  font: 12px/1.3 var(--font-mono);
  color: var(--ink-soft);
}
.fd-log li { white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-log li[data-kind="err"] { color: var(--danger); }
.fd-log li[data-kind="ok"] { color: var(--ink); }
.fd-prompt-row { display: flex; align-items: center; gap: 8px; }
.fd-prompt { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px var(--font-mono); color: var(--accent-strong); }
#fdCmd {
  flex: 1 1 auto;
  min-width: 60px;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  color: var(--ink);
  font: 13px var(--font-mono);
}
#fdCmd:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.fd-prompt-row .btn { min-height: 30px; padding: 3px 12px; font-size: 12.5px; }

/* ------------------------------------------------------------- the status */

.fd-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-top: 1px solid var(--rule);
  background: var(--paper-inset);
  font: 11.5px var(--font-mono);
  color: var(--ink-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.fd-coords { min-width: 180px; margin-right: 6px; white-space: nowrap; }
.fd-toggle {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--ink-faint);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.fd-toggle[aria-pressed="true"] { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.fd-units { margin-left: auto; padding-left: 10px; margin-right: 150px; }

/* ------------------------------------------------------------- dialogs */

.fd-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.fd-dialog::backdrop { background: rgba(10, 10, 14, 0.5); }
.fd-form { padding: 20px 22px; }
.fd-form h2 { margin: 0 0 14px; font: 600 22px/1.2 var(--font-headline); }
.fd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fd-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.fd-form .fd-check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.fd-form fieldset { margin: 14px 0 0; padding: 10px 12px 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.fd-form legend { padding: 0 4px; }
.fd-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.fd-note:empty { display: none; }
.fd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fd-actions .btn { min-height: 40px; }
.fd-help { width: min(1040px, calc(100vw - 32px)); }
/* External references (foundry-xref.js): a row each. */
.fd-xref-dlg { width: min(760px, calc(100vw - 32px)); }
.fd-xref-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.fd-xref-table th, .fd-xref-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.fd-xref-table th { font-weight: 600; color: var(--ink-soft); }
.fd-xref-n { font-variant-numeric: tabular-nums; text-align: right; }
.fd-xref-acts { white-space: nowrap; text-align: right; }
.fd-xref-acts .btn { min-height: 36px; margin-left: 4px; padding: 4px 10px; font-size: var(--text-xs); }
.fd-xref-none { margin: 0; font-size: var(--text-sm); color: var(--ink-faint); }
@media (max-width: 720px), (pointer: coarse) {
  .fd-xref-table, .fd-xref-table tbody, .fd-xref-table tr, .fd-xref-table td { display: block; }
  .fd-xref-table thead { display: none; }
  .fd-xref-table tr { padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .fd-xref-table td { padding: 2px 0; border: 0; text-align: left; }
  .fd-xref-table td[data-label]::before { content: attr(data-label) "  "; color: var(--ink-faint); }
  .fd-xref-name { font-weight: 600; }
  .fd-xref-table td.fd-xref-acts { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; padding-top: 6px; }
  .fd-xref-acts .btn { min-height: 44px; margin: 0; }
}
/* A dialog with a title block's worth of fields in it. */
.fd-dialog-wide { width: min(760px, calc(100vw - 32px)); }
.fd-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: var(--text-xs) var(--font-mono);
  resize: vertical;
}
.fd-pens { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fd-fields { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fd-print-window { display: flex; align-items: flex-end; }
.fd-print-table { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.fd-actions-wrap { flex-wrap: wrap; }

/* ------------------------------------------- the model and sheets tabs */

/* At the start of the status bar, as a CAD program's Model and layout
   tabs are: the one being worked on pressed in. */
.fd-sheets, .fd-sheets-list { display: flex; flex: none; gap: 2px; }
.fd-sheets { margin-right: 8px; }
.fd-sheet-tab {
  flex: none;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.fd-sheet-tab:hover { color: var(--ink); }
.fd-sheet-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.fd-sheet-add { min-width: 28px; padding: 0 6px; }

/* ----------------------------------------------------- the blocks panel */

.fd-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-block { display: flex; gap: 10px; align-items: flex-start; }
.fd-block-pic { flex: none; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.fd-block-info { display: grid; gap: 2px; min-width: 0; }
.fd-block-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-block-rename { width: 100%; box-sizing: border-box; font: inherit; }
.fd-block-count { color: var(--ink-faint); font-size: var(--text-2xs); }
.fd-block-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fd-block-actions .btn { min-height: 28px; padding: 2px 8px; font-size: var(--text-2xs); }
.fd-panel[hidden] { display: none; }

/* ------------------------------------------- editing text where it is */

.fd-inplace {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 4px;
  width: min(420px, calc(100% - 16px));
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 14px 30px -16px rgba(0, 0, 0, 0.45);
}
.fd-inplace-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.fd-sym {
  min-width: 26px;
  min-height: 26px;
  padding: 0 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  color: var(--ink);
  font: var(--text-xs) var(--font-sans);
  cursor: pointer;
}
.fd-sym:hover, .fd-sym:focus-visible { background: var(--accent-soft); outline: none; }
.fd-sym-wide { padding: 0 8px; }
.fd-inplace-bar select { min-height: 26px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: var(--text-2xs) var(--font-sans); }
.fd-inplace-ok { margin-left: auto; min-height: 26px; padding: 0 12px; font-size: var(--text-2xs); }
.fd-inplace textarea, .fd-inplace input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: Helvetica, Arial, var(--font-sans);
  line-height: 1.25;
  resize: vertical;
}
.fd-help-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 18px; margin-top: 12px; }
.fd-help dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.fd-help dt { font: 600 12px var(--font-mono); color: var(--accent-strong); }
.fd-help dd { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------- narrow screens */

/* Below a laptop the panels leave the side and come in as a drawer over
   the drawing when asked for, so the drawing keeps the width. */
@media (max-width: 980px) {
  .fd-panels-btn { display: grid; }
  .fd-side {
    position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 86vw);
    box-shadow: -20px 0 40px -24px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .fd-main { position: relative; }
  .fd[data-panels] .fd-side { transform: none; visibility: visible; transition: transform 240ms var(--ease-out); }
  .fd-help-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* The way home, the two parts and the menus are one row: the menus
     scroll sideways after the parts rather than wrapping onto two rows of
     their own, which with the toolbar put two hundred pixels of bar over
     the drawing. A menu's list hangs from the bar (below), so the row's
     scrolling does not clip it. */
  .fd-top { flex-wrap: nowrap; }
  .fd-menubar {
    flex: 1 1 0; flex-wrap: nowrap; margin-left: -4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .fd-menubar::-webkit-scrollbar { display: none; }
  .fd-menu > summary { white-space: nowrap; }
  /* A menu's list opens the width of the window under the bar, so the
     ones on the right are not pushed off the edge. */
  .fd-top { position: relative; z-index: 45; }
  .fd-menu { position: static; }
  .fd-drop, .fd-menu:nth-last-of-type(-n+2) > .fd-drop { left: 8px; right: 8px; top: calc(100% + 2px); width: auto; min-width: 0; max-width: none; }
  .fd-title { display: none; }
  .fd-layerpick { display: none; }
  .fd-grid2, .fd-help-cols { grid-template-columns: 1fr; }
  /* A dialog's buttons are a finger's height on a phone. */
  .fd-actions .btn { min-height: 44px; }
  /* The bar scrolls sideways rather than squeezing the coordinates under
     the toggles, and keeps the badge's room, which is an icon here rather
     than the desktop's words, out of what scrolls: a border is outside the
     scrolling box, so no toggle passes under the badge. A margin at the
     end of the row only cleared it once scrolled to the end. */
  .fd-coords { min-width: 0; flex: none; }
  .fd-status { border-right: 56px solid var(--paper-inset); }
  .fd-log { height: 2.6em; }
  .fd-empty { padding: 16px 16px; }
  .fd-empty .fd-empty-head { font-size: 18px; }
  .fd-empty p { font-size: 13.5px; margin-bottom: 10px; }
}
/* Too narrow for the suite's name beside its two parts and the menus: the
   parts say where this is, and the name is still read out. */
@media (max-width: 640px) {
  .fd-brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* A finger needs the site's 44px everywhere in the window. */
@media (pointer: coarse) {
  .fd-tool, .fd-icon, .fd-layer .fd-icon, .fd-swatch, .fd-home { width: 44px; height: 44px; }
  .fd-menu > summary, .fd-drop button, .fd-toggle, .fd-layer-name, #fdCmd, .fd-prompt-row .btn,
  .fd-layerpick select, .fd-props input, .fd-props select, .fd-form select, .fd-form input { min-height: 44px; }
  .fd-toggle, .fd-prompt-row .btn, .fd-menu > summary { min-width: 44px; }
  .fd-sheet-tab { min-height: 44px; min-width: 44px; }
  .fd-menu > summary { justify-content: center; }
  /* The status bar is 44px of controls here, so the badge docked in it can
     be a finger's height too. */
  body.fd-app #ppBadge { min-height: 44px; }
  .fd-empty .btn, .fd-props-actions .btn, .fd-layer-tools .btn, .fd-block-actions .btn, .fd-sym, .fd-inplace-ok { min-height: 44px; }
  .fd-sym { min-width: 44px; }
  .fd-layer-more select { min-height: 44px; }
  .fd-layer-more { padding-left: 0; }
}