/*
  Gregg Shorthand Lookup
  ======================

  Stylesheet for the editor-inspired lookup interface.

  This file controls:
  - Theme variables
  - Light and dark mode
  - Main layout
  - SVG display states
  - Segment search grid
  - Search command line
  - Bottom ornament graphic
  - Status panel
  - Help panel
  - Responsive behavior

  Important layout behavior:
  - The command line is not pressed against the bottom edge.
  - A bottom ornament row visually occupies the lower space.
  - The ornament now stretches adaptively across the full page width.
  - The bottom row helps keep the search field away from docks,
    home bars, and browser UI.
*/


/* ---------------------------------------------------------------------------
   Theme variables
--------------------------------------------------------------------------- */

:root {
  --bg: #c9bead;
  --ink: #000917;
  --muted: #5d5852;
  --card: #b7c2d2;
  --line: #8e8780;
  --accent: #3d6b42;
  --accent-secondary: #573a54;
  --panel: #c9bead;
  --buffer: #f7f3ec;
  --error: #573a54;

  /*
    Slightly heavy borders give the site a physical terminal /
    manuscript-frame character.
  */
  --border-main: 3px;
  --border-panel: 2px;

  /*
    Bottom ornament row height.

    This is intentionally expansive because the ornament now acts as the
    visual boundary beneath the command line.
  */
  --bottom-ui-buffer: max(
    8rem,
    calc(env(safe-area-inset-bottom, 0px) + 5.5rem)
  );
}


/*
  Dark mode palette.

  Dark mode is not the default. It activates only when:
  - the user toggles it on, or
  - localStorage contains greggTheme = "dark".
*/

.dark-mode {
  --bg: #000917;
  --ink: #c9bead;
  --muted: #b7c2d2;
  --card: #454c58;
  --line: #575d6a;
  --accent: #a5cca9;
  --accent-secondary: #c2a3bf;
  --panel: #454c58;
  --buffer: #161412;
  --error: #c2a3bf;
}


/* ---------------------------------------------------------------------------
   Global base
--------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  /*
    100vh is the broad fallback.
    100dvh tracks the visible viewport more accurately in modern browsers.
  */
  min-height: 100vh;
  min-height: 100dvh;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 18px;
  background: var(--bg);
  color: var(--ink);
}


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

.editor-shell {
  min-height: 100vh;
  min-height: 100dvh;

  display: grid;

  /*
    Rows:
    1. Top bar
    2. Main SVG buffer
    3. Command/search line
    4. Status panel
    5. Error output
    6. Bottom ornament graphic

    The bottom space is a real ornament row rather than empty padding.
  */
  grid-template-rows:
    auto
    minmax(360px, 1fr)
    auto
    auto
    auto
    auto;

  background: var(--bg);
  border: var(--border-main) solid var(--line);
}


/* ---------------------------------------------------------------------------
   Top bar
--------------------------------------------------------------------------- */

.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 0.65rem 1rem;

  background: var(--panel);
  border-bottom: var(--border-panel) solid var(--line);
}


.app-title {
  font-weight: 700;
  letter-spacing: 0.05em;
}


.top-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}


.control-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
}


.control-divider {
  color: var(--line);
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
}


.theme-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}


/* ---------------------------------------------------------------------------
   Toggle switches
--------------------------------------------------------------------------- */

.toggle-switch {
  position: relative;
  display: inline-block;

  width: 54px;
  height: 28px;
  margin: 0;
}


.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;

  background: var(--line);
  border: 1px solid var(--muted);

  transition: 0.2s;
}


.toggle-slider::before {
  position: absolute;
  content: "";

  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;

  background: #c9bead;
  border: 1px solid var(--muted);

  transition: 0.2s;
}


.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}


.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(26px);
}


/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #c9bead;
  cursor: pointer;
  font-family: inherit;
}


.dark-mode button {
  color: #000917;
}


button:hover {
  opacity: 0.88;
}


.help-button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-weight: 700;
}


/* ---------------------------------------------------------------------------
   Main buffer
--------------------------------------------------------------------------- */

.editor-buffer {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 2rem;

  background: var(--buffer);
  border-bottom: var(--border-panel) solid var(--line);

  overflow: hidden;
}


.empty-buffer {
  color: var(--muted);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------------------------
   SVG display
--------------------------------------------------------------------------- */

.svg-box {
  width: min(900px, 100%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.svg-box img {
  display: block;

  max-width: 100%;
  max-height: 55vh;

  object-fit: contain;
}


/*
  Loading state.

  Used for /static/searching.svg.
*/

.svg-box.loading {
  width: 100%;
  height: 100%;
}


.svg-box.loading img {
  width: min(85vw, 900px);
  height: min(65vh, 700px);

  max-width: 100%;
  max-height: 70vh;

  object-fit: contain;
  color: var(--muted);
}


/*
  Not-found state.

  Used for /static/not_found.svg.
*/

.svg-box.not-found {
  width: 100%;
  height: 100%;
}


.svg-box.not-found img {
  width: min(75vw, 760px);
  height: min(55vh, 560px);

  max-width: 100%;
  max-height: 60vh;

  object-fit: contain;
  color: var(--muted);
}


/*
  NORMAL mode.

  The default MIRRORED mode is the raw SVG.
  NORMAL mode is produced by horizontally flipping the image.
*/

.normal-svg {
  transform: scaleX(-1);
}


/*
  Dark mode image handling.

  Most Gregg SVGs are black-on-transparent or black-on-white.
  Inverting them makes the strokes visible on dark backgrounds.
*/

.dark-mode .svg-box img {
  filter: invert(1);
}


/*
  Segment search grid.

  Segment mode can return many SVG files, so the result area is scrollable
  inside the main buffer rather than stretching the whole page indefinitely.
*/

.segment-box {
  width: min(1120px, 100%);
  height: 100%;
  max-height: 100%;

  overflow-y: auto;
  padding-right: 0.25rem;
}


.segment-summary {
  position: sticky;
  top: 0;
  z-index: 1;

  padding: 0.75rem 0;
  margin-bottom: 0.75rem;

  background: var(--buffer);
  color: var(--muted);
  border-bottom: 1px solid var(--line);

  font-weight: 700;
  letter-spacing: 0.04em;
}


.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;

  padding-bottom: 1rem;
}


.segment-card {
  margin: 0;
  padding: 0.75rem;

  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  background: var(--panel);
  border: var(--border-panel) solid var(--line);
}


.segment-card img {
  width: 100%;
  height: 105px;

  object-fit: contain;
}


.segment-card figcaption {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}


.segment-empty {
  grid-column: 1 / -1;

  padding: 1rem;

  color: var(--muted);
  background: var(--panel);
  border: var(--border-panel) solid var(--line);
}


.dark-mode .segment-card img {
  filter: invert(1);
}


/* ---------------------------------------------------------------------------
   Command line
--------------------------------------------------------------------------- */

.command-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;

  /*
    Side inset keeps the command bar from feeling like a raw browser-edge input.
  */
  margin: 0 1rem;

  padding: 0.7rem 1rem;

  background: var(--panel);
  border: var(--border-panel) solid var(--line);
  border-top: none;
}


.prompt-symbol {
  font-weight: 700;
  color: var(--accent-secondary);
  font-size: 1.25rem;
}


.command-line input {
  width: 100%;

  padding: 0.65rem 0.8rem;

  border: 1px solid var(--line);
  background: var(--buffer);
  color: var(--ink);

  font-size: 1.1rem;
  font-family: inherit;
}


.command-line input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


.command-line button {
  padding: 0.65rem 1rem;
}


/* ---------------------------------------------------------------------------
   Status panel
--------------------------------------------------------------------------- */

.status-panel {
  margin: 0 1rem;

  background: var(--card);
  border: var(--border-panel) solid var(--line);
  border-top: none;
}


.status-title {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}


.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.status-grid div {
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--line);
}


.status-grid div:last-child {
  border-right: none;
}


.status-grid strong {
  display: block;

  margin-bottom: 0.25rem;

  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.status-grid span {
  font-size: 1.1rem;
}


/* ---------------------------------------------------------------------------
   Errors
--------------------------------------------------------------------------- */

.error {
  margin: 0 1rem;

  padding: 0.8rem 1rem;

  color: var(--error);
  background: var(--panel);

  border: var(--border-panel) solid var(--line);
  border-top: none;
}


.hidden {
  display: none;
}


/* ---------------------------------------------------------------------------
   Bottom footer / ornament
--------------------------------------------------------------------------- */

.bottom-ornament {
  /*
    This row replaces the weak-looking empty bottom space.

    It now serves two purposes:
    1. It gives the lower page a deliberate visual boundary.
    2. It provides a modest footer with app description, open-source statement,
       and GitHub repository link.
  */
  min-height: var(--bottom-ui-buffer);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 1rem;

  /*
    Horizontal padding gives the text room to breathe.
    The SVG itself is still stretched full-width below.
  */
  padding:
    1.25rem
    1rem
    calc(env(safe-area-inset-bottom, 0px) + 1.75rem);

  background: var(--bg);

  overflow: hidden;
}


.footer-copy {
  /*
    Keeps the footer text readable instead of letting it run too wide.
  */
  width: min(920px, 100%);

  text-align: center;
  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.45;
}


.footer-description,
.footer-open-source {
  margin: 0;
}


.footer-description {
  margin-bottom: 0.35rem;
}


.footer-open-source a {
  color: var(--accent-secondary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


.footer-open-source a:hover {
  color: var(--accent);
}


/*
  Decorative stretched bottom SVG.

  This image is intentionally allowed to stretch horizontally so it fills the
  page width and creates a stronger bottom boundary.
*/

.bottom-ornament img {
  display: block;

  width: 100%;
  height: clamp(4.5rem, 10vw, 7.5rem);

  max-width: none;
  max-height: none;

  object-fit: fill;

  opacity: 0.92;
}


/*
  The footer ornament should remain visible in dark mode.
*/

.dark-mode .bottom-ornament img {
  filter: invert(1);
  opacity: 0.86;
}

/* ---------------------------------------------------------------------------
   Help panel
--------------------------------------------------------------------------- */

.help-panel {
  position: fixed;
  inset: 0;

  padding: 1.25rem;

  background: rgba(0, 9, 23, 0.75);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 20;
}


.help-panel.hidden {
  display: none;
}


.help-card {
  width: min(720px, 100%);
  max-height: 85vh;
  overflow-y: auto;

  padding: 1.5rem;

  background: var(--card);
  color: var(--ink);
  border: var(--border-panel) solid var(--line);
}


.help-card h2 {
  margin-top: 0;
}


.help-card table {
  width: 100%;
  border-collapse: collapse;
}


.help-card th,
.help-card td {
  padding: 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}


.help-card th {
  width: 20%;
  color: var(--muted);
}


.help-card button {
  float: right;
  padding: 0.45rem 0.8rem;
}


.help-card pre {
  padding: 1rem;
  background: var(--buffer);
  border: 1px solid var(--line);
  overflow-x: auto;
}


/* ---------------------------------------------------------------------------
   Responsive layout
--------------------------------------------------------------------------- */

@media (max-width: 780px) {
  .editor-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-controls {
    flex-wrap: wrap;
    row-gap: 0.55rem;
  }

  .control-divider {
    opacity: 0.65;
  }

  .status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .status-grid div {
    border-bottom: 1px solid var(--line);
  }
}


@media (max-width: 520px) {
  :root {
    /*
      Extra bottom ornament space for narrow screens and mobile-style UI.
    */
    --bottom-ui-buffer: max(
      9rem,
      calc(env(safe-area-inset-bottom, 0px) + 6.5rem)
    );
  }

  .editor-shell {
    grid-template-rows:
      auto
      minmax(300px, 1fr)
      auto
      auto
      auto
      auto;
  }

  .editor-buffer {
    padding: 1rem;
  }

  .command-line {
    grid-template-columns: auto 1fr;
    margin: 0 0.75rem;
  }

  .command-line button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .status-panel,
  .error {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .status-grid div {
    border-right: none;
  }

  .svg-box img {
    max-height: 45vh;
  }

  .segment-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }

  .segment-card img {
    height: 88px;
  }

  .bottom-ornament img {
    /*
      On small screens, keep the ornament full-width but slightly shorter.
    */
    width: 100%;
    height: clamp(4rem, 14vw, 6.25rem);
  }
}