/* ==================================================================
   ALT + F4NTASY THEME   (theme/theme.css)

   The one place the look is defined. The landing page and every tool
   link this file, so to change a colour, change it HERE and nowhere else.
   Even the colours the scripts use (title bar gradient, scrollbars, the
   pixel sky) are read from the values below.

   Contents
     1. Colours: light and dark            <- most edits happen here
     2. Base page and desktop backdrop
     3. Background sky layers
     4. Window pieces: title bar, toolbar, address bar, status bar
     5. Buttons, text fields, selects, checkboxes, sliders
     6. Dialog pages: the small centred window on the log-on and not-found pages

   Used by: desktop.html, index.html (log-on), not_found.html, the Gazetteer
   landing page and both tools.
   ================================================================== */


/* ------------------------------------------------------------------
   1. COLOURS
   Keep the two blocks below in step with desktop.html, so the
   desktop and every tool look like the same place.
   All colours are 6-digit #rrggbb, because the scripts parse them.
   ------------------------------------------------------------------ */
:root{
  color-scheme: light;

  /* Height of the top bar on the desktop and log-on pages */
  --bar-height: 44px;

  /* Fonts */
  --font-ui: "MS Sans Serif", Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  /* Desktop and surfaces */
  --desktop: #008080;              /* desktop background, and the sky's base colour */
  --grid: rgba(255, 255, 255, 0.1);
  --face: #C0C0C0;                 /* window chrome, buttons, panels */
  --paper: #FFFFE1;                /* reading panes, text fields */
  --text: #000000;
  --text-soft: #333333;            /* small print on grey panels */
  --muted: #666666;                /* small print on paper */

  /* Bevels: highlight, inner highlight, inner shadow, outer shadow */
  --hi: #FFFFFF;
  --hi2: #DFDFDF;
  --sh: #808080;
  --dk: #0A0A0A;

  /* Interaction */
  --hover: #0066CC;                /* hovered rows and links */
  --sel: #000080;
  --link: #0000CC;
  --win-border: #000000;
  --win-shadow: rgba(0, 0, 0, 0.35);
  --btn-hover: #FFE680;
  --card-hover: #A7D8FF;
  --disabled: #808080;
  --disabled-emboss: #FFFFFF;
  --warn: #B34700;                 /* warnings on grey or paper */
  --on-accent: #FFFFFF;            /* text on a filled accent button */

  /* Title bar gradient (left to right) */
  --banner-1: #A7D8FF;
  --banner-2: #FF9EA7;
  --banner-3: #FFE680;
  --banner-text: #1A0033;
  --banner-shadow: rgba(255, 255, 255, 0.6);
  --banner-fallback: linear-gradient(168deg, var(--banner-1) 0%, var(--banner-2) 50%, var(--banner-3) 100%);

  /* Scrollbars (Chrome, Edge, Safari get the square Win95 ones; Firefox uses the first two) */
  --sb-thumb: #C0C0C0;
  --sb-track: #E8E8E8;
  --sb-track-a: #FFFFFF;           /* the checkerboard track */
  --sb-track-b: #C0C0C0;

  /* Pixel sky: two gas colours, how strongly they show, and the star colours.
     Repeat a star colour to make it more common. */
  --sky-a: #A7D8FF;
  --sky-b: #FF9EA7;
  --sky-gain: 0.62;
  --star-1: #FFFFFF;
  --star-2: #FFFFFF;
  --star-3: #FFFFFF;
  --star-4: #A7D8FF;
  --star-5: #FFE680;
  --star-6: #FF9EA7;

  /* Tool colours: the stripe on each section, one hue per family.
     Darker here so they read on grey. */
  --acc-render:     #3B78B5;
  --acc-continents: #5B7F8F;
  --acc-tectonics:  #B8642E;
  --acc-seam:       #7A5FB8;
  --acc-planet:     #A8861A;
  --acc-visuals:    #2E8B6A;
  --acc-layers:     #5F7391;
  --acc-export:     #B5544C;
  --acc-suite:      #7A7A7A;   /* grey/silver mark */
  --acc-gtm-adv:    #2A5FA8;   /* dark saturated blue */
  --acc-gtm-play:   #7FB3E0;   /* light pastel blue */
  --acc-char:       #7A4FB5;   /* purple */
  --acc-sett:       #C4651E;   /* orange */
  --acc-lang:       #B89000;   /* yellow (dark enough to read on grey) */
  --acc-pol:        #2E7F4F;   /* green */
  /* Edge drawn round every colour stripe, so any --acc-* colour stands out from the grey.
     Black here, white in dark. Set it to transparent to turn the edge off. */
  --stripe-edge:    #000000;

  /* Old names the tool scripts may still read. They just point at the new colours. */
  --bg: var(--desktop);
  --panel-bg: var(--face);
  --raised: var(--face);
  --border: var(--sh);
  --border-strong: var(--sh);
  --text-muted: var(--muted);
  --accent-dim: transparent;
}

/* Dark theme. The two colours that set its mood are --desktop and --paper.
   Presets to try (swap the values in, and set --sb-track and --sb-track-a to match --paper):
     Teal + soft plum (current): desktop #0B3B3B   paper #241C3A
     Teal + navy (old):          desktop #0B3B3B   paper #0C0C48
     Space:                      desktop #05051A   paper #10102E   (grid: rgba(167, 216, 255, 0.08))
     Blue screen:                desktop #000080   paper #00005A
     Plum dusk:                  desktop #3A1040   paper #1F0F33 */
:root[data-theme="dark"]{
  color-scheme: dark;

  --desktop: #0B3B3B;
  --grid: rgba(255, 255, 255, 0.08);
  --face: #2E2444;
  --paper: #241C3A;
  --text: #EFE6FF;
  --text-soft: #CDBFE6;
  --muted: #A99CC4;

  --hi: #5A4A82;
  --hi2: #41355F;
  --sh: #16101F;
  --dk: #000000;

  --hover: #FF1493;
  --sel: #8A2BE2;
  --link: #A7D8FF;
  --win-border: #8A2BE2;
  --win-shadow: rgba(0, 0, 0, 0.45);
  --btn-hover: #8A2BE2;
  --card-hover: #4B2A7C;
  --disabled: #6F6288;
  --disabled-emboss: #000000;
  --warn: #FF8C42;
  --on-accent: #10241D;

  --banner-1: #FF1493;
  --banner-2: #8A2BE2;
  --banner-3: #1A0033;
  --banner-text: #FFFFFF;
  --banner-shadow: #1A0033;
  --banner-fallback: linear-gradient(168deg, var(--banner-1) 0%, var(--banner-2) 45%, var(--banner-3) 100%);

  --sb-thumb: #4B3D6E;
  --sb-track: #241C3A;
  --sb-track-a: #241C3A;
  --sb-track-b: #2E2444;

  --sky-a: #8A2BE2;
  --sky-b: #FF1493;
  --sky-gain: 0.78;
  --star-1: #FFFFFF;
  --star-2: #FFFFFF;
  --star-3: #EFE6FF;
  --star-4: #A7D8FF;
  --star-5: #FF9EA7;
  --star-6: #C9AAFF;

  /* The original pastel tool colours, which suit the dark theme as they were */
  --acc-render:     #8fb4d9;
  --acc-continents: #8fc4d0;
  --acc-tectonics:  #d9a077;
  --acc-seam:       #b7a5dd;
  --acc-planet:     #e0c070;
  --acc-visuals:    #7fc7ab;
  --acc-layers:     #9fb0c9;
  --acc-export:     #e0928c;
  --acc-suite:      #b8b8b8;
  --acc-gtm-adv:    #8fb4d9;
  --acc-gtm-play:   #b8d8f5;
  --acc-char:       #b7a5dd;
  --acc-sett:       #e0925c;
  --acc-lang:       #e0c070;
  --acc-pol:        #7fc7ab;
  --stripe-edge:    #FFFFFF;
}

/* Firefox can only recolour its scrollbars; the others get the drawn ones from theme.js */
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-color: var(--sb-thumb) var(--sb-track); }
}


/* ------------------------------------------------------------------
   2. BASE PAGE AND DESKTOP BACKDROP
   The teal grid is the desktop itself. The sky is painted over it;
   switch the sky off and this shows.
   ------------------------------------------------------------------ */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body{
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--desktop);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
}

button, input, select, textarea{ font-family: inherit; }


/* ------------------------------------------------------------------
   3. BACKGROUND SKY
   theme.js/sky.js draw two pixel-art tiles and CSS repeats them.
   Both tiles are 256 art pixels square at 4 screen px each, and the pan
   moves in whole art-pixel steps (steps(256)), like an old scrolling
   starfield rather than smooth video.
     #bgSky   = nebula gas + dim far stars   (slow)
     #bgStars = brighter near stars          (twice as fast, for depth)
   ------------------------------------------------------------------ */
#bgSky, #bgStars{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
#bgSky.panning  { animation: skyPan 256s steps(256) infinite; }
#bgStars.panning{ animation: skyPan 128s steps(256) infinite; }

/* --tile is set by sky.js to the tile's on-screen size, so one lap always
   covers exactly one tile and lands back on frame zero. */
@keyframes skyPan{
  from{ background-position: 0 0; }
  to{ background-position: calc(var(--tile, 1024px) * -1) calc(var(--tile, 1024px) * -1); }
}
@media (prefers-reduced-motion: reduce){
  #bgSky.panning, #bgStars.panning{ animation: none; }
}


/* ------------------------------------------------------------------
   4. WINDOW FRAME
   .stage  > .win > .win-titlebar
                  > .app > .toolbar, (page content), .status
   ------------------------------------------------------------------ */
.stage{
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* .win is the look of a window. Where it goes and how big it is depends on the page:
   the tools fill the screen (.stage > .win); the desktop's windows float and drag. */
.win{
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--paper);
  color: var(--text);
  border-style: solid;
  border-width: 2px;
  border-color: var(--hi) var(--sh) var(--sh) var(--hi);   /* raised: light top/left, dark right/bottom */
  box-shadow: 3px 3px 4px var(--win-shadow);
}
.stage > .win{
  width: 100%;
  max-width: 920px;              /* the landing page; tools add .win-wide */
}
.stage > .win.win-wide{ max-width: 1700px; }

.win-titlebar{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--banner-fallback);   /* plain gradient if JS is off */
  border-style: solid;
  border-width: 1px;
  border-color: var(--hi) var(--sh) var(--sh) var(--hi);   /* raised: light top/left, dark right/bottom */
  user-select: none;
  flex: none;
}

/* The pixelated gradient, drawn in by theme.js. It sits behind the title and buttons. */
.dither-canvas{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.win-id{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--banner-text);
  text-shadow: 1px 1px 0 var(--banner-shadow);
}
.win-id svg{
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--banner-text);
  shape-rendering: crispEdges;
}
.win-title{
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-title span{ font-weight: normal; }

.win-btns{
  position: relative;
  display: flex;
  gap: 4px;
  flex: none;
}

/* Minimize / close: raised buttons with pixel-drawn glyphs. They're links. */
.win-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--face);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset -1px -1px 0 var(--dk),
    inset 1px 1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset 2px 2px 0 var(--hi2);
}
.win-btn svg{ display: block; fill: currentColor; shape-rendering: crispEdges; pointer-events: none; }
.win-btn:hover{ background-color: var(--btn-hover); }
.win-btn.close:hover{ background-color: var(--hover); color: #FFFFFF; }
.win-btn:active{
  box-shadow:
    inset 1px 1px 0 var(--dk),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--sh);
}
.win-btn:active svg{ transform: translate(1px, 1px); }
.win-btn:focus-visible{ outline: 1px dotted var(--text); outline-offset: -4px; }

/* Top-bar button (desktop and log-on pages): a chunky 2px bevel */
.bar-btn{
  background-color: var(--face);
  color: var(--text);
  border-top: 2px solid var(--hi);
  border-left: 2px solid var(--hi);
  border-right: 2px solid var(--sh);
  border-bottom: 2px solid var(--sh);
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}
.bar-btn:active{
  border-top-color: var(--sh);
  border-left-color: var(--sh);
  border-right-color: var(--hi);
  border-bottom-color: var(--hi);
}
.bar-btn:focus-visible{ outline: 1px dotted var(--text); outline-offset: 2px; }

/* Everything under the title bar */
.app{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;                  /* for use inside a plain block, like the desktop's window bodies */
  background-color: var(--face);
}

.toolbar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background-color: var(--face);
  border-bottom: 1px solid var(--sh);
  flex: none;
}

/* Right-hand group on every page: theme button and the sky switches */
.tb-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.tb-sep{
  align-self: stretch;
  margin: 2px 4px;
  border-left: 1px solid var(--sh);
  box-shadow: 1px 0 0 var(--hi);
}

/* Sunken field: address bar, reading panes, text fields */
.sunken{
  background-color: var(--paper);
  box-shadow:
    inset 1px 1px 0 var(--sh),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--dk),
    inset -2px -2px 0 var(--hi2);
}

.address{
  flex: 1 1 140px;
  min-width: 0;
  padding: 4px 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.address a{ color: inherit; text-decoration: none; padding: 0 2px; }
.address a:hover{ background-color: var(--hover); color: #FFFFFF; }
.address a:focus-visible{ outline: 1px dotted var(--text); outline-offset: 0; }

/* One big scrolling reading pane (use together with .sunken) */
.pane{
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 4px;
  padding: 22px 26px 30px;
}

/* A scrolling pane can't keep its frame in an inset box-shadow: that is painted
   under the content, so anything with a background (a card, say) scrolls OVER the
   dark edge and hides it. Here the frame sits outside the scrolling area instead:
   the outer grey/white line is an outside shadow, the inner black/light line a border.
   Content is clipped inside the border, so it always slides under the frame. */
.pane.sunken{
  box-shadow:
    -1px -1px 0 var(--sh),      /* outer line, top and left  */
    0 0 0 1px var(--hi);        /* outer line, bottom and right */
  border: 1px solid;
  border-color: var(--dk) var(--hi2) var(--hi2) var(--dk);
}

.status{
  flex: none;
  background-color: var(--face);
  font-size: 12px;
  padding: 3px 8px;
  border-top: 1px solid var(--sh);
}

@media (max-width: 700px){
  .stage{ padding: 6px; }
}


/* ------------------------------------------------------------------
   5. BUTTONS, FIELDS, SELECTS, CHECKBOXES, SLIDERS
   ------------------------------------------------------------------ */

/* Raised button. .pill-btn and .panel-btn are the tools' older names for the same thing. */
.btn, .pill-btn, .panel-btn{
  background-color: var(--face);
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset -1px -1px 0 var(--dk),
    inset 1px 1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset 2px 2px 0 var(--hi2);
}
.btn:hover, .pill-btn:hover, .panel-btn:hover{ background-color: var(--face); color: var(--text); }
.btn:active:not(:disabled), .pill-btn:active:not(:disabled), .panel-btn:active:not(:disabled),
.btn.active, .pill-btn.active, .panel-btn.active{
  box-shadow:
    inset 1px 1px 0 var(--dk),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--sh);
}
.btn.active, .pill-btn.active, .panel-btn.active{
  background-color: var(--hi2);
  font-weight: bold;
}
.btn:disabled, .pill-btn:disabled, .panel-btn:disabled{
  color: var(--disabled);
  text-shadow: 1px 1px 0 var(--disabled-emboss);
  cursor: default;
}
.btn:focus-visible, .pill-btn:focus-visible, .panel-btn:focus-visible{
  outline: 1px dotted var(--text);
  outline-offset: -4px;
}

/* Text boxes and selects: sunken, on paper */
input[type="text"], input[type="number"], input[type="email"], select, textarea, .field{
  display: block;
  width: 100%;
  padding: 5px 6px;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background-color: var(--paper);
  box-shadow:
    inset 1px 1px 0 var(--sh),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--dk),
    inset -2px -2px 0 var(--hi2);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
select:focus, textarea:focus, .field:focus{
  outline: 1px dotted var(--text);
  outline-offset: -4px;
}
input:disabled, select:disabled, textarea:disabled{
  color: var(--disabled);
  background-color: var(--face);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder{ color: var(--muted); opacity: 1; }

select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  cursor: pointer;
  /* The little arrow is two half-squares meeting at a point, drawn in the text colour */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:disabled{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--disabled) 50%),
    linear-gradient(135deg, var(--disabled) 50%, transparent 50%);
}
option{ background-color: var(--paper); color: var(--text); }

/* Win95 checkbox, drawn on the input itself. The tick is nine 1-pixel-tall bars,
   coloured with --tick (the text colour), so it follows the theme with no images. */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  --tick: var(--text);
  background-color: var(--paper);
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 var(--sh),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--dk),
    inset -2px -2px 0 var(--hi2);
}
input[type="checkbox"]:checked{
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-position: 9px 3px, 8px 4px, 3px 5px, 7px 5px, 3px 6px, 6px 6px, 4px 7px, 5px 8px, 6px 9px;
  background-size:     1px 1px, 2px 1px, 1px 1px, 3px 1px, 2px 1px, 3px 1px, 5px 1px, 3px 1px, 1px 1px;
}
input[type="checkbox"]:focus-visible{ outline: 1px dotted var(--text); outline-offset: 2px; }
input[type="checkbox"]:disabled{ --tick: var(--disabled); background-color: var(--face); cursor: default; }

/* A checkbox with its label, as used in the toolbars */
.chk{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.chk:has(input:disabled){
  color: var(--disabled);
  text-shadow: 1px 1px 0 var(--disabled-emboss);
  cursor: default;
}

/* Sliders: a sunken groove with a raised block to drag */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border: 1px solid;
  border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  background-color: var(--paper);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 22px;
  margin-top: -9px;
  border: none;
  border-radius: 0;
  background-color: var(--face);
  box-shadow:
    inset -1px -1px 0 var(--dk),
    inset 1px 1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset 2px 2px 0 var(--hi2);
}
input[type="range"]::-moz-range-track{
  height: 4px;
  border: 1px solid;
  border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  background-color: var(--paper);
}
input[type="range"]::-moz-range-thumb{
  width: 10px;
  height: 20px;
  border: none;
  border-radius: 0;
  background-color: var(--face);
  box-shadow:
    inset -1px -1px 0 var(--dk),
    inset 1px 1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset 2px 2px 0 var(--hi2);
}
input[type="range"]:focus-visible{ outline: 1px dotted var(--text); outline-offset: 2px; }


/* ------------------------------------------------------------------
   6. DIALOG PAGES
   A small centred window on the desktop, with a vertical banner down
   the left. Used by the log-on page and the not-found page.

     .screen > .top-bar
             > .dlg-stage > .win > .win-titlebar
                                 > .dlg-body > .dlg-banner + .dlg-main
   ------------------------------------------------------------------ */
.screen{
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* Top bar with just the theme switch */
.top-bar{
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--bar-height);
  padding: 5px;
  background-color: var(--face);
  border-bottom: 2px solid var(--sh);
  font-size: 14px;
}

.dlg-stage{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
}

/* A dialog is a window on the window grey */
.dlg-stage > .win{
  width: min(430px, 100%);
  background-color: var(--face);
}

.dlg-body{
  display: flex;
  gap: 14px;
  padding: 10px;
}

/* Vertical banner, same idea as the Start menu's. The gradient is drawn in by theme.js. */
.dlg-banner{
  position: relative;
  flex: 0 0 44px;
  min-height: 210px;   /* keeps the window the same size while its contents change */
  overflow: hidden;
  background: var(--banner-fallback);
}

.dlg-banner-text{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1;
  font-size: 22px;
  font-weight: bold;
  color: var(--banner-text);
  text-shadow: 1px 1px 0 var(--banner-shadow);
}

.dlg-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.dlg-main[hidden]{ display: none; }

.intro{
  display: flex;
  align-items: center;
  gap: 12px;
}
.intro .ico{ font-size: 34px; line-height: 1; }
.intro p{ margin: 0; font-size: 14px; line-height: 1.4; }

.actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Dialog buttons are a little bigger than toolbar ones, and may be links */
.actions .btn{
  min-width: 84px;
  padding: 5px 12px;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}

/* The default button gets the extra outline, like a real dialog */
.btn.default{
  font-weight: bold;
  box-shadow:
    0 0 0 1px var(--text),
    inset -1px -1px 0 var(--dk),
    inset 1px 1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset 2px 2px 0 var(--hi2);
}
.btn.default:active:not(:disabled){
  box-shadow:
    0 0 0 1px var(--text),
    inset 1px 1px 0 var(--dk),
    inset -1px -1px 0 var(--hi),
    inset 2px 2px 0 var(--sh);
}

@media (max-width: 380px){
  .dlg-body{ gap: 10px; }
  .dlg-banner{ flex-basis: 36px; }
  .dlg-banner-text{ font-size: 18px; }
}