/* ==========================================================================
   glance-dense.css -- compress Glance toward ProtoPage density

   Location: /mnt/user/Data/Docker/glance/assets/glance-dense.css
             (mapped to /app/assets in the container)

   Referenced from glance.yml as:
       theme:
         custom-css-file: /assets/glance-dense.css

   Revision 4
     - equal-width columns ACTIVE (was wrongly commented out in rev 3)
     - timestamp font size raised from 0.75rem to 1rem
     - timestamp colour darkened slightly
   ========================================================================== */


/* --------------------------------------------------------------------------
   TIER 1 -- global scale

   Glance's own base is 10px (the 62.5% trick, so 1rem = 10px). 9px is a 10%
   reduction across type, padding, gaps and icons together. Go to 8.5px for
   tighter, back to 10px for stock.
   -------------------------------------------------------------------------- */

:root {
  font-size: 9px;
}


/* --------------------------------------------------------------------------
   TIER 2 -- headline rows

   Headline on the left, relative time right-aligned on the same line.
   Applies to every RSS widget, so all news feeds behave identically.
   -------------------------------------------------------------------------- */

.widget-type-rss .list > li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.widget-type-rss .list > li > a {
  flex: 1 1 auto;
  min-width: 0;          /* REQUIRED -- without this, titles stop truncating */
  line-height: 1.25;
}

.widget-type-rss .list-horizontal-text {
  flex: 0 0 auto;        /* never shrink; the headline gives way instead */
  font-size: 1rem;       /* = 9px at the root above; raise to 1.1rem if needed */
  color: hsl(215 10% 38%) !important;   /* lower % = darker, higher = lighter */
  margin-top: 0;         /* cancels the stacked-layout spacing */
  white-space: nowrap;
}

/* Hide the feed/source name, keep only the relative time.
   Your RSS widgets each pull a single feed, so the widget header already
   names the source. If you ever combine several feeds into one widget,
   comment this block back out -- the source label is what tells them apart. */
.widget-type-rss .list-horizontal-text > li:nth-child(2) {
  display: none;
}

/* Removes the leftover separator dot after the time, if Glance attaches it
   to the first item rather than the second. Harmless if it doesn't. */
.widget-type-rss .list-horizontal-text > li:first-child::after {
  display: none;
}

/* Per-item vertical spacing */
.list-gap-10 > li + li,
.list-gap-14 > li + li,
.list-gap-20 > li + li,
.list-gap-24 > li + li {
  margin-top: 0.45rem;
}


/* --------------------------------------------------------------------------
   TIER 3 -- widget chrome
   -------------------------------------------------------------------------- */

.widget-header {
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
}

.widget + .widget {
  margin-top: 1.1rem;
}

.card {
  padding: 0.75rem;
}


/* --------------------------------------------------------------------------
   TIER 4 -- ProtoPage-style coloured title bars (optional)
   Uncomment for solid header bars instead of Glance's underline style.
   -------------------------------------------------------------------------- */
/*
.widget-header {
  background: hsl(215 35% 30%);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
  border-bottom: none;
}
.widget-header a,
.widget-header .widget-header-title { color: #fff; }
*/


/* --------------------------------------------------------------------------
   TIER 5 -- equal-width columns  [ACTIVE]
   -------------------------------------------------------------------------- */

.page-columns,
.page-column-container,
.columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: start;
}

.column-small,
.page-column-small,
.column.small {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}


/* --------------------------------------------------------------------------
   PER-WIDGET OVERRIDES
   Add `css-class: tiny-feed` to any widget in glance.yml to target it here.
   -------------------------------------------------------------------------- */

.tiny-feed a {
  font-size: 0.85rem;
}
.tiny-feed .list-gap-10 > li + li {
  margin-top: 0.3rem;
}