/*
======================================================================
  5150 CHARACTER GENERATOR  -  LOOK AND FEEL  (characters.css)
======================================================================
  Sections:
    1-3. (shared)       fonts, colour schemes and the page: these are
                        in ../shared/console.css, used by every 5150 tool
    MAIN AREA           the form, the draggable divider and the sheet
    4. THE EDITING FORM the boxes down the left
    5. THE SHEET        the character sheet itself (all three pages)
    6. GREYSCALE SHEET  extra contrast for printing
    7. PORTRAIT PICKER  the pop-up grid of portraits
    8. PHONES           small-screen changes
    9. PRINTING         what happens in the print / PDF window

  A line starting with  --name:  is a setting. Change the value after
  the colon and it changes everywhere that setting is used.

  TEXT SIZE ON THE SHEET: the sheet is made to be read on a phone
  watching a video, so its text is large. Sizes are in section 5.
======================================================================
*/



/* ------------------------------------------------------------------
   1-3. FONTS, COLOUR SCHEMES AND THE PAGE
   These are shared by every 5150 tool, so they live in
   ../shared/console.css (loaded before this file). Change a colour
   scheme there.
------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   MAIN AREA: form on the left, sheet on the right.
   On narrower screens they stack (see section 8).
------------------------------------------------------------------ */
.workspace {
  display: grid;
  /* form | hazard strip | sheet. The middle number is the strip's width.
     The form's starting width is "minmax(320px, 440px)"; dragging the
     strip replaces it with --form-width (see characters.js, section J). */
  grid-template-columns: var(--form-width, minmax(320px, 440px)) 14px 1fr;
  gap: 16px;
  padding: 0 16px 24px;
  align-items: start;
}

/* THE UPRIGHT HAZARD STRIP between the form and the sheet. (The flat
   strip's look is in ../shared/console.css.) The picture is made from
   the user's tools/2045.jpg by tools/5150/scripts/make-hazard-strip.py.
   To make it wider or narrower, change the "14px" in .workspace above. */
.hazard-strip-upright {
  /* Stands between the form and the sheet, running their full height. */
  height: auto;
  margin: 0;
  align-self: stretch;
  background: #111 url("../../shared/images/hazard-strip-vertical.jpg") repeat-y center top;
  background-size: 100% auto;
  border: 1px solid #555a61;
  /* It can be dragged: show the left-right arrows cursor over it. */
  cursor: col-resize;
  touch-action: none;
}
.hazard-strip-upright:hover,
.hazard-strip-upright:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--glow);
  outline: none;
}
/* While dragging: no text gets selected, and the cursor stays the same. */
body.dragging-divider { cursor: col-resize; user-select: none; }

/* The second Export bar, above the sheet. */
.export-bar .row { margin-bottom: 4px; }


/* ------------------------------------------------------------------
   4. THE EDITING FORM
------------------------------------------------------------------ */
.editor {
  background: rgba(12, 14, 17, 0.92);
  border: 1px solid #555a61;
  padding: 8px 12px 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  position: sticky;
  top: 16px;
}
.editor fieldset { border: 0; border-top: 1px solid #3c4148; margin: 0; padding: 12px 0 10px; min-width: 0; }
.editor fieldset:first-child { border-top: 0; }
.editor legend {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 0 4px;
}
[data-theme="print"] .editor legend { color: #e6e6e6; }
.editor legend small { font-family: var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ui-hint); }
.editor label:not(.button-like) { display: block; font-size: 13px; color: var(--ui-soft); margin-bottom: 8px; }
.editor label > select, .editor label > input[type="text"], .editor label > input[type="number"] { display: block; width: 100%; margin-top: 2px; }
.editor label.check { display: inline-flex; gap: 6px; align-items: center; color: var(--ui-text); font-size: 15px; margin-right: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.button-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editor fieldset:disabled { opacity: 0.45; }

.portrait-edit { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.portrait-edit img { width: 72px; height: 72px; object-fit: cover; border: 1px solid #7b8088; background: #000; }
.portrait-edit img:not([src]) { visibility: hidden; }
.portrait-edit div { display: flex; flex-wrap: wrap; gap: 6px; }

/* The repeating rows for items and band. */
.list-rows { display: grid; gap: 6px; margin-bottom: 8px; }
.list-row { display: grid; gap: 4px; align-items: center; background: #0a0b0d; border: 1px solid #33373d; padding: 6px; }
.list-row input, .list-row select { width: 100%; min-width: 0; font-size: 14px; padding: 4px 5px; }
.list-row .remove { padding: 3px 7px; font-size: 13px; }
.item-row { grid-template-columns: 3fr 1.2fr auto; }
.band-row { grid-template-columns: 2fr 1.4fr 0.7fr 0.7fr 0.7fr auto; }
.band-row .wide { grid-column: 1 / -2; display: grid; grid-template-columns: 1.4fr 1fr 2fr; gap: 4px; }
.add-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 6px; }
.add-item select { min-width: 0; }

/* The campaign log: one block per month, with its encounters inside. */
.month-block { background: #0a0b0d; border: 1px solid #33373d; border-left: 3px solid var(--ink); padding: 8px; margin-bottom: 8px; }
[data-theme="print"] .month-block { border-left-color: #d9d9d9; }
.month-head { display: grid; grid-template-columns: 0.8fr 1.4fr 0.8fr 0.8fr auto; gap: 4px; align-items: end; }
.month-head label { margin: 0 !important; font-size: 12px !important; }
.month-head input, .month-head select { width: 100%; min-width: 0; font-size: 14px; padding: 4px 5px; margin-top: 2px; }
.month-result { margin: 4px 0 6px !important; font-size: 12px !important; }
.month-result input { width: 100%; font-size: 14px; padding: 4px 5px; }
.encounter-row { display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 4px; margin-bottom: 4px; }
.encounter-row input.note { grid-column: 1 / -1; }
.encounter-row select, .encounter-row input { width: 100%; min-width: 0; font-size: 14px; padding: 4px 5px; }
.encounter-row.follow { margin-left: 18px; }


/* ------------------------------------------------------------------
   5. THE SHEET
   Each page is drawn at 1400 x 987 pixels (A5 on its side) and shrunk
   to fit the screen by characters.js. All sizes below are at full size.

   TO CHANGE THE LAYOUT: the "grid-template-columns" lines set the widths
   of the columns. "px" sizes are fixed; "1fr" means "the rest".
------------------------------------------------------------------ */
.preview { display: grid; gap: 16px; min-width: 0; }
.sheet-frame { position: relative; overflow: hidden; }
.sheet-scale { transform-origin: top left; width: 1400px; }

.sheet-page {
  position: relative;
  width: 1400px;
  height: 987px;
  overflow: hidden;
  padding: 32px 40px 30px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sheet);
  font-size: 24px;
  line-height: 1.3;
  /* The plain grey frame round the whole page. */
  border: 3px solid var(--frame);
  box-shadow: inset 0 0 0 8px var(--paper), inset 0 0 0 9px var(--frame);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Faint scan lines across the whole page, like an old monitor. */
.sheet-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--lines) 0, var(--lines) 2px, transparent 2px, transparent 5px);
}

/* Glowing text on the sheet. */
.sheet-page .glow { text-shadow: 0 0 9px var(--glow); }

/* HEAVIER TEXT: the sheet's text is Oxanium at its heaviest weight (800)
   so it reads on a phone. (An extra outline was tried and was too heavy.)
   To make it lighter, lower 800, e.g. to 600. */
.sheet-page { font-weight: 800; }

/* PAGE HEADING: the small line, the big name and the badge. */
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  border-bottom: 2px solid var(--frame);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.sheet-kicker { font-size: 18px; letter-spacing: 0.2em; color: var(--ink-dim); text-transform: uppercase; }
.sheet-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-badge { text-align: right; }
.sheet-badge .type {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.18em;
  color: var(--accent);
  border: 3px solid var(--accent);
  padding: 4px 14px 2px;
}
.sheet-badge .file-id { display: block; margin-top: 6px; font-size: 17px; color: var(--ink-dim); letter-spacing: 0.12em; }

/* A box on the sheet, with a title tab. Anything too long for the box
   is cut off at the box's edge rather than spilling out of it. */
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 2px solid var(--frame);
  padding: 22px 16px 10px;
}
.box-inner { flex: 1; min-height: 0; overflow: hidden; }
.box-title {
  position: absolute;
  top: -14px;
  left: 12px;
  background: var(--paper);
  padding: 0 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.box-count { position: absolute; top: -14px; right: 12px; background: var(--paper); padding: 0 8px; font-size: 19px; color: var(--ink-dim); }
.box-count.over { color: var(--accent); }

/* PAGE 1 LAYOUT: portrait column, middle column, right column,
   with the notes strip across the bottom. */
.p1-grid {
  display: grid;
  grid-template-columns: 300px 1fr 440px;
  grid-template-rows: 1fr 118px;
  gap: 22px;
  height: 780px;
}
.p1-col { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.p1-col > .grow { flex: 1; }
.p1-notes { grid-column: 1 / -1; }

.portrait-box { padding: 8px; }
.portrait-box img, .portrait-box .no-portrait { display: block; width: 280px; height: 280px; object-fit: cover; background: #000; }
.portrait-box .no-portrait {
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  font-size: 20px;
  letter-spacing: 0.2em;
  border: 1px dashed var(--frame);
}
/* Portraits are black-and-white pictures. In the coloured schemes they
   get a faint tint of the scheme colour; in greyscale they stay grey. */
.portrait-box .tint { position: relative; }
.portrait-box .tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}
[data-theme="print"] .portrait-box .tint::after { opacity: 0; }

/* The three big numbers: Rep, People, Savvy. */
.stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.stat { text-align: center; padding: 22px 6px 8px; }
.stat .num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 72px; line-height: 1; }
.stat.small .num { font-size: 56px; padding-top: 8px; }

/* Label-and-value lines, e.g. "RACE ...... Basic". */
.line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--frame) 70%, transparent);
  padding: 4px 0;
}
.line:last-child { border-bottom: 0; }
.line .label { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: 20px; white-space: nowrap; }
.line .value { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 25px; }

/* An Attribute, Advantage or other entry with a name and a description.
   "inline" puts the description straight after the name to save space. */
.entry { padding: 5px 0 6px; border-bottom: 1px dashed color-mix(in srgb, var(--frame) 70%, transparent); }
.entry:last-child { border-bottom: 0; }
.entry .name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.entry .text { font-size: 22px; color: var(--ink); }
.entry.inline .name { display: inline; margin-right: 10px; }
.entry.inline .text { display: inline; }
.empty { color: var(--ink-dim); font-size: 22px; }

/* The empty squares for Star Power dice, Extraordinary Effort and status. */
.tick-boxes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.tick { width: 26px; height: 26px; border: 2px solid var(--ink); display: inline-block; vertical-align: middle; }

.notes-text { font-size: 23px; white-space: pre-wrap; overflow: hidden; max-height: 82px; }

/* The small print at the bottom of each page. */
.sheet-foot {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* PAGE 2 LAYOUT: items and band side by side. */
.p2-grid { display: grid; grid-template-columns: 440px 1fr; gap: 22px; height: 780px; }

/* PAGE 3 LAYOUT: the campaign log fills the page. */
.p3-grid { display: grid; height: 780px; }

/* Ruled tables (items, band, campaign log). */
.ruled { width: 100%; border-collapse: collapse; font-size: 23px; table-layout: fixed; }
.ruled th {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
  padding: 2px 6px 6px;
  border-bottom: 2px solid var(--frame);
  white-space: nowrap;
}
.ruled td {
  height: 40px;
  padding: 2px 6px;
  border-bottom: 1px dashed color-mix(in srgb, var(--frame) 70%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ruled .num { text-align: center; }
.ruled td.small { font-size: 21px; }
.ruled td.month-cell { vertical-align: top; padding-top: 7px; border-right: 1px dashed color-mix(in srgb, var(--frame) 70%, transparent); }
.ruled tr.month-start td { border-top: 2px solid var(--frame); }
.ruled .follow { padding-left: 22px; }

/* The small dim labels inside a line ("REP", "WEAPON", "NOTES"...). */
.cell-label {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-right: 8px;
}
.cell-label:not(:first-child) { margin-left: 18px; }

/* BAND: three lines per member, with a solid line between members.
   (5 members x 3 lines fill the box, even when every note wraps.) */
.band-table td { height: 41px; }
.band-table tr.member-start td { border-top: 2px solid var(--frame); }
.band-table .member-name { color: var(--accent); }

/* CAMPAIGN LOG: two lines per encounter. The second line (what happened)
   is a little smaller, and a dashed line separates encounters. */
.log-table td { height: 42px; }
.log-table tr.encounter-start td { border-top: 1px solid color-mix(in srgb, var(--frame) 80%, transparent); }
.log-table td.what-happened { color: var(--ink); }

/* EDITABLE PDF: while the PDF's background picture is taken, the values
   are hidden, because they become fill-in boxes on top of it instead
   (see "EDITABLE PDF" in characters.js). Table lines keep their ruling. */
.pdf-capture [data-pdf-hide] { visibility: hidden; }
.pdf-capture td[data-pdf-hide] { visibility: visible; color: transparent; text-shadow: none; }
.pdf-capture td[data-pdf-hide] * { visibility: hidden; }

/* Long notes wrap onto a second line instead of being cut short
   (anything past two lines is still trimmed with "..."). */
.ruled td.wrap { white-space: normal; line-height: 1.15; padding-top: 5px; padding-bottom: 5px; }
.ruled td.wrap .wrap-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* The little INV / VOL / HOME labels in the campaign log. */
.kind {
  display: inline-block;
  min-width: 52px;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0 4px;
}


/* ------------------------------------------------------------------
   6. GREYSCALE SHEET: extra contrast for printing
   Box titles, the big numbers, the badge and table headings become
   solid black with white writing.
------------------------------------------------------------------ */
[data-theme="print"] .box-title { background: #000; color: #fff; padding: 0 10px; }
[data-theme="print"] .box-count { background: #fff; color: #000; }
[data-theme="print"] .stat { background: #000; border-color: #000; }
[data-theme="print"] .stat .num { color: #fff; }
[data-theme="print"] .sheet-badge .type { background: #000; color: #fff; border-color: #000; }
[data-theme="print"] .ruled th { background: #000; color: #fff; padding-top: 6px; border-bottom-color: #000; }
[data-theme="print"] .kind { background: #000; color: #fff; border-color: #000; }
[data-theme="print"] .sheet-head { border-bottom-color: #000; }


/* ------------------------------------------------------------------
   7. PORTRAIT PICKER
------------------------------------------------------------------ */
#portrait-picker {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: #0b0c0e;
  color: var(--ui-text);
  border: 2px solid #7b8088;
  padding: 0;
}
#portrait-picker::backdrop { background: rgba(0, 0, 0, 0.75); }
.picker-head {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: #0b0c0e;
  border-bottom: 1px solid #3c4148;
  padding: 12px 14px;
}
.picker-head h2 { margin: 0; font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
[data-theme="print"] .picker-head h2 { color: #e6e6e6; }
.picker-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-filters button { font-size: 13px; padding: 4px 9px; }
.picker-filters button[aria-pressed="false"] { background: transparent; color: var(--ui-text); border-color: #5d636b; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 14px; }
.picker-grid button { padding: 0; border: 2px solid #3c4148; background: #000; }
.picker-grid button:hover, .picker-grid button:focus-visible { border-color: var(--ink); }
.picker-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
/* The heading over each section of portraits (spans the whole row). */
.picker-section {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #3c4148;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-soft);
}
.picker-section:first-child { margin-top: 0; }


/* ------------------------------------------------------------------
   8. PHONES AND NARROW SCREENS
   The form and sheet stack, and the form no longer scrolls on its own.
------------------------------------------------------------------ */
@media (max-width: 960px) {
  .workspace { grid-template-columns: 1fr; }
  .editor { position: static; max-height: none; }
  /* The sheet drops below the form, so the strip lies flat between them
     (and can't be dragged). */
  .hazard-strip-upright {
    cursor: default;
    height: 16px;
    background-image: url("../../shared/images/hazard-strip.jpg");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 100%;
    border-left: 0; border-right: 0;
  }
}
@media (max-width: 480px) {
  .field-row, .field-row.three { grid-template-columns: 1fr; }
  .band-row, .month-head { grid-template-columns: 1fr 1fr; }
  .item-row { grid-template-columns: 1fr auto auto; }
}


/* ------------------------------------------------------------------
   9. PRINTING / PDF
   Only the sheet pages print, one per A5 landscape page.
   The pages are shrunk from 1400 pixels wide to fit 210 mm.
------------------------------------------------------------------ */
@media print {
  @page { size: A5 landscape; margin: 0; }
  body { background: none; }
  .top-bar, .toolbar, .editor, #portrait-picker, .hazard-strip, .export-bar, .page-foot { display: none !important; }
  .workspace { display: block; padding: 0; }
  .preview { display: block; }
  .sheet-frame { height: auto !important; overflow: visible; break-after: page; }
  .sheet-frame:last-child { break-after: auto; }
  .sheet-scale { transform: none !important; width: auto; }
  .sheet-page { zoom: 0.566; }
}