/*
 * The family portal. Scoped under .sikai-parent (layouts/parents.html.erb's
 * body class) because `stylesheet_link_tag :app` expands to every file in
 * this directory -- see spec/assets/stylesheet_isolation_spec.rb.
 *
 * The design draws this surface at 520px on a page-grey field. Unlike the
 * platform shell, it really is a centred column: a parent opens it on a phone
 * and there is nothing on any of these screens that wants more width. That
 * last part still holds -- the column only grows to 620px on a laptop, and
 * nothing here goes multi-column -- but the *panel* does not: see the
 * "Wider viewports" block at the foot of this file.
 */

.sikai-parent {
  margin: 0;
  background: var(--sk-page);
  font-family: var(--sk-font-ui);
  color: var(--sk-ink);
  -webkit-font-smoothing: antialiased;

  /* The one width the header bar and the screen under it both line up on,
     and the gutter it is inset by -- the same arrangement --sk-column has
     on the platform shell and --s-column has on the child app. */
  --p-column: 520px;
  --p-gutter: 18px;
}

/* Nothing here set this, and .p-btn--wide is `width: 100%` plus 18px of
   horizontal padding inside .p-main's own 18px padding -- so under
   content-box every full-width button on the surface ("Already at a school?
   Link them", "Buy credits", every submit) overflowed the shell by 18px on
   each side and sat visibly wider than the cards above it. */
.sikai-parent,
.sikai-parent * {
  box-sizing: border-box;
}

.sikai-parent .p-shell {
  max-width: var(--p-column);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--sk-surface);
  display: flex;
  flex-direction: column;
}

.sikai-parent .p-hdr {
  border-bottom: 1px solid var(--sk-fill-3);
}

/* The lockup sits first, then the account. The header is light, so the mark
   goes on it directly. */
.sikai-parent .p-hdr__brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
}

.sikai-parent .p-hdr__mark {
  width: 27px;
  height: 22px;
  background: url("/assets/sikai-mark-64ad84a4.png") center / contain no-repeat;
}

.sikai-parent .p-hdr__word {
  height: 16px;
  width: auto;
  display: block;
}

.sikai-parent .p-hdr__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--p-column);
  margin: 0 auto;
  padding: 16px var(--p-gutter);
}

.sikai-parent .p-hdr__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--sk-fill-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--sk-text-2);
}

.sikai-parent .p-hdr__group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sikai-parent .p-hdr__eyebrow {
  font-size: 11.5px;
  color: var(--sk-text-muted);
}

.sikai-parent .p-hdr__name {
  font-weight: 700;
  font-size: 16px;
}

.sikai-parent .p-hdr__signout button,
.sikai-parent .p-hdr__signout {
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--sk-fill-4);
  background: var(--sk-surface);
  color: var(--sk-text-2);
  font-family: var(--sk-font-ui);
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}

.sikai-parent .p-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--p-column);
  margin: 0 auto;
  padding: var(--p-gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* flash.css caps its container at 1024px for the whole product. Inside the
   520px shell that never showed; once the shell stops being a panel at 720px
   it would, and an "incorrect PIN" banner would run wider than the card it
   is about. Same rule, same reason, in student.css. */
.sikai-parent .flash-container {
  max-width: var(--p-column);
  padding-inline: var(--p-gutter);
}

.sikai-parent .p-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-fill-3);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* What the mono used to do for free.
 *
 * This surface used IBM Plex Mono for every figure, and a monospace holds a
 * column of numbers in line by construction. Manrope's numerals are
 * proportional -- its "1" is 716 units against a "6" at 1240 -- so a wallet
 * balance, a streak count or a column of XP tiles goes ragged the moment the
 * digits differ, and a number that CHANGES in place visibly jumps.
 *
 * Manrope ships `tnum`, so asking for it costs nothing and fixes all of
 * them. Listed explicitly rather than set on .sikai-parent: tabular figures
 * are right for a column of numbers and wrong in running prose, where they
 * leave a gap around every "grade 3" and "2 topics finished". */
.sikai-parent .p-tile__n,
.sikai-parent .p-wallet__n,
.sikai-parent .p-kid__streak,
.sikai-parent .p-kid__meta,
.sikai-parent .p-badge__when,
.sikai-parent .p-cred__value,
.sikai-parent .p-input--mono {
  font-variant-numeric: tabular-nums;
}

.sikai-parent .p-eyebrow {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

.sikai-parent .p-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sk-text-2);
  margin: 0;
}

.sikai-parent .p-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sikai-parent .p-label__text {
  font-weight: 600;
  font-size: 11px;
  color: var(--sk-text-2);
}

.sikai-parent .p-input {
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--sk-fill-4);
  background: var(--sk-fill-1);
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--sk-ink);
}

.sikai-parent .p-input--mono {
  font-family: var(--sk-font-ui);
}

.sikai-parent .p-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Some of these are <a>, and application.css styles bare `a` with no scope
   at all -- so "Already at a school? Link them" and "Buy credits" rendered
   as underlined text inside a button. A button is not a link; the shape
   already says it is pressable. (.p-add and .p-back__link say the same
   thing for themselves further down.) */
.sikai-parent .p-btn,
.sikai-parent .p-btn:hover {
  text-decoration: none;
}

.sikai-parent .p-btn {
  padding: 13px 18px;
  border-radius: 13px;
  border: none;
  background: var(--sk-fill-2);
  color: var(--sk-ink);
  font-family: var(--sk-font-ui);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.sikai-parent .p-btn--primary {
  background: var(--sk-accent);
  color: var(--sk-surface);
}

.sikai-parent .p-btn--wide {
  width: 100%;
}

/* The sign-in column, capped to the width the other two doors use.

   This filled the portal's whole column -- 892px on a laptop against the
   430px of .sk-signin__card on /sign_in and /sa/sign-in -- so the same act
   looked like two different products depending on who you were. The card
   grammar stays the parent portal's own (this is the front door to that
   surface, not to the staff one); only the measure changes. */
.sikai-parent .p-signin {
  padding: 40px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}

/* Same shape and size as .sk-portal-tag on the staff and platform doors, in
   this surface's own tokens -- the three tags are one idea, so they are one
   size and one weight. */
.sikai-parent .p-portal-tag {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sk-fill-3);
  color: var(--sk-text-2);
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 9px;
}

.sikai-parent .p-signin__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sikai-parent .p-signin__mark {
  /* 32x26 -- the mark's own 119:96, not a square. See landing.css. */
  width: 32px;
  height: 26px;
  display: block;
  /* The mark itself, not a coloured square standing in for it. The square
     was a placeholder from the imported design file; this is
     app/assets/images/sikai-mark.png, the seedling in the open book,
     cropped tight out of the 512 icon and quantized to 2 KB. Kept as a
     background rather than an <img> so the element, its size and its
     aria-hidden all stay exactly as they were. */
  background: url("/assets/sikai-mark-64ad84a4.png") center / contain no-repeat;
}

/* An <img> now, not a word: these classes size the drawn wordmark instead
   of setting type. Height only, width auto, so the asset keeps its own
   proportions at whatever height each surface wants. */
.sikai-parent .p-signin__wordmark {
  height: 21px;
  width: auto;
  display: block;
}

.sikai-parent .p-signin__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.sikai-parent .p-signin__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sk-text-muted);
}

.sikai-parent .p-back__link {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--sk-text-2);
  text-decoration: none;
}

/* The child header at the top of the detail card: initial, name, the
   school/family tag and the streak pill. Not part of Task 11's design step --
   the family home screen these are visually borrowed from (Task 10) shipped
   its backend only, so these rules exist here first. */
.sikai-parent .p-kid__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sikai-parent .p-kid__initial {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 13px;
  background: var(--sk-accent-subtle);
  color: var(--sk-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sikai-parent .p-kid__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sikai-parent .p-kid__namerow {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sikai-parent .p-kid__name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--sk-ink);
}

.sikai-parent .p-kid__meta {
  font-family: var(--sk-font-ui);
  font-size: 11.5px;
  color: var(--sk-text-muted);
}

/* "Change class", inline in the meta line beside the grade it changes.
   Inherits the meta line's mono face and size rather than restating them, so
   it sits in the row as one more fact rather than as a button dropped into
   it -- but underlined and in the accent, because it is the one thing on that
   line a parent can act on and muted text that happens to be a link reads as
   neither. Without a rule of its own it rendered as a default browser link:
   blue, 16px serif, breaking the row. */
.sikai-parent .p-kid__change {
  color: var(--sk-accent);
  text-decoration: underline;
}

.sikai-parent .p-kid__streak {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sk-ink);
  color: var(--sk-surface);
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 11.5px;
}

.sikai-parent .p-tag {
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Task 10/11 disagreed on which of these reads as "at school" versus "family
   only" -- sa/parents/show.html.erb already ships sk-badge--live (green) for
   SCHOOL and sk-badge--trial for FAMILY, so the same child has to read the
   same way here as on the platform screen. This matches that, not what
   shipped first. */
.sikai-parent .p-tag--school {
  background: var(--sk-success-tint);
  color: var(--sk-success);
}

.sikai-parent .p-tag--family {
  background: var(--sk-accent-subtle);
  color: var(--sk-accent);
}

.sikai-parent .p-tiles {
  display: flex;
  gap: 8px;
}

.sikai-parent .p-tile {
  flex: 1;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--sk-fill-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sikai-parent .p-tile__n {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--sk-ink);
}

.sikai-parent .p-tile__l {
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

.sikai-parent .p-card__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--sk-ink);
  margin: 0;
}

.sikai-parent .p-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sikai-parent .p-badge {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--sk-fill-1);
}

.sikai-parent .p-badge__name {
  font-weight: 600;
  font-size: 13px;
}

.sikai-parent .p-badge__when {
  font-family: var(--sk-font-ui);
  font-size: 10.5px;
  color: var(--sk-text-muted);
}

.sikai-parent .p-cred {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sikai-parent .p-cred__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--sk-fill-1);
}

.sikai-parent .p-cred__label {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

.sikai-parent .p-cred__value {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--sk-ink);
}

/* Task 10: the family home screen. p-kid__*, p-tag*, p-tiles, p-tile*, and
   p-card__title are already declared above -- Task 11 shipped the child
   detail card first and needed the same classes -- so only what that block
   did not already provide is added here. */
.sikai-parent .p-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.sikai-parent .p-note--quiet {
  color: var(--sk-text-muted);
  font-size: 12px;
}

.sikai-parent .p-kid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--sk-fill-3);
  border-radius: 18px;
  background: var(--sk-surface);
  color: inherit;
  text-decoration: none;
}

.sikai-parent .p-kid:hover {
  border-color: var(--sk-accent);
}

.sikai-parent .p-add {
  display: block;
  padding: 16px;
  border-radius: 18px;
  border: 1.5px dashed var(--sk-fill-5);
  background: transparent;
  color: var(--sk-ink);
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
}

.sikai-parent .p-add:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}

/* Task 12 (buy credits): the wallet block, the pack picker and a generic
   row for anything that is a name/meta pair with a value at the end --
   history entries, outstanding invoices, recorded payments. p-copyrow and
   p-tag--behind are new here; the brief that shipped the views for this
   task named them but did not style them. */
.sikai-parent .p-wallet {
  background: var(--sk-ink);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sikai-parent .p-eyebrow--onDark {
  color: var(--sk-fill-5);
}

.sikai-parent .p-wallet__n {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--sk-surface);
}

.sikai-parent .p-wallet__l {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--sk-fill-5);
  margin-bottom: 6px;
}

.sikai-parent .p-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 15px;
  background: var(--sk-fill-1);
  cursor: pointer;
}

.sikai-parent .p-pick__input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--sk-accent);
}

.sikai-parent .p-copyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--sk-fill-1);
  color: inherit;
  text-decoration: none;
}

.sikai-parent .p-copyrow__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sikai-parent .p-copyrow__name {
  font-weight: 700;
  font-size: 13px;
  color: var(--sk-ink);
}

.sikai-parent .p-tag--behind {
  background: var(--sk-warning-tint);
  color: var(--sk-warning);
}

/* ---- Wider viewports ----------------------------------------------------
   On a phone the white shell IS the screen, so it stays exactly as it was.
   From 720px up it stops being one: the panel steps back to let the page
   grey show, the header becomes a full-bleed white bar with its contents on
   the column, and the cards -- which were white-on-white and read as a flat
   list -- land on grey and become cards. Nothing restructures here.

   This block used to add "and nothing goes multi-column; a parent screen is
   a short list of children and a wallet, and it does not want two columns at
   any width". That was true of the screen it described. The home screen now
   carries a day strip per child, an activity feed, the wallet and the
   account, and the two-column rule at the bottom of this file is where that
   change is argued -- 720px stays single-column regardless.

   720px rather than 768px: the shell is 520px plus its own margins, so it
   has already run out of page before a portrait tablet does. */
@media (min-width: 720px) {
  .sikai-parent {
    --p-column: 620px;
    --p-gutter: 24px;
  }

  /* The panel becomes the page. min-height stays on it rather than moving
     to <body> so a short screen (sign-in, "child added") still paints grey
     all the way down instead of ending in a white ledge. */
  .sikai-parent .p-shell {
    max-width: none;
    background: transparent;
  }

  .sikai-parent .p-hdr {
    background: var(--sk-surface);
  }

  .sikai-parent .p-main {
    padding: 28px var(--p-gutter) 48px;
    gap: 16px;
  }

  /* --sk-fill-2 on --sk-page is a 3-value difference: invisible. Inside the
     white shell this button read fine, and on grey it disappeared, so it
     takes the surface it lost. Only the secondary one -- p-btn--primary is
     accent-filled and needs nothing. */
  .sikai-parent .p-btn:not(.p-btn--primary) {
    background: var(--sk-surface);
    border: 1px solid var(--sk-fill-4);
  }

  /* The one screen with no header bar. Its own 40px 18px sits inside
     .p-main's padding and doubles it, which is what kept the column off the
     gutter on a phone -- on a laptop it is one card on an empty page, so it
     hands the spacing back and lets the column carry it. */
  .sikai-parent .p-signin {
    padding: 0;
  }

  /* And, having nothing above it, it centres in the page rather than
     hanging off the top edge. On .p-main because that is the element with
     the height to centre in (`flex: 1` against the shell's 100vh); the
     :has() clause is what keeps every other screen top-aligned, where a
     list of children that grows downward belongs. */
  .sikai-parent .p-main:has(.p-signin) {
    justify-content: center;
    padding-block: 28px;
  }
}

/* ===========================================================================
   THE DAY VIEW

   The home screen used to lead with lifetime totals -- XP, accuracy, topics.
   Those answer "how are they doing", which is a question a parent asks
   occasionally; the one they arrive with, most evenings, is "has my child
   been on today". These are the parts that answer it.
   =========================================================================== */

/* Seven days, oldest to newest, ending today. Squares rather than dots: at
   8px a circle on a low-density Android screen loses its shape, and the row
   has to be readable at a glance or it is decoration. */
.sikai-parent .p-week {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.sikai-parent .p-week__day {
  width: 8px;
  height: 18px;
  border-radius: 3px;
  background: var(--sk-fill-4);
}

.sikai-parent .p-week__day--on {
  background: var(--sk-accent);
}

/* The one line the screen exists to say, so it is a line and not a tile:
   "Practised today" is a sentence a parent reads, where a number in a box is
   something they have to interpret. */
.sikai-parent .p-standing {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sk-text-2);
}

/* Green only for the state that earned it. A child who has not been on today
   is not a failure -- most days a parent looks, the answer will be "not yet",
   and colouring that amber or red would turn a normal Tuesday into an alert. */
.sikai-parent .p-standing--on {
  color: var(--sk-success);
}

.sikai-parent .p-standing--new {
  color: var(--sk-text-muted);
}

/* ---- The feed ----------------------------------------------------------
   Finished topics and earned badges. Never an answer -- see
   Progress::RecentEvents for why that is a boundary rather than a first cut. */
.sikai-parent .p-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sikai-parent .p-feed__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Two kinds, two marks, no icon font. A badge is the thing worth spotting in
   a column of finished topics, so it is the one that gets the gold. */
.sikai-parent .p-feed__mark {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--sk-fill-5);
  flex-shrink: 0;
}

.sikai-parent .p-feed__mark--topic {
  background: var(--sk-accent);
}

.sikai-parent .p-feed__mark--badge {
  background: var(--sk-gold);
}

.sikai-parent .p-feed__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sikai-parent .p-feed__what {
  font-size: 14px;
  line-height: 1.45;
  color: var(--sk-ink);
}

/* --sk-text-2, not --sk-text-muted. Muted is #9A9EA6, which measures 2.7:1
   on white -- fine for a decorative label, under the 4.5:1 floor for 12px
   text that a parent is actually meant to read, and this is read on a cheap
   phone in whatever light the room has. */
.sikai-parent .p-feed__when {
  font-size: 12px;
  color: var(--sk-text-2);
}

/* ---- The wallet --------------------------------------------------------
   Its own block, and that is the whole point of it. It used to render
   through .p-kid -- the child component -- so it had an avatar circle, a
   name row and a big number in exactly the places a child's card has them,
   and a parent scanning the page saw a second child called "AI tutor
   credits". */
.sikai-parent .p-wallet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--sk-fill-3);
  border-radius: 18px;
  background: var(--sk-fill-1);
  color: inherit;
  text-decoration: none;
}

.sikai-parent .p-wallet:hover {
  border-color: var(--sk-accent);
}

.sikai-parent .p-wallet__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Same reasoning as .p-feed__when: 11px uppercase at 2.5:1 is a label you
     squint at. */
  color: var(--sk-text-2);
}

.sikai-parent .p-wallet__n {
  font-family: var(--sk-font-ui);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--sk-ink);
}

.sikai-parent .p-wallet__meta {
  font-size: 13px;
  color: var(--sk-text-2);
}

.sikai-parent .p-eyebrow--quiet {
  color: var(--sk-text-2);
  font-weight: 500;
}

/* ---- The layout --------------------------------------------------------
   One column by default. .p-layout__side simply follows .p-layout__main, so
   a phone reads children, then feed, then wallet, then account -- which is
   the order of importance and needs no reordering. */
.sikai-parent .p-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sikai-parent .p-layout__main,
.sikai-parent .p-layout__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Two columns from 900px.

   This reverses what the 720px block above says -- "nothing goes
   multi-column; a parent screen is a short list of children and a wallet,
   and it does not want two columns at any width" -- and that was true of the
   screen it was written for: five stacked items, of which one was a child.
   The screen now carries the children, a day strip each, an activity feed,
   the wallet and the account, and a single 620px column left 410px of empty
   page down either side of a laptop while squeezing the feed. The rule was
   about the content, and the content changed.

   900px, not the 720px used above: two columns need room for a 560px main
   and a 300px side before either starts to look like a leftover. */
@media (min-width: 900px) {
  .sikai-parent {
    --p-column: 940px;
  }

  .sikai-parent .p-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 20px;
  }
}

/* The logo in the sign-in brand row is a link to the landing page now. */
.sikai-parent .p-signin__home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.sikai-parent .p-signin__home:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 4px;
  border-radius: 8px;
}