/* PAGE TWO in the Kural look. The page's working parts (static/app/summary.js) are unchanged and tested; this sheet
 * dresses their elements in the Kural tokens, and puts the summary itself on the off-white paper in the page serif.
 * Nothing here invents a colour or a size, and nothing is inline (CSP). */

.k-summary main { max-width: 52rem; margin: 0 auto; padding: var(--s-4); display: grid; gap: var(--s-4); }
.k-summary header.row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.k-summary h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-7); }
.k-summary a { color: var(--act); }
.k-summary .small { font-size: var(--t-3); color: var(--ink-2); margin: 0; }
.k-summary .code { font-family: var(--font-mono); letter-spacing: var(--track-mono); color: var(--ink); }

.k-summary .card { background: var(--surface-1); border: 1px solid var(--edge); border-radius: var(--r-3); padding: var(--s-4); display: grid; gap: var(--s-3); }
.k-summary .row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* The keys: the drawn press, tier 2, and the one primary action filled with the act colour. */
.k-summary .button {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--t-4); letter-spacing: var(--track-band); text-transform: uppercase;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-2); border: 1px solid var(--edge-strong);
  background: var(--surface-2); color: var(--ink); cursor: pointer; text-decoration: none;
}
.k-summary .button.primary { background: var(--act-2); border-color: var(--act-edge); color: var(--act-ink); }
.k-summary .button:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

/* THE SUMMARY ITSELF, on the paper, in the page serif. The three emphasis keys sit above it. */
.k-summary .toolbar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.k-summary .narrative {
  background: var(--paper); color: var(--paper-ink); font-family: var(--font-page); font-size: var(--t-5); line-height: 1.6;
  padding: var(--s-5); border-radius: var(--r-2); min-height: 20rem; white-space: pre-wrap; box-shadow: var(--paper-shadow);
}
.k-summary .narrative:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }

/* What the page says about itself: a notice, a warning (the record changed after this draft), an error. */
.k-summary .notice { margin: 0; color: var(--ink-2); font-size: var(--t-3); }
.k-summary .warn { margin: 0; color: var(--sfx-infer-ink); font-size: var(--t-3); border-left: var(--sfx-bar) solid var(--sfx-infer-ink); padding-left: var(--s-2); }
.k-summary .error { margin: 0; color: var(--sfx-conflict-ink); font-size: var(--t-3); }
.k-summary .dispo { margin: 0; font-family: var(--font-mono); font-size: var(--t-3); letter-spacing: var(--track-caps); color: var(--ink-2); }
.k-summary .sticky { position: sticky; top: 0; z-index: 2; background: var(--ground); padding: var(--s-2) var(--s-4); }

/* The medicines and follow-up under the draft (page two, 18 Sep): the form's own rows, a little tighter. */
.k-summary #k-meds-follow { padding: 0; }

/* "Can never be edited — Yes, sign / Go back", and the amend question. */
.k-summary dialog { background: var(--surface-2); color: var(--ink); border: 1px solid var(--edge-strong); border-radius: var(--r-3); padding: var(--s-5); max-width: 32rem; }
.k-summary dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* A hidden part stays hidden: the card, row and key rules above set a display, which would otherwise override the
 * browser's own rule for [hidden] and show every state of the page at once. */
.k-summary .card[hidden], .k-summary .row[hidden], .k-summary .button[hidden], .k-summary p[hidden],
.k-summary section[hidden], .k-summary [hidden] { display: none; }

/* HOME (18 Sep): the doctor's list, in the same look. The page's working parts (static/app/home.js) are unchanged. */
.k-summary .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); margin: 0; }
.k-summary .facts dt { font-family: var(--font-mono); font-size: var(--t-2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.k-summary .facts dd { margin: 0; color: var(--ink); }
.k-summary .button.big { display: block; text-align: center; padding: var(--s-4); font-size: var(--t-5); }
.k-summary .list { display: grid; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.k-summary .list .item { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); border: 1px solid var(--edge); border-radius: var(--r-2); background: var(--surface-1); color: var(--ink); text-decoration: none; }
.k-summary .list .item:focus-visible, .k-summary .list .item:hover { border-color: var(--act-edge); }

/* SIGN IN: the one key, centred. */
.k-signin main { max-width: 26rem; min-height: 70dvh; align-content: center; text-align: center; }