:root {
    --bg: 
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.001) 0px,
      rgba(0, 0, 0, 0.01) 10px,
      #ffffff 2px,
      #efefef 8px
    );
  --fg: #1f2630;
  --muted: #231f20;
  --b-color:#002157;
  --line: #2a2a2a;
  --accent1: #92278F;
  --accent2: #00ABC5;
  --accent3: #39B54A;
  --accent4: #f0c14b;
  --today: #1f2630;
  --body: #afaFaF;
--card-b: 2px solid;
--card-br: 10px;
--card-bg:repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.011) 0px, rgba(0, 0, 0, 0.011) 10px, #cdcdcd 2px, #efefef 8px );
--cards: #efefef;
--card-border-width: 2px;
--card-border-style: solid;
--card-border-color: var(--b-color); /* or use var(--line) if you prefer */
--card-radius: 10px;
	
}
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
}
.wrap { max-width: 95%; margin: 0 auto; padding: 20px; }
h1 { font-size: 1.2rem; font-weight: 600; margin: 0 0 6px; Color:var(--body);}
.sub { color: var(--muted); font-size: .9rem; margin-bottom: 16px; }
.controls { display:flex; gap:8px; align-items:center; margin-bottom: 14px; }
.controls a, .controls button {
border: var(--card-border-width) var(--card-border-style) var(--card-border-color);  border-radius: var(--card-radius);  padding: 8px;  background: var(--card-bg), var(--cards);  appearance: none; color: var(--fg);  padding: 6px 10px; font-size: .9rem; cursor: pointer; text-decoration:none; border-radius:8px;
}
.legend { display:flex; gap:16px; font-size:.85rem; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.legend span { display:flex; align-items:center; gap:8px; }
.dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.graphics { background: var(--accent1); }
.banners { background: var(--accent2); }
.print { background: var(--accent3); }
.trophies { background: var(--accent4); }

/* Two rows on desktop: 8 columns (top row 8, bottom row 7) */
.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 1fr;         /* make all cards equal height */
  gap: 8px 8px;  /* row-gap column-gap */
  overflow: visible;           /* no horizontal scroll */
}
/* Cards shrink to fit columns; no forced minimum width */
.card{
  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
  border-radius: var(--card-radius);
  padding: 8px;
  /* Put the subtle texture OVER the solid color */
  background: var(--card-bg), var(--cards);
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Tighter internal spacing to prevent content collisions at smaller widths */
.date { 
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; margin-bottom: 6px; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.dow { font-size: .9rem; }
.todayBadge { font-size: .72rem; }
.eta { font-size: .86rem; line-height: 1.35; margin: 6px 0; }


/* Phone: 2 columns */
@media (max-width: 900px){
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tablet: 6 columns */
@media (max-width: 1000px){
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dow { color: var(--muted); font-weight: 500; font-size:.9rem; }
.todayBadge { font-size:.65rem; color:#eaf3ff; background: var(--today); padding: 2px 6px; border-radius: 6px; }
.eta { font-size:.88rem; line-height:1.35; margin: 6px 0; }
.eta strong { font-weight:600; }
.eta .label { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.eta .range { color: var(--muted); }
.footnote {
  border-top: 1px dashed var(--line);
  margin-top: 14px;
  padding-top: 10px;
  color: var(--muted);
  font-size:.82rem;
}
.weekline { color: var(--muted); font-size: .9rem; margin: 8px 0 16px; }