/* ═══════════════════════════════════════════════════════════════════════════
 *  Table Tents — the only styles that are this tool's own
 * ═══════════════════════════════════════════════════════════════════════════
 *  LOADED LAST, AFTER chrome.css AND base.css, so anything here wins. That is
 *  exactly why it must stay small: a rule in this file is a rule no other tool
 *  gets, and a button restyled here is a button that no longer matches the
 *  site. Cards, buttons, notes, text inputs, .row, .hint, .lede and .mono all
 *  come from base.css and are not repeated below.
 *
 *  WHAT IS GENUINELY PECULIAR TO THIS TOOL, AND IT IS ONLY THIS:
 *    the drop target, which no other tool has;
 *    the preview table, which base.css does not style at all;
 *    the three ink colours, which match the three printed lines on the tent.
 *
 *  EVERY COLOUR IS A base.css VARIABLE except those three. Hardcoding the
 *  palette here is what made this tool's old page drift away from the site in
 *  the first place.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────── the drop target */

.tt-drop {
  border: 2px dashed var(--line-firm);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.2rem;
  text-align: center;
  transition: border-color .15s, background .15s;
}

/* .is-over IS ADDED BY app.js ON dragover. The cue has to be a colour change
   and not a border width: changing the width reflows the card under the
   pointer, and a target that moves while you are dropping on it misses. */
.tt-drop.is-over { border-color: var(--go-line); background: var(--go-soft); }

.tt-drop-say { margin: 0; color: var(--ink-bright); font-size: .92rem; }
.tt-drop-sub { margin: .35rem 0 0; color: var(--ink-dim); font-size: .8rem; }

/* THE FILE INPUT IS LEFT AS THE BROWSER DRAWS IT. base.css styles text inputs
   and deliberately does not style this one: the button inside a file input
   cannot be restyled across browsers, and a half-styled one looks broken
   rather than plain. Only its placement and colour are set. */
.tt-drop input[type=file] {
  display: block;
  margin: 1rem auto 0;
  max-width: 100%;
  color: var(--ink-dim);
  font: inherit;
  font-size: .8rem;
}

/* ───────────────────────────────────────────────────────── rows of controls */

/* .row in base.css stretches its children; .tight stops that. This only adds
   the gap above a row that follows something. */
.tt-after { margin-top: 1rem; }

.tt-picked { color: var(--ink-dim); font-size: .8rem; }

.tt-steps { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--ink-dim); font-size: .82rem; }
.tt-steps li { margin: .25rem 0; }
.tt-steps strong { color: var(--ink); font-weight: 600; }

.tt-note { margin: 1rem 0 0; color: var(--ink-faint); font-size: .76rem; }

/* ───────────────────────────────────────────────────────── the preview table */

/* A LIST OF 500 IS 5 COLUMNS WIDE AND NARROWER THAN A PHONE. The wrapper
   scrolls sideways rather than letting the table squash its own inputs to
   nothing; the scrollbar it uses is the site's, from base.css. */
.tt-scroll { margin-top: 1rem; overflow-x: auto; }

.tt-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tt-table th,
.tt-table td { text-align: left; padding: .4rem .45rem; border-bottom: 1px solid var(--line);
               vertical-align: middle; }
.tt-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
               color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.tt-table tr:last-child td { border-bottom: 0; }

.tt-tick { width: 2.2rem; text-align: center; }
.tt-num  { width: 2.6rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
           font-size: .78rem; }

/* The cells are base.css text inputs, tightened for a dense table. */
.tt-table td input[type=text] { padding: .3rem .45rem; font-size: .84rem; }

/* THE THREE INKS MATCH THE THREE PRINTED LINES on the tent: navy name, blue
   designation, green service. They are hardcoded because they are not site
   colours — they are the PDF's, set in Tents\TentPdf, and the preview is
   worth less if it does not look like what comes out of the printer. Change
   one here and change its partner there. */
.tt-c-name  input { color: #cfe4ff; font-weight: 600; }
.tt-c-desig input { color: #8fd4ff; }
.tt-c-srv   input { color: #8ad79a; font-style: italic; }

/* ONE COLUMN WIDTH IS SET, AND ONLY ON A WIDE SCREEN. Name is the longest of
   the three and the one most often corrected, so it gets the room; below that
   the wrapper scrolls and fixed widths would fight it. */
@media (min-width: 48rem) {
  .tt-c-name { width: 32%; }
}