/*
    THE HEAD OVER A PANEL BESIDE A LIST.

    Components/Shared/ModelHead.razor is the component and this is its stylesheet. It draws the head
    the condition-set, consumption, storage and financial screens share: the name, what state the row
    is in, the description under it and the row that acts on all three.

    THE LAYOUT IS THE COMPONENT'S, NOT THE SCREEN'S. Four screens wear this head and one of them
    re-gridded it in its own stylesheet, so on that screen the description stopped where the name box
    stopped and on the other three it ran the full width of the card, under the buttons - which is
    exactly the "spacing is out under Clone, Delete and Apply" a reader files. The name and the
    description are one column, the actions are a second column spanning both rows, and that is
    stated once here.

    WHAT IT DOES NOT OWN. .sv-field, .sv-input and .sv-btn are the product's own vocabulary and stay
    in utilities.css; the shell around it is .sv-workbench* and the card it sits in is .sv-card* in
    the same file. Copying any of them in here to make this file self-contained is the dual-presence
    defect wearing a tidy name.
*/

/* TWO COLUMNS, NOT TWO ROWS. `display: contents` on the component's own row is what lets the name,
   the description and the actions become cells of one grid: the name over the description in the
   first column, the actions spanning both rows beside them. The alternative was a second head
   component per screen, which is what this one exists to have stopped. */
.sv-modelhead {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: var(--sv-space-3) var(--sv-space-5);
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-raised);
}

.sv-modelhead__row {
  display: contents;
}

.sv-modelhead__name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;

  /* A COLUMN, because the name box is no longer the only thing in here: what state the row is in
     sits under it. The 6px is .sv-field's own gap, restated so the state stands off the box by the
     same step the box stands off its label. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* THE DESCRIPTION IS THE NAME'S SECOND LINE AND STOPS WHERE THE NAME STOPS. Run the full width of
   the head it sits under the action buttons, which reads as a box that has escaped its own row -
   and it is the one thing on this head that is optional, so it is also the one that must not look
   like the widest control on the card. */
.sv-modelhead > .sv-field {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

/* Nothing is drawn at rest - a row that is saved and computed has nothing to report, and a badge
   that is always there is one nobody reads. */
.sv-modelhead__state {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex-wrap: wrap;
}

/* THE SUBJECT'S OWN LINE, a step up from the ordinary 13px field. This box holds the name the list
   beside it, the tab strip below it and every report generated from it all repeat, so it is the one
   control on the screen that is a title as well as an input. */
.sv-modelhead__title {
  font-size: 14px;
  font-weight: 600;
}

/* A SHADE OFF THE NAME, AND THE SHADE IS THE BORDER. The pair reads as primary and secondary rather
   than as two boxes, and what carries that is the lighter edge plus the name's own heavier face -
   not a second fill. A CONTROL'S FILL IS `--sv-input-fill` EVERYWHERE, so this box moves when that
   token moves; stating a fill here is one input in the product that would be left behind by it, on
   the one head Storage and Financials both wear. */
.sv-modelhead > .sv-field .sv-input {
  border-color: var(--sv-border-subtle);
}

/* ALIGNED WITH THE FIRST BOX, NOT ITS LABEL. The eyebrow above the name is 12px of type the actions
   have no counterpart for, so a row measured from the top of the block stood the buttons level with
   a word rather than with the control they act on.

   TWO GROUPS, NOT ONE ROW OF FIVE. What manages the row - clone it, delete it - is set apart from
   what writes to it, so the destructive control is never between the two controls a person presses
   over and over. The separation is whitespace rather than a rule: the row wraps at narrow widths,
   and a vertical hairline that has wrapped to the left edge of its own line reads as a defect. */
.sv-modelhead__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: var(--sv-space-5);
  flex-wrap: wrap;
}

.sv-modelhead__group {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex-wrap: wrap;
}

/* ── The head as the first region of the editor card ──────────────────────
   A SKIN, NOT A SECOND HEAD. Where the screen draws the editor as a card, the head is that card's
   first region rather than a card of its own - a card inside a card bounds nothing. It is one
   modifier here rather than a `__head` rule in four screens' stylesheets, because four copies of
   one declaration is four places for it to drift and none of them is where the component lives.

   THE PADDING IS THE CARD BODY'S OWN ON ALL FOUR SIDES, INCLUDING UNDER THE DESCRIPTION. The region
   below is not what spaces this head off: `.sv-card__subtabs` draws a rule and pads only its sides,
   so a head that stopped at its last control put the description box's own border flat on that rule
   with nothing between them - on every screen that carries a sub-tab strip, which is three of the
   four. The one screen that reads correctly is the one whose next region is `.sv-card__body`, and
   what saves it there is that body's padding rather than anything stated here.
   ────────────────────────────────────────────────────────────────────────── */

.sv-modelhead--flush {
  padding: var(--sv-space-4);
  border: 0;
  border-radius: 0;
  background: none;
}

/* Below the shell's own breakpoint the head stacks rather than wrapping its buttons off the edge,
   and the actions take the width they have - the same rule, and the same 1000px, that
   page-header.css states for the header above it. */
@media (max-width: 1000px) {
  .sv-modelhead {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-modelhead__name,
  .sv-modelhead > .sv-field,
  .sv-modelhead__actions {
    grid-column: 1;
    grid-row: auto;
  }

  .sv-modelhead__actions {
    padding-top: 0;
    justify-content: flex-start;
    gap: var(--sv-space-4);
  }
}