/* Erebor explorer — app-specific styling layered on top of skeleton.css.
   Defines this explorer's own accent palette, plus anything unique to
   Erebor (the condition/age/sex advanced-filter row). Linked after
   skeleton.css — see index.html. */

:root {
  --accent: #4B3F8C;
  --accent-dark: #332B63;
  --accent-tint: #EBE8F7;

  /* Second hue, distinct from the primary teal — distinguishes the
     patient file drawer's two event types ([ condition ] vs
     [ encounter ], see .tag--condition / .tag--encounter below). */
  --accent-2: #B5750E;
  --accent-2-dark: #8A5A0B;
}

/* ---- ID search field (primary row) ----
   Reuses skeleton.css's `.search__field` positioning/input styling —
   this modifier just gives it a narrower fixed width (unlike the name
   field's flex: 1) so the row reads name → ID → search → clear. 190px so
   the placeholder — "ID, e.g. EB40271853" — isn't cut off. */

.search__field--id {
  flex: 0 0 190px;
}

/* ---- advanced filters (second row) ----
   Erebor-specific: condition text + age range + sex, alongside the
   shared name search box from skeleton.css. */

.filters {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.filters__field {
  position: relative;
  flex: 1;
}

.filters__field--age {
  flex: 0 0 100px;
}

.filters__field--sex {
  flex: 0 0 130px;
}

/* Same look as skeleton.css's `.search input` — duplicated here rather
   than shared across a class boundary since these fields are Erebor's
   own addition, not part of the shared skeleton. */
.filters input,
.filters select {
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
}

.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Matches skeleton.css's 900px stack breakpoint — keep in sync with it. */
@media (max-width: 900px) {
  /* skeleton.css's own mobile rule already sends the generic
     `.search__field` to a full-width row — but this file's unconditional
     .search__field--id rule above sits later in the cascade (styles.css
     loads after skeleton.css) and would otherwise win over it at this
     width despite skeleton's rule being the one that actually matches
     here. Restate the override in the file that's cascade-last so it
     reliably wins. */
  .search__field--id {
    flex: 1 1 100%;
  }

  /* Four fields no longer fit on one line at this width — let them wrap
     instead of squeezing. Condition gets its own full-width row (it has
     no natural min-content width to fall back on, so without this it
     gets crushed to near-nothing by the fixed-width neighbors); age/sex
     then share the row(s) below. */
  .filters {
    flex-wrap: wrap;
  }

  .filters__field--condition {
    flex: 1 1 100%;
  }

  .filters__field--age,
  .filters__field--sex {
    flex: 1 1 130px;
  }
}

/* ---- patient file timeline type tags ----
   Reuses skeleton.css's base .tag bracket style; these modifiers pick each
   row type's hue — Erebor's two accents for encounters and conditions, the
   neutral ink for letters and reports, the accent again for appointments. */

.tag--encounter,
.tag--appointment {
  color: var(--accent-dark);
  border-color: var(--accent);
}

.tag--condition {
  color: var(--accent-2-dark);
  border-color: var(--accent-2);
}

.tag--letter,
.tag--report {
  color: var(--ink);
  border-color: var(--border-strong);
}

/* ---- patient file rows ----
   One fixed grid for every row: date | type | content | actions. All
   columns but content are fixed and the actions column is kept even when a
   row has nothing to read, so rows line up whatever they hold. Titles and
   detail lines clamp to two lines; dates use tabular figures. */

.detail__group {
  margin-top: 18px;
}

.xrow {
  --xrow-date: 56px;
  display: grid;
  grid-template-columns: var(--xrow-date) 110px minmax(0, 1fr) 58px;
  grid-template-areas: "date type content actions";
  align-items: start;
  column-gap: 14px;
  padding: 9px 4px;
  border-bottom: 1px dashed var(--border);
}

.xrow:last-child {
  border-bottom: 0;
}

.xrow__date {
  grid-area: date;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The Upcoming list shows full dates ("May 24, 2027"). */
.detail__group .xrow {
  --xrow-date: 96px;
}

.xrow__type {
  grid-area: type;
  min-width: 0;
}

.xrow__type .tag {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.xrow__content {
  grid-area: content;
  min-width: 0;
  max-width: 70ch;
}

.xrow__title,
.xrow__detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.xrow__title {
  font-size: 14px;
  line-height: 1.4;
}

.xrow__detail {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.xrow__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
}

/* Same look as skeleton.css's .detail__back — one size for every button. */
.xrow__btn {
  width: 58px;
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--accent-dark);
}

.xrow__btn:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.xlist__more {
  display: block;
  margin: 8px auto 4px;
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
  padding: 4px 14px;
  cursor: pointer;
  color: var(--accent-dark);
}

/* ---- reader ----
   An overlay in the explorer's terminal style: skeleton.css's .terminal
   window and path bar (no window-control dots), the document below. */

body.reader-open {
  overflow: hidden;
}

.reader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 18, 34, 0.55);
}

.reader__window {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: var(--panel);
}

.reader__bar {
  justify-content: space-between;
}

.reader__close {
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: 3px 10px;
  cursor: pointer;
  color: var(--accent-dark);
}

.reader__close:hover {
  background: var(--panel);
  border-color: var(--accent);
}

.reader__head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.reader__title {
  margin: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
}

.reader__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.reader__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 14px 20px 20px;
}

/* The rendered document: sanitized to plain structural tags on the
   gateway, so only those need styling. */
.reader__doc {
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.55;
}

.reader__doc > :first-child { margin-top: 0; }
.reader__doc h1, .reader__doc h2, .reader__doc h3, .reader__doc h4 { margin: 1.2em 0 0.4em; line-height: 1.3; }
.reader__doc h1 { font-size: 18px; }
.reader__doc h2 { font-size: 15.5px; }
.reader__doc h3, .reader__doc h4 { font-size: 14.5px; }
.reader__doc p, .reader__doc ul, .reader__doc ol { margin: 0.6em 0; }
.reader__doc ul, .reader__doc ol { padding-left: 1.4em; }
.reader__doc hr { margin: 1em 0; border: 0; border-top: 1px solid var(--border); }

/* Narrow screens: rows stack (date and type on one line, the content
   below, the action under that); the reader fills the screen. */
@media (max-width: 700px) {
  .xrow {
    grid-template-columns: var(--xrow-date) 110px minmax(0, 1fr);
    grid-template-areas:
      "date type ."
      "content content content"
      "actions actions actions";
    row-gap: 6px;
  }

  .xrow__actions {
    justify-content: flex-start;
  }

  .xrow__actions:empty {
    display: none;
  }

  .reader {
    padding: 0;
  }

  .reader__window {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* Second line under the patient count: "8 curated · 351 Synthea". */
.stat__sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}