/* 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. */
.fd-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
  padding: 4px 8px;
  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: 34px; height: 34px; 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 4px 0 0; font-size: 15px; 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;
  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;
  min-width: 240px;
  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; }
.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; }

/* ------------------------------------------------------------- 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); }
#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-empty .btn { min-height: 38px; }
.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 { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--radius-sm); }
.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);
  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(760px, calc(100vw - 32px)); }
.fd-help-cols { display: grid; grid-template-columns: repeat(3, 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) {
  .fd-id, .fd-menubar { flex-basis: 100%; }
  .fd-id .suite-parts { margin-left: auto; }
  .fd-menubar { margin-left: -4px; }
  /* 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 { left: 8px; right: 8px; top: calc(100% + 2px); min-width: 0; }
  .fd-title { display: none; }
  .fd-layerpick { display: none; }
  .fd-grid2, .fd-help-cols { grid-template-columns: 1fr; }
  /* The bar scrolls sideways rather than squeezing the coordinates under
     the toggles, and keeps room at its end for the badge, which is an icon
     here rather than the desktop's words. */
  .fd-coords { min-width: 0; flex: none; }
  .fd-units { margin-right: 56px; }
  .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: the parts say
   where this is, and the name is still read out. */
@media (max-width: 480px) {
  .fd-brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fd-id .suite-parts { margin-left: 0; }
}
/* 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-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 { min-height: 44px; }
}