/*
======================================================================
  5150 TABLE ROLLER  -  THIS TOOL'S OWN LOOK  (tables.css)
======================================================================
  The terminal itself (screen, scan lines, status line, button style),
  the colours, fonts and page come from ../shared/console.css (loaded
  first, section 4 "THE TERMINAL"). This file only has this tool's own
  parts:

    1. BUTTON ROWS   groups, sections and tables along the bottom
    2. CHOSEN TABLE  its name, page, boxes and the ROLL button
    3. THE SCREEN    each printed roll, the dice, a printed table
======================================================================
*/


/* ------------------------------------------------------------------
   1. BUTTON ROWS
------------------------------------------------------------------ */
/* Groups: the biggest buttons. */
.term-groups button { font-size: 14px; padding: 6px 14px; letter-spacing: 0.1em; }
/* (The labelled dashed lines between the rows, .term-divider, are in
   ../shared/console.css, section 4.) */
/* Sections: dashed outlines, with how many tables are in each. */
.term-sections button { border-style: dashed; font-size: 12px; }
.term-sections .count { opacity: 0.7; font-size: 11px; }
/* Tables: quiet grey outlines; the chosen one is in the highlight colour. */
.term-tables button { font-size: 12px; border-color: var(--frame); color: var(--ink); }
.term-tables button .key { color: var(--ink-dim); }
.terminal .term-tables button[aria-pressed="true"] { background: transparent; color: var(--accent); border-color: var(--accent); }
.terminal .term-tables button[aria-pressed="true"] .key { color: var(--accent); }
.term-tables .t-section { color: var(--ink-dim); font-size: 11px; }
.term-tools { justify-content: space-between; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.term-search input { width: 16rem; max-width: 60vw; }


/* ------------------------------------------------------------------
   2. CHOSEN TABLE
------------------------------------------------------------------ */
.term-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.term-controls:empty { display: none; }
.t-chosen { display: grid; gap: 2px; margin-right: auto; }
.t-chosen .t-title { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.t-chosen .t-source { font-size: 12px; color: var(--ink-dim); }
.t-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.t-controls input[type="number"] { width: 4.2em; }
.t-controls select { max-width: 14rem; }


/* ------------------------------------------------------------------
   3. THE SCREEN
------------------------------------------------------------------ */
.term-screen p { margin: 0; }
/* One printed roll: the command line, the dice, the result. */
.term-entry { margin: 0 0 10px; }
.term-entry .term-cmd { color: var(--ink-dim); }
.term-entry .term-out { padding-left: 1.4em; }
.term-entry .term-answer { padding-left: 1.4em; color: var(--accent); }
.term-entry .term-answer::before { content: "= "; }
/* One die face. A die that passed is lit; one that failed is dim (never red). */
.die {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.5em;
  margin-right: 3px;
  font-weight: bold;
  color: var(--ink);
  border: 1px solid var(--ink);
  text-shadow: none;
}
.die.passed { background: var(--ink); color: var(--paper); }
.die.failed { color: var(--ink-dim); border-color: color-mix(in srgb, var(--ink) 35%, transparent); opacity: 0.75; }
/* A whole table printed on the screen (only when the full tables are switched on in tables.js). */
.term-table { border-collapse: collapse; margin: 4px 0 4px 1.4em; font-size: 14px; }
.term-table th { text-align: left; color: var(--ink-dim); font-weight: normal; padding: 1px 10px 1px 0; border-bottom: 1px dashed var(--ink-dim); }
.term-table td { padding: 1px 10px 1px 0; vertical-align: top; }
.term-table td:first-child { white-space: nowrap; color: var(--accent); }

/* The latest result beside Roll: only on phones (see below). */
.t-last { display: none; width: 100%; margin: 0; font-size: 14px; }

@media (max-width: 600px) {
  .t-last:not(:empty) { display: block; }
  .term-search { width: 100%; }
  .term-search input { width: 100%; max-width: none; }
  .t-chosen { width: 100%; }
}