#widgets-wrap {
  display: grid;
  grid-template-columns: minmax(0, 28rem) 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: start;
}

#widgets-wrap > .information-widget-greeting {
  grid-column: 1;
  grid-row: 2;
}

#widgets-wrap > #information-widgets-right {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 28rem) 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: start;
}

#information-widgets-right .information-widget-search {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 28rem;
}

#information-widgets-right .information-widget-search .h-8 {
  margin-top: 0;
  margin-bottom: 0;
}

#information-widgets-right > :not(.information-widget-search) {
  grid-column: 2;
  justify-self: end;
}

#bottom-resources {
  width: min(100%, 44rem);
  align-self: center;
  margin: 1.5rem auto 0 auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

#bottom-resources > .flex.flex-row.self-center.flex-wrap.justify-between {
  justify-content: center;
  gap: 1rem;
}

#bottom-resources .text-xs {
  text-align: center;
  margin-left: 0;
}


/* ===== Theme: Aurora — appended below the layout rules above ===== */
/* Ported from the Jellyfin "Aurora" flavour: a near-black blue-shifted page, a
   soft blue wash that is brightest along the top, interaction states that tint
   blue instead of white, slightly softer corners, and #00a4dc left untouched.
   Every override hangs off html[class] — specificity (0,1,1) — so it outranks
   the app's own .theme-slate / .dark (0,1,0), which load AFTER this file. */

/* --- Palette: the whole ramp pulled a few degrees toward #00a4dc ---------- */
/* Space-separated RGB triples, as Homepage expects.
   800 = Aurora's background-default #0c1014 and drives --bg-color
   700 = Aurora's paper, lifted from #161d24 to #1c2630: at Jellyfin's exact
         value an elevated surface sat only 1.12:1 above the page (slate managed
         1.41:1) and bg-theme-700 chrome lost its edge. Jellyfin compensates
         with card borders that Homepage does not draw. 1.25:1 restores the step.
   600 = lifted likewise, to soften a 4.1x luminance cliff between 500 and 600.
   900 = deepest tone, used for shadows and the scrollbar track */
html[class] {
  --color-50:  236 246 252;
  --color-100: 217 238 249;
  --color-200: 190 225 243;   /* card/body text — 12.8:1 on a card, 10.6:1 under the wash */
  --color-300: 152 202 227;   /* 10.0:1 / 8.3:1 on the same two surfaces */
  --color-400: 108 165 197;   /* quiet text and hairlines — worst measured case 4.94:1 */
  --color-500: 74 124 156;    /* surfaces only: as text this is 3.2:1 and fails */
  --color-600: 46 66 84;
  --color-700: 28 38 48;
  --color-800: 12 16 20;
  --color-900: 6 10 14;

  --color-logo-start: 79 198 238;   /* #4fc6ee — Aurora primary-light */
  --color-logo-stop:  0 121 168;    /* #0079a8 — Aurora primary-dark  */

  /* These two are rgb() FUNCTIONS, not triples. The thumb is deliberately an
     accent literal rather than a ramp step, so it does not follow ramp edits. */
  --scrollbar-thumb: rgb(0 121 168);   /* 4.07:1 against the track */
  --scrollbar-track: rgb(var(--color-900));
}

/* --- The aurora itself: blue poured over the page, brightest at the top --- */
/* The sizes are absolute on purpose. background-attachment:fixed is not honoured
   on the propagated canvas background in mobile Safari; it degrades to scroll,
   and with auto sizing the 80%-tall ellipse would then be measured against the
   whole seven-group document and flatten into a uniform haze. Pinning the layers
   to 52rem and 36rem keeps a real top band and bottom glow on that path too. */
html[class] body {
  background-color: rgb(var(--color-800));
  background-image:
    radial-gradient(130% 80% at 50% 0%, rgba(0, 164, 220, .13) 0%, rgba(0, 164, 220, .045) 38%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(90% 60% at 88% 100%, rgba(79, 198, 238, .09) 0%, rgba(0, 0, 0, 0) 62%);
  background-size: 100% 52rem, 100% 36rem;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* The wrapper paints --bg-color flat over the body; clearing it lets the wash
   through, and changes nothing where it was already transparent. */
html[class] #page_wrapper { background-color: transparent; }

/* Aurora's header gradient, landing on Homepage's only piece of top chrome.
   Colour only — the widget grid geometry set above is left alone.
   Held at .12: this layer stacks on the body wash along the shared top edge,
   and at .16 the combined band pushed --color-400 text down to 4.68:1. */
html[class] #information-widgets {
  background-image:
    radial-gradient(120% 120% at 8% 0%, rgba(0, 164, 220, .12) 0%, rgba(0, 121, 168, .055) 40%, rgba(0, 0, 0, 0) 72%);
}

/* --- Service cards: tinted glass in place of literal white alpha ---------- */
/* .service-card ships dark:bg-white/5 (0,2,0) and dark:hover:bg-white/10
   (0,3,0). html[class] .service-card is (0,2,1) and its :hover form (0,3,1),
   so both win without !important. The ring is an inset shadow rather than a
   border, so 40 cards gain a hairline without a single pixel of reflow. */
html[class] .service-card {
  background-color: rgba(79, 198, 238, .055);
  border-radius: 8px;                   /* Aurora's card radius, 0.45em ~= 7px */
  box-shadow:
    inset 0 0 0 1px rgba(0, 164, 220, .14),
    0 2px 8px rgb(var(--color-900) / .45);
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* The card glow, straight off Aurora's poster hover. Decoration, not an
   affordance — the keyboard ring below is the affordance. */
html[class] .service-card:hover {
  background-color: rgba(79, 198, 238, .10);
  box-shadow:
    inset 0 0 0 1px rgba(0, 164, 220, .38),
    0 6px 22px rgba(0, 164, 220, .20);
}

/* --- Bottom strip: re-tint the one stale literal in the layout block ------ */
/* That rule hard-codes rgba(148,163,184,.35) — slate-400, which read 1.89:1
   against its page. Colour only, so its width, margin and padding stay exactly
   as they are; .40 rather than .28 keeps the hairline at the same weight. */
html[class] #bottom-resources { border-top-color: rgba(0, 164, 220, .40); }

/* --- Fields, focus, selection: the same blue light source ----------------- */
/* The edge is an inset ring, not border-color. Tailwind's preflight sets
   border-width:0 on every element, so a bare border-color would have painted
   nothing; border-color:transparent only neutralises a stray preflight grey if
   the input does carry a border utility. Neither declaration can reflow. */
html[class] .information-widget-search input,
html[class] .information-widget-form input {
  background-color: rgba(79, 198, 238, .10);   /* Aurora's FilledInput tint, 1.22:1 above the page */
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 164, 220, .35);
  color: rgb(var(--color-100));
}

html[class] .information-widget-search input::placeholder,
html[class] .information-widget-form input::placeholder {
  color: rgb(var(--color-400));   /* 4.94:1 on the field fill */
}

html[class] .information-widget-search input:focus,
html[class] .information-widget-form input:focus {
  box-shadow:
    inset 0 0 0 1px rgb(0 164 220),
    0 0 14px rgba(0, 164, 220, .30);
}

/* Keyboard focus stays loud — the glow is decoration, this is the affordance.
   Solid accent, not 65% alpha: over the header band the translucent ring
   measured 2.86:1, under the 3:1 floor for a focus indicator. Solid is 4.71:1
   at its worst and is exactly the #00a4dc the flavour is built on. */
html[class] a:focus-visible,
html[class] button:focus-visible,
html[class] input:focus-visible {
  outline: 2px solid rgb(0 164 220);
  outline-offset: 2px;
}

html[class] ::selection {
  background-color: rgba(0, 164, 220, .35);
  color: rgb(var(--color-50));
}