/* =====================================================================
   THE SHELL - sign in, and the home screen.

   PLACEMENT ONLY, the way public/place.css is placement only for the 34
   windows. Every box on these two screens is already a design-system
   component - `.win`, `.band`, `.rows`, `.tile`, `.well`, `.field`,
   `.tabs`, `.btn`, `.doll-box` - and this sheet says where they sit and
   how big the stage is. It invents no face, no rim and no colour of its
   own: every value below is a token out of public/hud-ui/design.css.

   It replaces public/auth.css (1,100 lines) and
   public/dashboard/dashboard.css, both of which drew a second window
   system beside the game's.
   ===================================================================== */

.shell {
  position: fixed;
  inset: 0;
  z-index: 30;                       /* over the canvas, under a dialog's .scrim */
  font: var(--face-weight) var(--win-size)/1.35 var(--face-ui);
  color: var(--ink);
}
.shell[hidden] { display: none; }

/* The stage: the vista, and whatever stands on it. Full viewport, no page
   scroll and no page chrome - this screen is the whole window, not a
   document in one. */
.shell__stage {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: #81c9ec url("/data/art/landing/character-selection-world-v8-simple-day.0f2c0a25.webp") center 58% / cover no-repeat;
}
/* Two children now, the box and the build line under it, so the stage centres the PAIR rather
   than leaving them at the top: align-content for the stack, place-items for each row. */
.shell__stage--signin { place-items: center; align-content: center; }
/* Four rows, each child pinned to its own: the top bar, the download strip under it, the
   vista, the verbs. Pinned rather than flowed, so the strip's row is simply empty (no height,
   no gap) while the strip is hidden and the vista keeps the stretching row either way. */
.shell__stage--home { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.shell__stage--home > .shell__band { grid-row: 1; }
.shell__stage--home > .shell__world { grid-row: 2; }
.shell__stage--home > .shell__vista { grid-row: 3; }
.shell__stage--home > .shell__verbs { grid-row: 4; }

/* ------------------------------------------------------------- sign in */

/* The sign-in box is a HEADLESS window, and it is the only one. Everything about it is the
   design system's .win - the parchment, the rim, the radius - minus the title bar, because a box
   that is the whole screen has nothing to be closed to and a title that reads "Tamerland" over a
   vista that already says so twice. The window stack is untouched: .win--headless only skips the
   head, so nothing here is a second window implementation. */
.shell__signin {
  width: min(24em, calc(100vw - 2em));
  position: relative;
  overflow: hidden;
  /* THE CARD CARRIES ITS OWN FACE. Normally .win is only the pale rim and the body and foot each
     paint the parchment; here the engraving has to lie IN the parchment, under the fields, and a
     layer behind two opaque children is a layer nobody sees. So the fill moves up to the card and
     the rim band becomes an inset ring - same two bands, one surface - and body and foot go
     transparent below. */
  background: var(--win-face);
  box-shadow: var(--win-shadow), inset 0 0 0 3px var(--rim);
}
.shell__signin > .win__body, .shell__signin > .win__foot { background: transparent; }
/* Everything that is not the engraving stands over it. */
.shell__signin > * { position: relative; z-index: 1; }
/* THE ENGRAVING. Two corner flourishes of the system's own ornament set, one top left and one
   bottom right, so the card reads as a diagonal rather than a frame. They START AT THE EDGE and
   are clipped by it - an ornament inset from the corner reads as a sticker, one running off it
   reads as cut into the material - which is what the box's own overflow:hidden is for.

   THROUGH THE SHIPPED .engrave HELPER, not as a background image. Every --orn-* shape is a single
   black fill meant for mask-image (see the header of ornaments.css): used as a background it
   paints a black smudge, which at any opacity that does not look like dirt is invisible. The
   helper masks two copies instead - --engrave-light lifted by --engrave-lift over --engrave-dark -
   which is what makes a line look cut into parchment rather than drawn on it.

   Its own element, because the helper needs ::before AND ::after and .win has already spent both:
   ::before on the head's cast shadow, ::after on the rim hairline. signin.ts inserts the span. */
.shell__engrave {
  /* head-l and head-r, NOT the --orn-corner* set. Those four are four-pointed stars with
     sparkles round them - read the contact sheet, not the name: dropped in a corner they scatter
     across the card like debris. These two are the corner scrollwork, a dense knot at one end
     with a wisp trailing out of it, which is what an engraved card corner actually is. */
  --engrave-mask:
    var(--orn-head-l) left top / 9em auto no-repeat,
    var(--orn-head-r) right bottom / 9em auto no-repeat;
  position: absolute;
  inset: 3px;                 /* inside the rim ring, not under it */
  border-radius: .4em;
  overflow: hidden;
  /* Stronger than the HUD's own engravings, and deliberately: those are cut into a small dark
     chip an arm's length from the eye, this one is a broad pale card that is the whole screen.
     At the HUD's weight it read as a smudge on the parchment. */
  --engrave-dark: rgba(70, 30, 15, .22);
  --engrave-light: rgba(255, 252, 246, .9);
}
/* Under the contents, and it has to beat the z-index:1 the rule below hands every other child. */
.shell__signin > .shell__engrave { z-index: 0; background: none; }
.shell__form { display: grid; gap: .5em; }
/* ONE BUTTON, THE WIDTH OF THE BOX. The foot's usual shape is notes at the left and the primary
   pushed right; with the version line moved out from under it there is nothing to push against,
   and a lone button hugging the right edge of a box this narrow reads as an afterthought rather
   than as the thing you came here to press. */
.shell__signin .win__foot { display: block; }
.shell__signin .win__foot .btn { width: 100%; justify-content: center; text-align: center; }
/* The build number, OUTSIDE the box and under it: it is about the client, not about signing in. */
.shell__build { margin: .7em 0 0; text-align: center; }
.shell__build .note-line { display: inline; }

/* ---------------------------------------------------------- home: band */

/* THE ACCOUNT'S SHELF, straight across the top of the stage.

   It was a plain `.band` at the window system's own 12px: the grey
   information strip a window wears UNDER its head, laid over a painted
   vista. At that weight it read as a browser toolbar somebody had left on
   top of the game. Two changes, and neither of them is a new face - both
   are material the design system already ships.

   IT IS BIGGER. A window is read at arm's length inside the world; this
   shelf is read from as far back as the vista behind it, which is the
   same distance the four sections are read from, so it takes their 14px
   --win-size rather than the 12px a window wears. One line scales all of
   it - type, pills, the tab strip, the purse, the button - because every
   box in the system is drawn in em against that number. The narrow
   breakpoint at the bottom of this sheet hands it back to 12px, where the
   screen is the size of a hand and the strip has to fit.

   IT WEARS THE WINDOW HEAD'S OWN FACE. The parchment gradient, the pale
   rim with the warm hairline just inside it, the window shadow, and the
   two knots of scrollwork at the ends: that is exactly what .win__head
   and .win paint, and this shelf is the account's title bar, so it is
   drawn as one. The ornaments go on as BACKGROUNDS here, the way
   .win__head uses this same mirrored pair, because --orn-head-knot and
   --orn-head-knot-l carry the engraving's two colours baked into the
   shape and cut straight into the parchment. (The sign-in card masks its
   ornaments through the .engrave helper instead - it wants them far
   stronger than shipped, on a broad pale card at whole-screen scale, and
   the helper is what makes the two tones tunable. Read its comment before
   reaching for either.) */
.shell__band {
  --win-size: 14px;
  font-size: var(--win-size);
  position: relative;
  margin: .8em .8em 0;
  min-height: 3.6em;
  padding: .5em 1.4em;
  gap: .7em;
  row-gap: .5em;
  flex-wrap: wrap;
  color: var(--ink);
  border-radius: .55em;
  overflow: hidden;                  /* the knots bleed off each end and are cut by it */
  background:
    var(--orn-head-knot-l) left -.6em center / auto 150% no-repeat,
    var(--orn-head-knot) right -.6em center / auto 150% no-repeat,
    linear-gradient(var(--parch), var(--parch) 78%, var(--parch-edge));
  box-shadow: var(--win-shadow), inset 0 0 0 3px var(--rim), inset 0 0 0 4px var(--rim-in);
}
/* Who is signed in, and what they hold: the one group that is about the
   player rather than about the game. The name is in the display face, the
   face this game keeps for names and for moments, and it is the only
   thing on the shelf allowed to be large. */
.shell__who { display: inline-flex; align-items: center; gap: .5em; min-width: 0; }
.shell__who > .ic { width: 1.4em; height: 1.4em; color: var(--ink); flex: none; }
.shell__who-name {
  font: var(--face-display-weight) 1.5em/1.1 var(--face-display);
  letter-spacing: .02em;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell__band .band__action { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
/* Three cells, the outer two equal, so the tab strip sits on the SCREEN's centre line rather
   than halfway between a wide name and a narrow purse. The band's own auto margins centred it
   between its neighbours, which put the strip left of centre by half the difference. */
.shell__band { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.shell__band .band__mid { margin: 0; justify-self: center; }
.shell__band .band__action { justify-self: end; }

/* --------------------------------------------------------- home: rank */

/* The characters, standing in a rank on the path. One row, centred, every
   card hung from a common top so every foot line lands on the same rule. */
.shell__vista {
  grid-area: 2 / 1;                  /* the middle band, between the account line and the verbs */
  display: grid;
  place-items: center;               /* the rank stands in the middle of the vista, both ways */
  overflow: auto;
  padding: 1.2em .8em 2em;
}
.shell__rank {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .8em;
  flex-wrap: wrap;
}
.shell__card {
  width: 12em;                       /* a head has to hold a twelve-letter nickname */
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: var(--cur-hand, pointer);
  transition: transform 120ms ease-out;
}
.shell__card:hover { transform: translateY(-.2em); }
/* The picked one is lifted and wears the window system's own tan selection
   ring; nothing about it is a second kind of highlight. */
.shell__card.is-picked { transform: translateY(-.45em); box-shadow: 0 0 0 .18em var(--tan), 0 .5em 1.2em rgba(var(--shadow-ink), .35); }
/* The nickname is the card's TITLE, in the head, with the head's own knot of
   engraving behind it. A window's head is padded to the 1.2em rhythm of a
   panel and sets its title at 1.3em; a card is 12em wide and a nickname can be
   twelve letters, so the padding comes in and the title down, and a name that
   still does not fit is cut with an ellipsis rather than allowed to push the
   rank apart. The head KEEPS its 3em height, because .win::before draws the
   shadow the head casts on the body at exactly that depth. */
.shell__card .win__head { padding: 0 .6em; justify-content: center; }
.shell__card .win__title { font-size: 1.05em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.shell__card .win__body { display: grid; gap: .35em; justify-items: center; }
/* An empty plinth has no head, so its body carries the height the doll and the
   head together carry on a card that is somebody. */
.shell__card--empty .win__body { min-height: 15.5em; align-content: center; }
.shell__plus { font-size: 3em; line-height: 1; color: var(--ink-faint); }
.shell__doll { margin-bottom: .2em; }
/* THE TAMERPASS RIBBON. A pass is worn by one character, so it is said on that character's card
   and nowhere else: a tan band laid across the top-right corner, the way a ribbon is pinned across
   the corner of a plaque, cut by the card's own edge on both ends. The card clips it; the picked
   card's ring is a box-shadow and is not clipped by the card's own overflow. */
.shell__card--pass { overflow: hidden; }
.shell__ribbon {
  position: absolute;
  top: 1.35em;
  right: -2.6em;
  z-index: 2;
  width: 10em;
  padding: .12em 0;
  transform: rotate(45deg);
  background: var(--tan);
  color: var(--tan-text);
  box-shadow: 0 .1em .35em rgba(var(--shadow-ink), .35);
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}
.shell__meta { display: flex; align-items: center; gap: .4em; color: var(--ink-mute); font-size: .9em; }

/* -------------------------------------------------------- home: verbs */

/* The verb row at the foot of the stage: Enter world on the centre line, Form
   party at the left edge, Delete at the right edge. The same three-cell grid the
   band above uses, so the primary sits under the tab strip, and the destructive
   verb is as far from it as the screen allows. */
.shell__verbs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.6em;
  padding: 0 1.6em 1.4em;
}
.shell__verbs-side { display: inline-flex; align-items: center; justify-self: start; }
.shell__verbs-side--end { justify-self: end; }

/* ------------------------------------------------------ home: sections */

/* A section, the forge and every dialog this screen raises open in the VISTA'S
   OWN CELL - the same grid area the rank stands in, so the account line above
   and the world line and the verbs below are never covered and never dimmed.
   This is not a modal: the bars behind it stay lit and stay clickable, and a
   section is left by the same tab strip that opened it.

   No wash behind it: the window stands straight on the vista. */
.shell__over {
  grid-area: 2 / 1;
  display: grid;
  place-items: center;
  gap: .8em;
  padding: .8em;
  overflow: auto;
}
.shell__over[hidden] { display: none; }
.shell__over .winset { display: flex; align-items: flex-start; gap: .8em; flex-wrap: wrap; justify-content: center; }
/* The forge is three pages side by side on a desk, not three tabs: a
   winset lays its pages out in a row here and each one keeps its own head.
   Below the fold they stack, which is what a phone gets. */
.shell__over .winset > .win { display: block; }

/* While anything stands in the over cell - a section, the forge, the account
   page - the rank, the download line and the verbs under it are gone, not
   dimmed: a plinth peering out from under the till read as a second thing to
   click. The over takes their rows as well, so a section is the whole height. */
.shell__stage--home.is-over .shell__vista,
.shell__stage--home.is-over .shell__world,
.shell__stage--home.is-over .shell__verbs { display: none; }
.shell__stage--home.is-over .shell__over { grid-area: 2 / 1 / 5 / 2; }

/* A SECTION IS THE WHOLE STAGE. Top Up, Economy, Market and Settings are
   screens, not dialogs: they fill the cell edge to edge instead of floating as
   a box of their own width in the middle of it.

   And a screen is read from further back than a window is. Every box in the
   game is drawn in em off --win-size, so ONE line here scales the whole
   section - type, padding, buttons, coins - rather than a font-size written
   onto six components. 14px against the 12px a window in the world wears. */
.shell__section {
  --win-size: 14px;
  width: 100%;
  height: 100%;
  overflow: hidden;                  /* the window itself never scrolls... */
}

/* THE READING COLUMN. A section is as wide as the screen; what is IN it is
   not. The body keeps the parchment edge to edge and lays ONE centred grid
   track on it, --section-col wide or the screen's own width if that is
   narrower, with a gutter either side that grows with the viewport - so a
   shelf of six rows sits in the middle of the page instead of hugging its left
   edge at whatever size it was drawn for a floating box. */
.shell__section > .win__body {
  --section-col: 46em;
  display: grid;
  grid-template-columns: min(var(--section-col), 100%);
  justify-content: center;
  align-content: start;
  gap: .7em;
  padding: 1.6em clamp(1.2em, 4vw, 4em) 1em;
  overflow: auto;                    /* the body is what scrolls */
  min-height: 0;
}
.shell__section--topup > .win__body { --section-col: 34em; }
.shell__section--account > .win__body { --section-col: 28em; }
.shell__section--economy > .win__body { --section-col: 52em; }
.shell__section--beta > .win__body { --section-col: 50em; }
.shell__section--market > .win__body { --section-col: 60em; }
.shell__section > .win__foot { padding: 0 clamp(1.2em, 4vw, 4em) 1.4em; }

/* Everything in a section body flows and WRAPS. A grid track is as wide as its
   widest child unless it is told otherwise, which is how a long tab strip used
   to push the whole window sideways and cut the last sentence in half. */
.shell__section > .win__body > * { min-width: 0; max-width: 100%; }
/* Economy and Market paint into an inner div they can replace wholesale; it is
   the column, so it stacks the same way the body would have. */
.shell__section > .win__body > [data-body] { display: grid; align-content: start; gap: .7em; min-width: 0; }
.shell__section .tabs { flex-wrap: wrap; max-width: 100%; height: auto; }
.shell__section .note-line { white-space: normal; }

/* ----------------------------------------------------------- narrow */

@media (max-width: 52em) {
  .shell__card { width: 9.5em; }
  .shell__card .doll-box { --doll-w: 6.5em; }
  /* The shelf goes back to a window's size here: on a phone the account name,
     four sections, a purse and a way out already have to wrap onto two rows,
     and 14px would make it three. */
  .shell__band { --win-size: 12px; padding: .45em .8em; }
  .shell__band .tabs { flex-wrap: wrap; height: auto; max-width: 100%; }
  .shell__who-name { font-size: 1.25em; }
}

/* ------------------------------------------------------ home: the world */

/* The pre-download strip, straight under the top bar: what is still coming
   onto this device, and the offer to install the game as an app. A `.band`
   and the shipped `.bar`, nothing of its own - but the bar takes the whole
   row between the label and the action, never a short chip of a meter. */
.shell__world {
  margin: .6em .8em 0;
  flex-wrap: nowrap;
  gap: .9em;
}
.shell__world[hidden] { display: none; }
.shell__world .band__label { white-space: nowrap; }
.shell__world .band__mid { flex: 1 1 auto; margin: 0; min-width: 0; }
.shell__world .band__mid .bar { width: 100%; }
.shell__world .band__action { flex: none; }