/* Ocean theme; the background itself is set in settings.yaml.
   No !important anywhere — homepage ships Tailwind v4, whose utilities live in
   a cascade layer, so unlayered rules already win. */

/* Glass tiles: cards, bookmarks and stat boxes share one material. A deep-sea
   tint rather than neutral slate, so the glass picks the water up instead of
   greying it out. */
.service-card,
.bookmark a,
.widget-container {
  background-color: rgba(6, 34, 46, 0.55);
  border: 1px solid rgba(186, 240, 232, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* No box-shadow: nested backdrop-filters inside homepage's overflow-auto
     wrapper composite it as a hard dark rectangle. The border carries the
     separation instead. */
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Hover lifts toward shallow water and picks up a turquoise rim — the same move
   as the cabynet board's sky-blue accent, shifted into the lagoon palette. */
.service-card:hover,
.bookmark a:hover {
  background-color: rgba(13, 63, 82, 0.70);
  border-color: rgba(94, 234, 212, 0.38);
  transform: translateY(-2px);
}

/* Header: clock left over two rows, weather right, then one box per stat.
   #widgets-wrap holds homepage's stat boxes, a wrapper with the clock and
   weather, and the MEM/ZFS tiles custom.js appends. */
#widgets-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

/* display:contents promotes the clock and weather out of that wrapper so they
   can be placed on the grid directly. Matched by content, not position:
   custom.js appends tiles, which would otherwise steal :last-child. */
#widgets-wrap > div:has(.information-widget-datetime) {
  display: contents;
}

.information-widget-datetime:nth-of-type(1) { grid-area: 1 / 1 / 2 / 3; }
.information-widget-datetime:nth-of-type(2) { grid-area: 2 / 1 / 3 / 3; }
.information-widget-openmeteo { grid-area: 1 / 3 / 3 / -1; }

/* All four stat tiles come from custom.js, so placement is by id alone — no
   nth-child rules to break when the widget count changes. */
#laguna-cpu-tile  { grid-area: 3 / 1; }
#laguna-mem-tile  { grid-area: 3 / 2; }
#laguna-ceph-tile { grid-area: 3 / 3; }
#laguna-temp-tile { grid-area: 3 / 4; }

.widget-container {
  padding: 0.6rem 0.9rem;
  justify-content: center;
}

#widgets-wrap .information-widget-resource {
  margin-right: 0;
}

/* Clock and weather sit plain at the ends of the header row, not as glass. */
#widgets-wrap .information-widget-datetime,
#widgets-wrap .information-widget-openmeteo {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin: 0;
}

#widgets-wrap .information-widget-datetime {
  align-items: flex-start;
}

#widgets-wrap .information-widget-openmeteo {
  align-items: flex-end;
  justify-content: center;
}

#widgets-wrap .information-widget-datetime span {
  font-weight: 200;
  letter-spacing: 0.005em;
  margin: 0;
}

#widgets-wrap .information-widget-datetime:nth-of-type(1) span {
  font-size: 2.6rem;
  line-height: 1.05;
}

#widgets-wrap .information-widget-datetime:nth-of-type(2) span {
  font-size: 0.9rem;
  opacity: 0.6;
  line-height: 1.1;
}

/* A group heading sat nearer the group above it: its gap below came from the
   list's mt-3 (12px) while the gap above was only the card's mb-2 plus the
   group's p-1. Push the air above the heading and tighten it to its own list. */
.services-group,
.bookmark-group {
  padding-top: 1.15rem;
}

.services-group ul,
.bookmark-group ul {
  margin-top: 0.3rem;
}

/* The tall clock glyphs eat homepage's top margin; keep it off the edge. */
#information-widgets {
  border-bottom: 0;
  padding-top: 1.5rem;
}

/* statusStyle: dot wraps a 12px dot in a p-4 box. Equal padding + top
   alignment insets the dot the same distance from the top and the side. */
.site-monitor-status {
  padding: 0.7rem;
  align-self: flex-start;
}

.service-group-name,
.bookmark-group-name {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.7;
  padding-bottom: 0.3rem;
  width: 100%;
}

/* The node-facts card is mirrored into the stat row by custom.js; hide the
   source group only once that succeeded, so a JS failure still shows it. */
.services-group.node-mirrored {
  display: none;
}

/* Per-node cards on one line. Taking the widget out of flow is what pulls it
   up beside the title; `left` clears the title block. */
li.service[data-name^="laguna"] .service-container {
  position: absolute;
  top: 0;
  right: 1.2rem;
  bottom: 0;
  /* Clears the icon and node name. Tighter than it would need to be at full
     width, because these cards are now half width. */
  left: 11rem;
  width: auto;
  align-items: center;
  margin: 0;
  /* Centred as one group rather than pushed to the edges; the fixed widths
     below are what keep it lined up across cards. */
  justify-content: center;
  gap: 0.75rem;
}

/* Widths are fixed per stat, not sized to content — values differ between
   nodes, and content-sized blocks made the columns land differently on each
   card. */
li.service[data-name^="laguna"] .service-block {
  background: none;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

li.service[data-name^="laguna"] .service-block:nth-child(1) { width: 6.5rem; }   /* CPU  "18.2%"           */
li.service[data-name^="laguna"] .service-block:nth-child(2) { width: 12rem; }    /* MEM  "12.5 G / 16.7 G" */
li.service[data-name^="laguna"] .service-block:nth-child(3) { width: 6.5rem; }   /* TEMP "51°C"            */
li.service[data-name^="laguna"] .service-block:nth-child(4) { width: 7rem; }     /* UP   "25d 16h"         */

/* Weight and size match the header tiles' resource text (text-xs, normal
   weight) so the two rows read as the same system — these were noticeably
   heavier than the stats above them. */
li.service[data-name^="laguna"] .service-block > div:first-child {
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

li.service[data-name^="laguna"] .service-block > div:last-child {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.55;
  white-space: nowrap;
}

/* A block gains a bar only where custom.js could derive a ratio (not uptime),
   which switches it to a 2-row grid. */
li.service[data-name^="laguna"] .service-block.has-node-bar {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 0.4rem;
  row-gap: 0.15rem;
}

li.service[data-name^="laguna"] .service-block.has-node-bar .node-bar {
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  /* Same track and fill treatment as the header tiles' resource-usage bars, so
     the two rows read as one system rather than two different widgets. */
  background: rgba(186, 240, 232, 0.18);
  overflow: hidden;
}

li.service[data-name^="laguna"] .node-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  background: rgba(186, 240, 232, 0.55);
  transition: width 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  li.service[data-name^="laguna"] .node-bar-fill {
    transition: none;
  }
}

/* Below this the stats and node name stop fitting on one line. The breakpoint
   tracks CARD width, not viewport — at two columns a card is half the window,
   so it lands well before the 1100px that sufficed at full width. */
@media (max-width: 1500px) {
  li.service[data-name^="laguna"] .service-container {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 0.35rem;
    /* The card only carries p-1, so once the stats are in flow the last bar sat
       0.25rem off the bottom edge while the name sat 0.75rem off the top — the
       card's own 0.25rem plus .service-name's py-2. This makes up the missing
       0.5rem so the block is evenly inset top and bottom. */
    padding-bottom: 0.5rem;
  }
}

/* Narrower than this the four stats stop fitting side by side, and the card is
   `overflow-clip`, so they are silently cut off rather than spilling — TEMP and
   UP just vanish. The fixed widths above total 34.25rem with their gaps.

   Queried against the CARD, not the viewport: `columns: 2` renders these 1-up
   below Tailwind's md and 2-up above it, so a ~356px card happens on a phone
   AND again from 768px to ~1170px. No single media query covers both. */
li.service[data-name^="laguna"] .service-card {
  container-type: inline-size;
}

@container (max-width: 35rem) {
  li.service[data-name^="laguna"] .service-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Indented to the node name rather than the card edge. homepage's title row
       is a w-12 icon (3rem) followed by .service-name's px-2 (0.5rem), and the
       blocks have their own m-1/p-1 zeroed above, so 3.5rem lands the values on
       the same left edge as the name. */
    padding-left: 3.5rem;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    /* Top, not centre: UP carries no bar, so centring would drop it half a bar
       below TEMP's value instead of level with it. */
    align-items: start;
  }

  /* .service-container earns this rule the specificity to unset the nth-child
     widths above; equal weight, later in the file. The grid lines the columns
     up across cards now, which is all those widths were for. justify-content
     puts UP on the same left edge as the three blocks that have bars. */
  li.service[data-name^="laguna"] .service-container .service-block {
    width: auto;
    justify-content: start;
  }

  /* The bar is width:100% of the BLOCK's own grid, so with two auto tracks it
     measured "1.6%" plus "CPU" and stopped there — stubby, and a different
     length under every stat. A 1fr second track gives the block its whole
     column, which the bar then spans; justify-items keeps the value and label
     packed left instead of centring in that now-wide track. */
  li.service[data-name^="laguna"] .service-container .service-block.has-node-bar {
    grid-template-columns: auto 1fr;
    justify-items: start;
  }
}

/* Narrowest phones, where half a card no longer holds "21.4 G / 67.4 G" and
   its label either. */
@container (max-width: 19rem) {
  li.service[data-name^="laguna"] .service-container {
    grid-template-columns: 1fr;
  }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

/* Stacked on narrow screens. Auto-placement follows DOM order, where homepage
   renders its stat widgets before the clock, so `order` restores the sequence. */
@media (max-width: 900px) {
  #widgets-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #laguna-cpu-tile,
  #laguna-mem-tile,
  #laguna-ceph-tile,
  #laguna-temp-tile,
  .information-widget-datetime:nth-of-type(1),
  .information-widget-datetime:nth-of-type(2),
  .information-widget-openmeteo {
    grid-area: auto;
  }

  .information-widget-datetime:nth-of-type(1) {
    order: 1;
    grid-column: 1 / -1;
  }

  .information-widget-datetime:nth-of-type(2) {
    order: 2;
    grid-column: 1 / -1;
  }

  /* #widgets-wrap prefix needed: the desktop flex-end rule is id-scoped and
     would otherwise win on specificity and keep weather right-aligned. */
  #widgets-wrap .information-widget-openmeteo {
    order: 3;
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  #laguna-cpu-tile  { order: 4; }
  #laguna-mem-tile  { order: 5; }
  #laguna-ceph-tile { order: 6; }
  #laguna-temp-tile { order: 7; }
}

/* One per row on a phone: "120.8 G / 3.86 T" plus its label does not fit in a
   half-width tile and spills past the edge. */
@media (max-width: 560px) {
  #widgets-wrap {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .bookmark a {
    transition: none;
  }

  .service-card:hover,
  .bookmark a:hover {
    transform: none;
  }
}