/*
 * The application shell: primary navigation and the frames the screens sit in.
 *
 * One set of navigation items, three shapes. The bar and the rail are never both on screen —
 * which one you get is decided here, by width, not by two components in the JavaScript.
 */

.shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.shell__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Navigation items ──────────────────────────────────────────────────────────────── */

.navitem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--text-2);
  text-decoration: none;
  font-weight: var(--fw-medium);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}

.navitem__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

/*
 * The current destination is marked three ways, not one: a filled pill behind its icon, a
 * heavier label, and the accent colour. Colour alone would leave it invisible to a coach who
 * cannot separate these two hues, and the pill is what carries it in greyscale.
 */
.navitem[aria-current="page"] {
  color: var(--accent);
  font-weight: var(--fw-bold);
}

.navitem[aria-current="page"] .navitem__icon {
  background: var(--accent-soft);
}

/* ── Phone: a bottom bar ───────────────────────────────────────────────────────────── */

.navbar {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  border-top: var(--border-width) solid var(--hairline);
  background: var(--surface);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .navbar {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  }
}

.navbar .navitem {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) var(--space-1) var(--space-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.navbar .navitem__icon {
  width: 56px;
  height: 30px;
}

.rail {
  display: none;
}

/* ── Tablet: a rail, so the field keeps the width ──────────────────────────────────── */

@media (min-width: 900px) {
  .shell {
    flex-direction: row;
  }

  .navbar {
    display: none;
  }

  .rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 88px;
    flex-shrink: 0;
    padding: calc(var(--safe-top) + var(--space-3)) var(--space-2) calc(var(--safe-bottom) + var(--space-3));
    padding-left: calc(var(--safe-left) + var(--space-2));
    border-right: var(--border-width) solid var(--hairline);
    background: var(--surface);
  }

  .rail .navitem {
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-md);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    text-align: center;
  }

  .rail .navitem__icon {
    width: 52px;
    height: 32px;
  }
}

/* ── Desktop: the rail expands, labels beside the icons ────────────────────────────── */

@media (min-width: 1280px) {
  .rail {
    width: 216px;
    padding-left: calc(var(--safe-left) + var(--space-3));
    padding-right: var(--space-3);
  }

  .rail .navitem {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: var(--control-h-lg);
    padding: 0 var(--space-3);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    text-align: left;
  }

  .rail .navitem__icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    background: none;
  }

  /* With labels beside icons there is room for the whole row to carry the state, which reads
     better than a pill around an icon that now has a word next to it. */
  .rail .navitem[aria-current="page"] {
    background: var(--accent-soft);
  }

  .rail .navitem[aria-current="page"] .navitem__icon {
    background: none;
  }
}

/*
 * The toast lifts clear of the bottom bar on a phone, and stops doing so once the bar is a rail.
 * Otherwise every confirmation floats 96px above the bottom of a desktop window for no reason.
 */
@media (min-width: 900px) {
  .toast-host {
    bottom: calc(var(--space-6) + var(--safe-bottom));
  }
}

/* ── Screen frames ─────────────────────────────────────────────────────────────────── */

/*
 * A content measure for library and detail screens. Cards stop growing at a width where a row
 * is still one glance; past that the screen centres rather than stretching, which is the
 * difference between using a 1600px display and treating it as a very large phone.
 */
.screen-body {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
}

.section-head:first-child {
  margin-top: 0;
}

/* The display role, because every call site used the `--sm` modifier that replaced every one
   of the title declarations this used to carry — a base rule that existed only to be undone. */
.section-head__title {
  color: var(--text-3);
}

.section-head--compact {
  margin: var(--space-4) 0 var(--space-1);
}

.section-head__action {
  flex-shrink: 0;
  font-size: var(--fs-secondary);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  background: none;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
}

/* ── Home ──────────────────────────────────────────────────────────────────────────── */

/*
 * CONTINUE — a diagram with a caption, not a card with a thumbnail.
 *
 * It used to be a bordered, rounded, shadowed rectangle holding a 136px well holding a canvas:
 * three nested surfaces around the one picture on the screen, drawn at the same weight as the
 * four verb boxes underneath it, so the fourth-priority block on Home was physically bigger
 * than the first. What is left is the diagram at full width and the play's name at screen size.
 * A play is a real object and could legally keep a boundary — it does not need one, because a
 * football diagram already has an edge of its own and nothing else on Home is anywhere near
 * this big.
 */
.continue-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.continue-card:active {
  opacity: 0.7;
}

/* A field thumbnail draws itself at the size its box actually has (components/fieldThumb.js),
   so the box only has to say how big that is. */
.field-thumb {
  display: block;
  width: 100%;
  background: var(--surface-sunken);
  overflow: hidden;
}

.field-thumb canvas {
  display: block;
}

.continue-card__thumb {
  width: 100%;
  border-radius: var(--radius-lg);
}

.continue-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The screen-title role, finally used on the screen it was written for: Home had no typographic
   anchor at all, and its largest text was the same 20px as every section heading on it. */
.continue-card__title {
  font-size: var(--fs-screen);
  line-height: var(--lh-screen);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* "Play · Bobcat Gray · 2 days ago" — one quiet line. The playbook's name used to be a filled
   pill, which is a tag shape carrying a proper noun, and "PLAY" used to be an accent small-caps
   eyebrow above the title, which is a permanent label shouting a word the meta line can say. */
.continue-card__meta {
  color: var(--text-2);
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Once there is width for it the diagram sits beside its caption rather than above: a 1040px
   preview at 16:9 would be 585px tall and push everything else off the screen. */
@media (min-width: 700px) {
  .continue-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .continue-card__thumb {
    flex: 0 0 46%;
    width: 46%;
  }

  .continue-card__body {
    flex: 1;
  }
}

/*
 * QUICK ACTIONS — four verbs, as rows.
 *
 * They were four boxes with a tinted tile behind each icon: a card treatment and a nested
 * surface, for four things a coach does occasionally and can reach from at least one other
 * screen apiece. A verb is not an object. They are the last block on the page now, which is
 * where the fourth priority belongs.
 */
.quick-grid {
  display: flex;
  flex-direction: column;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% + var(--space-2) * 2);
  min-height: var(--control-h-lg);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-standard);
}

.quick-action + .quick-action {
  border-top: var(--border-width) solid var(--hairline);
  border-radius: 0;
}

.quick-action:active {
  background: var(--surface-hover);
}

.quick-action__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The icon is the icon. The 34px accent-soft tile behind it was a nested tinted surface whose
   only job was to be a background for a 20px mark. */
.quick-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

/* The playbook a Share / Print tap would land on, stated rather than guessed at silently. */
.quick-action__value {
  flex-shrink: 0;
  color: var(--text-2);
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  font-weight: var(--fw-regular);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Playbook cards ────────────────────────────────────────────────────────────────── */

/*
 * A playbook in the library: a row, divided from the next one by a rule.
 *
 * A Playbook is a real object and could carry a boundary — it does not need a permanent one.
 * The row had a surface, a hairline, an 18px radius, `overflow: hidden` and a 4px spine in the
 * team's colour, which turned a name and four small facts into a dashboard tile, drawn four to
 * eight times down a 1040px column with several hundred pixels of empty surface between the
 * name and the chevron that opens it. That is the giant-horizontal-card complaint, literally.
 *
 * The team's colour is still on the row at full strength: it is the crest. Drawing it twice,
 * twelve pixels apart, was the spine's own argument used against itself.
 */
/* A divided list has no gap between its rows: the rule between them is the separation. */
.pb-list {
  display: flex;
  flex-direction: column;
}

/* Scoped to the rows, so the empty state appended into the same element never picks up a stray
   rule above it. */
.pb-list > .pb-card + .pb-card {
  border-top: var(--border-width) solid var(--hairline);
}

.pb-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
}

.pb-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  text-align: left;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-standard);
}

.pb-card__main:active {
  background: var(--surface-hover);
}

.pb-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* One fact per line, and one line per fact. It used to be four lines in four sizes with two
   pixels between them — a format pill, the team name, the counts, the edited time and the sync
   state — so no line owned the row and a shared playbook printed its timestamp twice. */
/* The sharing line: access level, then either the sync state or a conflict badge. Middots come
   from the layout so each part can be a plain span. */
.sync-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-3);
  min-width: 0;
}

.sync-line > span:not(.tag) + span:not(.tag)::before {
  content: "· ";
}

.pb-card__meta {
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * A playbook on Home: a row, not a 148px chip in a horizontal scroller.
 *
 * The scroller was the reason these had to be boxes, and with one or two playbooks it was a
 * scroller with nothing to scroll and a lone card marooned against a 1040px measure. A row
 * carries more than the chip did — crest, name, how many plays, a chevron — in a third of the
 * height, and the team's crest states the colour at full strength, so the 3px accent cap that
 * said the same thing a second time is gone.
 */
.team-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% + var(--space-2) * 2);
  min-height: var(--control-h-lg);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-standard);
}

.team-card + .team-card {
  border-top: var(--border-width) solid var(--hairline);
  border-radius: 0;
}

.team-card:active {
  background: var(--surface-hover);
}

.team-card__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card__meta {
  flex-shrink: 0;
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recent plays: the diagram is the label. A play is recognised by its shape long before its
   name is read — so what is drawn is the shape, with a caption under it. The hairline box that
   used to surround each one was a boundary drawn around a picture that already has an edge. */
.play-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-3);
}

@media (min-width: 700px) {
  .play-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.play-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.play-chip:active {
  opacity: 0.7;
}

.play-chip__thumb {
  border-radius: var(--radius-md);
}

.play-chip__name {
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Document grid (plays, formations) ──────────────────────────────────────────────
   A play is recognised by its shape long before its name is read, so the browse view is
   diagrams with captions rather than a list of names with a thumbnail stuck on the front.
   Two up on a phone, more as the window allows. */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .doc-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/*
 * A play or a formation: one of the few things in this app that has genuinely earned a card.
 * It is a real object, the diagram is the content, and the boundary is what makes a grid of
 * them read as a grid of documents.
 *
 * What it does NOT need is three more edges on top of that one: a hairline under the thumbnail
 * where the diagram's own backing already changes tone, a bordered and shadowed plate around
 * the ⋯, and a tinted pill around the word OFF in every caption. Six cards on a phone carried
 * eighteen extra treatments on top of six earned ones.
 */
.doc-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: var(--border-width) solid var(--hairline);
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-standard);
}

.doc-card:active {
  background: var(--surface-hover);
}

.doc-card__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  color: var(--text);
}

.doc-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Two lines before it gives up. On a 150px card most play names do not fit on one, and
   "Trips Right …" is a worse caption than the name over two lines. */
.doc-card__title {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Wraps rather than squeezing. On a 150px card the OFF + DEF tag and "12 players" do not fit
   on one line, and a clipped tag reads as a different tag — "OFF + D" is not a thing. */
.doc-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-2);
  min-width: 0;
}

.doc-card__meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* A tag keeps its whole word: it is the label, not the overflow. */
.doc-card__meta > .tag {
  flex-shrink: 0;
}

/* The row actions float in the diagram's top corner rather than taking a column of their own,
   which on a 150px card is the difference between a diagram and a diagram with a margin. Over
   the caption they collided with it the moment the metadata wrapped; over the field they never
   can. They carry the field-overlay surface for the same reason the zoom buttons do — the turf
   underneath them has its own theme. */
.doc-card__more {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--field-overlay);
  color: var(--text-2);
}

/* The scroller already has its own top padding; this only separates the first group from the
   tab underline. */
.tab-body {
  padding-top: var(--space-1);
}