/* assets/css/sheet-form.css
   The house stylesheet: the add/edit form, ONE drawing for every place it
   appears. The desk loads it under the selected words (assets/js/sheet-add.js,
   placed by sheet-add.css); the Storage page (Task 7) loads the same file, so
   the two forms are the same form. Placement lives elsewhere; this file only
   draws.

   Built inside the system: the head is the column label (.col-label, as
   "OUTPUT"), the field names are the label type (.toggle-label), CHANGE and
   FLAG are the option pills (.toggle-btn), SAVE and CANCEL are the settings
   pair (.btn-save-settings, .btn-reset-settings). Those classes come from
   editorial-frame.css; this file adds only the grid and the field boxes.
   Words only, no icon. Boxed buttons are pills, inputs are boxes, colours and
   sizes are tokens.

   Markup (class names are the contract):
     .sheet-form
       p.col-label.sheet-form-title
       .sheet-form-row.sheet-form-kinds   two .toggle-btn
       .sheet-form-row.sheet-form-fields  two label.sheet-form-field > .toggle-label + input.sheet-form-input
       .sheet-form-row.sheet-form-acts    .btn-save-settings, .btn-reset-settings
       p.sheet-form-msg
     .sheet-form[data-kind="flag"] hides the right form and gives the row to the wrong form. */

.sheet-form {
  max-width: var(--measure); /* never wider than the story column */
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--ink);
  text-align: left;
  white-space: normal;
}
.sheet-form-title {
  margin: 0 0 var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Every row runs the full width in two equal halves, so no word or button
   ever stands alone on a line, at any width. */
.sheet-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.sheet-form-acts { margin: 0; }
.sheet-form-row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  border-radius: var(--pill);
}
.sheet-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.sheet-form-field[hidden] { display: none; }
.sheet-form-field .toggle-label { white-space: nowrap; }
/* A flag has no right form: the wrong form takes the whole row. */
.sheet-form[data-kind="flag"] .sheet-form-fields { grid-template-columns: 1fr; }
.sheet-form-input {
  font-family: var(--font-body);
  font-size: var(--t-3); /* 16px: a phone does not zoom into the field */
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--box);
  padding: var(--s-2) var(--s-3);
  min-height: var(--touch-min);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.sheet-form-input:focus { outline: none; border-color: var(--ink); }
.sheet-form-msg {
  margin: var(--s-3) 0 0;
  font-family: var(--font-body);
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty; /* no lone word on the message's last line */
}
.sheet-form-msg:empty { display: none; }
.sheet-form-msg[data-state="fail"] { color: var(--warn); }
/* The desk's placeholder look, for a form that opens empty (the Storage
   page's add form). The desk's form opens filled and shows none. */
.sheet-form-input::placeholder { color: var(--quiet); font-style: italic; }

/* ---------- On a page without editorial-frame.css (Task 7) ----------
   The Storage page shows the same form and does not load the desk's frame,
   so these rules draw the desk's family there: the column label, the label
   type, the option pills and the settings pair, copied from
   editorial-frame.css (.col-label, .toggle-label, .toggle-btn,
   .btn-save-settings, .btn-reset-settings). They also write in the two values
   the desk form gets from its page: the body type it sits in (18px, 1.6
   line height, weight 450, no tracking) and weight 400 on "SAVE" and
   "CANCEL" (measured on DeskCopy Pro at 1440, 2026-10-07).
   They match only under .sheet-form-page, which no desk carries, so the desk
   form is drawn exactly as before. The page declares the token values.
   Every button in the Storage block uses this family; a destructive one
   adds .danger and takes the danger colour, nothing else.
   Guard: tests/sheet-list.test.js keeps each copy equal to the desk's. */
.sheet-form-page .sheet-form { font-size: 18px; line-height: 1.6; font-weight: 450; letter-spacing: normal; }
.sheet-form-page .sheet-form-msg { font-weight: 450; letter-spacing: normal; }

.sheet-form-page .toggle-label {
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 500;
}

/* margin-bottom is .sheet-form-title's, above */
.sheet-form-page .col-label {
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 500;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}

.sheet-form-page .toggle-btn {
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-weight: 500;
  font-size: var(--t-1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: normal;
  padding: var(--s-2) var(--s-2);
  min-height: var(--touch-min);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform var(--press-out) var(--press-ease);
  user-select: none;
}
@media (hover: hover) {
  .sheet-form-page .toggle-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
}
.sheet-form-page .toggle-btn.active { background: var(--accent); color: var(--cta-ink); border-color: var(--accent); }
.sheet-form-page .toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-form-page .toggle-btn:active:not(:disabled) {
  transform: scale(var(--press-light));
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform var(--press-in) var(--press-ease);
}

.sheet-form-page .btn-save-settings {
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: normal;
  padding: var(--s-2) var(--s-3);
  min-height: var(--touch-min);
  color: var(--cta-ink);
  background: var(--cta-fill);
  border: 1px solid var(--cta-fill);
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.sheet-form-page .btn-reset-settings {
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: normal;
  padding: var(--s-2) var(--s-3);
  min-height: var(--touch-min);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

/* Outside a form row too ("EDIT", "DELETE", "DELETE ALL RULES"): pills,
   words centred, on one line. */
.sheet-form-page .btn-save-settings,
.sheet-form-page .btn-reset-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
  border-radius: var(--pill);
}
.sheet-form-page .btn-save-settings:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) {
  .sheet-form-page .btn-save-settings:hover:not(:disabled) { opacity: 0.88; }
  .sheet-form-page .btn-reset-settings:hover { border-color: var(--accent); color: var(--accent); }
  .sheet-form-page .btn-reset-settings.danger:hover { border-color: var(--warn); color: var(--warn); }
}
.sheet-form-page .btn-save-settings:focus-visible,
.sheet-form-page .btn-reset-settings:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the danger colour: the same button, in --warn */
.sheet-form-page .btn-save-settings.danger { background: var(--warn); border-color: var(--warn); }
.sheet-form-page .btn-reset-settings.danger { color: var(--warn); }