/* ==========================================================================
   The Christ-Life Church - brand layer
   Palette sampled from the official brand guide:
     midnight  #01071D      gold  #FFC000 -> #FFCB00
     charcoal  #3C3C3C      white #FFFFFF
   ========================================================================== */

:root {
  --tclc-navy-900: #01071D;
  --tclc-navy-850: #040B26;
  --tclc-navy-800: #071132;
  --tclc-navy-700: #0C1A45;
  --tclc-navy-600: #14265E;
  --tclc-navy-500: #1D3480;

  --tclc-gold-300: #FFE47A;
  --tclc-gold-400: #FFCB00;
  --tclc-gold-500: #FFC000;
  --tclc-gold-600: #F7B101;
  --tclc-gold-glow: rgba(255, 192, 0, .35);

  --tclc-charcoal: #3C3C3C;
  --tclc-ink: #0B1020;

  --tclc-good: #34D399;
  --tclc-warn: #FBBF24;
  --tclc-bad: #F87171;

  /* Display face. Anton carries figures and short headlines only -- it is a
     condensed poster face and turns to mush as running text. Everything that
     is read rather than glanced at uses the body face. */
  --tclc-display: "Anton", "Archivo Narrow", "Arial Narrow", sans-serif;
  --tclc-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Retired, kept as an alias. Playfair Display set the formal tone the
     ministry asked to move away from -- and it was never actually loaded
     anywhere, so for months it had been silently rendering as Georgia.
     Aliasing rather than deleting means the sixteen existing call sites
     across three stylesheets resolve to the body face instead of breaking. */
  --tclc-serif: var(--tclc-sans);

  /* One hue per cell, named for the fruit of the Spirit the group carries.
     Used everywhere a group is identified -- register, standings, follow-up
     lists -- so a leader learns their colour once and then recognises their
     people at a glance. Each is held at a lightness that clears 4.5:1 against
     the ground when used as text, and carries white when used as a fill. */
  --cell-love:         #E05570;
  --cell-joy:          #E8A00B;
  --cell-peace:        #21A9B6;
  --cell-patience:     #8878EE;
  --cell-kindness:     #E87344;
  --cell-faithfulness: #3BB980;

  /* Page ground. Cooler and deeper than the brand navy, which stays for
     panels and fills -- the contrast between the two is what gives the
     dial and the figures room to sit forward. */
  --tclc-ground: #03060F;

  /* Type scale. Everything sizes from these rather than ad-hoc pixel values,
     so raising readability is one edit rather than forty.
     Small print was the first complaint about this interface: nothing that
     carries meaning now sits below 13px, and muted text is lightened to keep
     contrast well clear of the 4.5:1 floor on the navy. */
  --tclc-fs-micro: 12.5px;   /* eyebrow labels, pills */
  --tclc-fs-small: 13.5px;   /* captions under a figure */
  --tclc-fs-body:  15px;     /* default reading size */
  --tclc-fs-lead:  17.5px;   /* intro paragraphs */
  --tclc-fs-value: 42px;     /* headline figures */

  --tclc-text:       #EEF2FA;  /* primary */
  --tclc-text-muted: #AFBBD8;  /* ~7.4:1 on the navy */
  --tclc-text-dim:   #93A1C4;  /* ~5.6:1, for genuinely secondary text */

  --tclc-radius: 16px;
  --tclc-radius-sm: 10px;

  /* Layered rather than a single blur: gives cards a sense of sitting
     above the page instead of a smudge behind them. */
  --tclc-lift-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .25);
  --tclc-lift-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --tclc-lift-3: 0 8px 20px rgba(0, 0, 0, .45), 0 30px 60px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   Django admin theming.
   Django 6 drives the whole admin from these variables, so overriding them
   rebrands every page at once rather than fighting selector by selector.
   -------------------------------------------------------------------------- */

html[data-theme="light"], html[data-theme="dark"], :root {
  --primary: var(--tclc-navy-700);
  --secondary: var(--tclc-navy-800);
  --accent: var(--tclc-gold-400);
  --primary-fg: #fff;

  --body-fg: var(--tclc-text);
  --body-bg: var(--tclc-navy-900);
  --body-quiet-color: var(--tclc-text-muted);
  --body-loud-color: #fff;

  --header-color: #fff;
  --header-branding-color: var(--tclc-gold-400);
  --header-bg: linear-gradient(100deg, #01071D 0%, #0C1A45 55%, #14265E 100%);
  --header-link-color: #fff;

  --breadcrumbs-fg: #A9B6D6;
  --breadcrumbs-link-fg: var(--tclc-gold-300);
  --breadcrumbs-bg: rgba(12, 26, 69, .55);

  --link-fg: var(--tclc-gold-400);
  --link-hover-color: var(--tclc-gold-300);
  --link-selected-fg: var(--tclc-gold-500);

  --hairline-color: rgba(255, 255, 255, .08);
  --border-color: rgba(255, 255, 255, .13);

  --error-fg: var(--tclc-bad);
  --message-success-bg: rgba(52, 211, 153, .14);
  --message-warning-bg: rgba(251, 191, 36, .14);
  --message-error-bg: rgba(248, 113, 113, .14);

  --darkened-bg: var(--tclc-navy-850);
  --selected-bg: var(--tclc-navy-800);
  --selected-row: rgba(255, 192, 0, .12);

  --button-fg: #fff;
  --button-bg: var(--tclc-navy-600);
  --button-hover-bg: var(--tclc-navy-500);
  --default-button-bg: var(--tclc-gold-500);
  --default-button-hover-bg: var(--tclc-gold-400);
  --close-button-bg: #3A445F;
  --close-button-hover-bg: #55607F;
  --delete-button-bg: #B4232B;
  --delete-button-hover-bg: #CE2F38;

  --object-tools-bg: var(--tclc-navy-600);
  --object-tools-hover-bg: var(--tclc-gold-600);
  --object-tools-fg: #fff;

  color-scheme: dark;
}

body {
  font-family: var(--tclc-sans);
  font-size: var(--tclc-fs-body);
  line-height: 1.55;
  background: var(--tclc-ground);
  position: relative;
}

/* Django's admin sets 13px in a dozen places. Rather than chase each one,
   lift the defaults here and let the specific rules below refine. */
#content, .module, #changelist, .form-row, .help, p, td, th, li, label {
  font-size: inherit;
}
#result_list, #changelist table { font-size: 14.5px; }
.help, .helptext, small { font-size: var(--tclc-fs-small) !important;
  color: var(--tclc-text-dim); }

/* --------------------------------------------------------------------------
   The living background.
   Flat navy reads as dull no matter how good the navy is. Three slow-drifting
   pools of brand colour give it depth, and a fine grain stops the gradients
   banding on cheaper screens. All of it is transform-driven and sits behind
   pointer events, so it costs the compositor and nothing else.
   -------------------------------------------------------------------------- */

.tclc-aura {
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.tclc-aura span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.tclc-aura .a1 {
  width: 58vmax; height: 58vmax; top: -6vmax; left: -8vmax;
  background: radial-gradient(circle, rgba(255,192,0,.30), transparent 68%);
  animation: tclc-drift-a 34s ease-in-out infinite alternate;
}
.tclc-aura .a2 {
  width: 66vmax; height: 66vmax; top: 8vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(41,74,178,.55), transparent 66%);
  animation: tclc-drift-b 42s ease-in-out infinite alternate;
}
.tclc-aura .a3 {
  width: 48vmax; height: 48vmax; bottom: -12vmax; left: 26vmax;
  background: radial-gradient(circle, rgba(120,64,190,.30), transparent 70%);
  animation: tclc-drift-c 52s ease-in-out infinite alternate;
}
@keyframes tclc-drift-a {
  to { transform: translate3d(9vmax, 6vmax, 0) scale(1.14); }
}
@keyframes tclc-drift-b {
  to { transform: translate3d(-11vmax, 8vmax, 0) scale(1.09); }
}
@keyframes tclc-drift-c {
  to { transform: translate3d(7vmax, -9vmax, 0) scale(1.18); }
}

/* Grain. A touch of noise is the difference between "flat dark blue" and
   "deep". Kept very low opacity -- it should be felt, not seen. */
.tclc-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A soft darkening at the edges keeps attention in the middle of the page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,.55));
}

h1, h2, h3, h4, .tclc-serif {
  font-family: var(--tclc-serif);
  letter-spacing: .1px;
}

/* Header ------------------------------------------------------------------ */

#header {
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255, 192, 0, .22);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  padding: 14px 24px;
}

#branding h1 { font-family: var(--tclc-serif); font-weight: 700; }
#branding h1 a:link, #branding h1 a:visited { color: #fff; }

/* The gold rule under the header echoes the sun-ray motif. */
#header::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--tclc-gold-500), var(--tclc-gold-300), var(--tclc-gold-500), transparent);
  opacity: .8;
}

.tclc-logo { display: flex; align-items: center; gap: 14px; }
.tclc-logo img { height: 38px; width: auto; display: block; }
.tclc-logo .tclc-wordmark { line-height: 1.1; }
.tclc-logo .tclc-wordmark strong {
  font-family: var(--tclc-serif);
  font-size: 17px; color: #fff; display: block; letter-spacing: .3px;
}
.tclc-logo .tclc-wordmark span {
  font-size: 11px; color: var(--tclc-gold-300); letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Modules, tables, forms -------------------------------------------------- */

.module, .dashboard .module, fieldset.module {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--border-color);
  border-radius: var(--tclc-radius);
  box-shadow: var(--tclc-lift-1);
  overflow: hidden;
}

.module h2, .module caption, .inline-group h2 {
  background: linear-gradient(90deg, var(--tclc-navy-700), var(--tclc-navy-600));
  color: #fff;
  font-family: var(--tclc-serif);
  letter-spacing: .3px;
  border-bottom: 1px solid rgba(255, 192, 0, .25);
}

#result_list thead th {
  background: rgba(255, 255, 255, .04);
  color: var(--tclc-gold-300);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
}
#result_list tbody tr { transition: background .15s ease, transform .15s ease; }
#result_list tbody tr:hover { background: rgba(255, 192, 0, .07); }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border-color);
  border-radius: var(--tclc-radius-sm);
  color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus, .vTextField:focus {
  border-color: var(--tclc-gold-500) !important;
  box-shadow: 0 0 0 3px var(--tclc-gold-glow) !important;
  outline: none;
}

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover, a.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--tclc-lift-1);
}
.button.default, input[type=submit].default, .submit-row input.default {
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  color: var(--tclc-ink);
  border: none;
  box-shadow: 0 6px 18px rgba(255, 192, 0, .28);
}
.button.default:hover, input[type=submit].default:hover {
  box-shadow: 0 10px 26px rgba(255, 192, 0, .42);
}

.messagelist li {
  border-radius: var(--tclc-radius-sm);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(6px);
}

#nav-sidebar, .sticky { background: rgba(4, 11, 38, .72); }
#nav-sidebar a:hover { color: var(--tclc-gold-300); }

/* --------------------------------------------------------------------------
   Dashboard components
   -------------------------------------------------------------------------- */

.tclc-shell { max-width: 1320px; margin: 0 auto; padding: 0 20px 72px; }

/* Hero -------------------------------------------------------------------- */

.tclc-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 56px 44px;
  margin: 26px 0 34px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 192, 0, .2);
  /* The photograph is the warmth this direction would otherwise lack -- the
     dial and the figures are deliberately cold, so the ministry itself sits
     behind them. Ordered front to back: gold bloom, a scrim heavy enough to
     hold white text at full contrast, then the picture.

     This one stays behind the login. It has three other people in it, and
     nobody has yet been asked whether they mind appearing on a public page.

     The path is relative on purpose: Django rewrites it when it hashes the
     stylesheet for production, which a {% static %} tag inside CSS cannot do. */
  background:
    radial-gradient(700px 340px at 88% 20%, rgba(255, 192, 0, .20), transparent 62%),
    linear-gradient(102deg,
      rgba(3, 6, 15, .96) 0%, rgba(4, 10, 30, .90) 42%, rgba(6, 14, 40, .58) 100%),
    url("../brand/photos/preaching-bw.374bada6e64e.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, 62% 28%;
  background-repeat: no-repeat;
  box-shadow: var(--tclc-lift-3);
}

/* A gold seam along the top edge, catching the light like the mark itself. */
.tclc-hero::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,203,0,.9) 30%, rgba(255,255,255,.85) 50%,
    rgba(255,203,0,.9) 70%, transparent);
}
/* Slow sheen travelling across the panel. Subtle enough to register as
   depth rather than as an animation demanding attention. */
.tclc-hero::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 40%;
  left: -50%;
  background: linear-gradient(105deg,
    transparent, rgba(255,255,255,.055) 45%, transparent);
  animation: tclc-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tclc-sheen {
  0%, 62% { left: -50%; }
  100%    { left: 115%; }
}

.tclc-hero h1 {
  font-family: var(--tclc-display);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: .98;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}
.tclc-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--tclc-gold-300), var(--tclc-gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tclc-hero .tclc-verse {
  color: #C7D2EC;
  font-size: var(--tclc-fs-lead);
  max-width: 46ch;
  line-height: 1.62;
}

.tclc-hero-media {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.tclc-hero-media video {
  width: min(340px, 100%);
  border-radius: 20px;
  /* The animation is on a white field; blending drops the white out so it
     sits on the navy without a hard box around it. */
  mix-blend-mode: screen;
  filter: contrast(1.06) saturate(1.12);
  transform: rotateY(-9deg) rotateX(4deg);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tclc-hero-media:hover video { transform: rotateY(0deg) rotateX(0deg) scale(1.03); }

/* Sun-ray halo built from the logo motif, rotating slowly in 3D. */
.tclc-rays {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-style: preserve-3d;
  animation: tclc-spin 42s linear infinite;
}
.tclc-rays i {
  position: absolute;
  width: 3px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tclc-gold-400), transparent);
  transform-origin: 50% 150px;
  opacity: .5;
}
@keyframes tclc-spin { to { transform: rotate(360deg); } }

/* Stat cards -------------------------------------------------------------- */

.tclc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.tclc-card {
  position: relative;
  padding: 24px 24px 22px;
  border-radius: var(--tclc-radius);
  border: 1px solid var(--border-color);
  background:
    linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: var(--tclc-lift-1);
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
  overflow: hidden;
}
/* A card that is also a link. Same surface, but it says so: the border
   picks up the gold on hover and the whole tile is the target, because a
   count you are meant to act on should not make you hunt for where to
   press. */
.tclc-card-link {
  display: block; text-decoration: none; color: inherit;
  border-color: color-mix(in srgb, var(--tclc-gold-400) 40%, transparent);
}
.tclc-card-link:hover, .tclc-card-link:focus-visible {
  border-color: var(--tclc-gold-400);
  box-shadow: var(--tclc-lift-2);
}

.tclc-card::before {
  /* Light catching the top edge, so the card reads as a physical surface. */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.tclc-card::after {
  /* A glow that tracks the pointer -- the same coordinates that drive the
     tilt, so the highlight and the rotation agree and the surface reads as
     one solid object rather than two effects. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 192, 0, .16), transparent 62%);
}
.tclc-card:hover::after { opacity: 1; }
.tclc-card:hover {
  box-shadow: var(--tclc-lift-2), 0 0 0 1px rgba(255,192,0,.18);
  border-color: rgba(255, 192, 0, .42);
}
.tclc-card h4 {
  margin: 0 0 10px;
  font-family: var(--tclc-sans);
  font-size: var(--tclc-fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tclc-text-muted);
  font-weight: 700;
}
.tclc-value {
  font-family: var(--tclc-display);
  font-size: var(--tclc-fs-value);
  line-height: .92;
  /* Anton has no lowercase to speak of and rides high; the extra tracking
     stops the digits jamming together at display size. */
  letter-spacing: .01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.tclc-value.good { color: #5EEAD4; }
.tclc-value.warn { color: #FCD34D; }
.tclc-value.bad  { color: #FCA5A5; }
.tclc-sub {
  margin-top: 10px;
  font-size: var(--tclc-fs-small);
  color: var(--tclc-text-muted);
  line-height: 1.5;
}

.tclc-spark { margin-top: 14px; height: 34px; display: block; width: 100%; }

/* --------------------------------------------------------------------------
   The dial.

   Attendance read as a gauge built from the same rays as the mark on the
   wall, rather than as a number in a box. Two full rings are drawn, dim then
   gold, and a plain conic gradient paints each down to its own arc: dim shows
   only where attendance is missing, gold only where it is met.

   Painting over the top is deliberate. Compositing a radial mask with a conic
   one is the obvious approach and the wrong one -- mask-composite still wants
   different syntax per engine, and this has to work on the mid-range Android
   handsets leaders actually carry.

   --dial-fill is set inline by the view, as a percentage.
   -------------------------------------------------------------------------- */
.tclc-dial {
  --dial-fill: 0%;
  --dial-size: clamp(190px, 24vw, 260px);
  /* The masks below paint over the rings in a flat colour, so the dial
     carries its own plate rather than assuming it sits on the page ground.
     Without it the component only works on one background -- the register
     head is a navy gradient, and the wedges showed as dark holes in it. */
  --dial-ground: var(--tclc-ground);
  position: relative;
  width: var(--dial-size);
  height: var(--dial-size);
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.tclc-dial::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--dial-ground);
}
.tclc-dial .ring,
.tclc-dial .mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.tclc-dial .ring {
  background: repeating-conic-gradient(from -90deg,
    currentColor 0deg 1.6deg, transparent 1.6deg 7.2deg);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 57.6%);
          mask: radial-gradient(circle, transparent 57%, #000 57.6%);
}
.tclc-dial .ring.rest { color: #1B2540; }
.tclc-dial .ring.done { color: var(--tclc-gold-500); }

/* Each mask hides the arc belonging to the other ring. Slightly oversized so
   no hairline of the ring survives at the seam. */
.tclc-dial .mask { inset: -2px; }
.tclc-dial .mask.over-rest {
  background: conic-gradient(from -90deg,
    var(--dial-ground) 0 var(--dial-fill), transparent var(--dial-fill));
}
.tclc-dial .mask.over-done {
  background: conic-gradient(from -90deg,
    transparent 0 var(--dial-fill), var(--dial-ground) var(--dial-fill) 100%);
}
/* Registered so the value is a typed percentage with a sane starting point
   rather than an untyped token, which keeps the conic gradients valid even
   if the property is ever missing.

   DO NOT add a transition on --dial-fill. It looks like the obvious way to
   grow the arc, and it silently breaks the dial: with a transition declared,
   the *computed* value stops tracking the inline value the script sets, so
   the gradient keeps rendering from a stale angle. Measured directly -- the
   inline value read 32% while the computed value sat at 24% indefinitely,
   and removing the transition made it track instantly. The arc jumping
   straight to the right angle is the correct trade on a screen whose whole
   job is telling a leader the truth about who is in the room. */
@property --dial-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.tclc-dial .reading {
  position: relative;
  text-align: center;
  line-height: 1;
}
.tclc-dial .reading b {
  display: block;
  font-family: var(--tclc-display);
  font-size: calc(var(--dial-size) * .3);
  letter-spacing: .01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tclc-dial .reading span {
  display: block;
  margin-top: 8px;
  font-size: var(--tclc-fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tclc-text-dim);
}

/* --------------------------------------------------------------------------
   Sign in.

   Styled entirely through the body class Django already sets, with no
   template override. That is deliberate: this page once threw a 500 and shut
   every single person out of the system, so the login flow is the last place
   to introduce markup of our own. CSS cannot break a POST.

   The portrait here is the one with nobody else in it. The preaching
   photograph is stronger, but this page is reachable without signing in, and
   the three other people in that frame have not been asked.
   -------------------------------------------------------------------------- */
body.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(160deg, rgba(3, 6, 15, .82), rgba(3, 6, 15, .94)),
    url("../brand/photos/word-bw.41c83d13bae6.jpg") center 22% / cover no-repeat,
    var(--tclc-ground);
}
body.login #container {
  width: min(420px, 100%);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 192, 0, .26);
  background: linear-gradient(180deg, rgba(9, 16, 40, .92), rgba(4, 8, 22, .96));
  box-shadow: var(--tclc-lift-3);
  backdrop-filter: blur(14px);
}
body.login #header {
  padding: 26px 26px 18px;
  border-bottom: 1px solid rgba(255, 192, 0, .18);
  box-shadow: none;
}
body.login #content {
  padding: 24px 26px 30px;
}
body.login #content-main { width: 100%; }
body.login .form-row {
  padding: 0 0 14px;
  border: 0;
  display: grid;
  gap: 6px;
}
body.login .form-row label {
  font-size: var(--tclc-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tclc-gold-300);
  font-weight: 600;
}
body.login .form-row input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  border-radius: 10px;
}
body.login .submit-row {
  padding: 6px 0 0;
  margin: 0;
  border: 0;
  background: none;
}
body.login .submit-row input[type="submit"] {
  width: 100%;
  padding: 13px;
  font-family: var(--tclc-display);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.login .password-reset-link { text-align: center; display: block; margin-top: 14px; }
body.login .errornote {
  border-radius: 10px;
  font-size: var(--tclc-fs-small);
}

/* --------------------------------------------------------------------------
   Cell colours.

   One hue per group, applied by a class the template derives from the group
   name. Anything that identifies a group wears it, so a leader learns their
   colour once. Falls back to gold for a group whose name is not one of the
   six -- a newly started cell, or the Zealous outreach lists.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   The hub.

   Large targets, because the people using this are on phones, often standing
   up, often mid-service. Nothing here is decorative: every tile is a door,
   and a tile only appears when the person may actually walk through it.
   -------------------------------------------------------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin: 0 0 34px;
}
.hub-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 20px;
  min-height: 118px;
  border-radius: var(--tclc-radius);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hub-tile:hover,
.hub-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 192, 0, .45);
  background: linear-gradient(180deg, rgba(255,192,0,.09), rgba(255,255,255,.02));
}
.hub-tile strong {
  font-size: var(--tclc-fs-lead);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hub-tile span:last-child {
  font-size: var(--tclc-fs-small);
  color: var(--tclc-text-muted);
  line-height: 1.45;
}
.hub-ico { font-size: 24px; line-height: 1; margin-bottom: 6px; }

/* The weekly job, given the weight it earns. */
.hub-tile.hub-primary {
  background: linear-gradient(160deg, rgba(255,203,0,.18), rgba(255,192,0,.06));
  border-color: rgba(255, 192, 0, .5);
}
.hub-tile.hub-primary strong { color: var(--tclc-gold-300); }

/* Page headings on the module boards. Anton, but only at heading size --
   these sit above dense tables and must not shout over the figures. */
.tclc-display-head {
  font-family: var(--tclc-display);
  text-transform: uppercase;
  letter-spacing: .014em;
  line-height: 1.02;
}

.cell-dot {
  --cell: var(--tclc-gold-500);
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cell);
  margin-right: 8px;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cell) 22%, transparent);
}
.cell-love         { --cell: var(--cell-love); }
.cell-joy          { --cell: var(--cell-joy); }
.cell-peace        { --cell: var(--cell-peace); }
.cell-patience     { --cell: var(--cell-patience); }
.cell-kindness     { --cell: var(--cell-kindness); }
.cell-faithfulness { --cell: var(--cell-faithfulness); }

/* A chip carrying its group's colour rather than a uniform grey. */
.tclc-chip[class*="cell-"] {
  border-color: color-mix(in srgb, var(--cell) 45%, transparent);
}
.tclc-chip[class*="cell-"].active {
  background: var(--cell);
  border-color: var(--cell);
  color: #06090F;
}

/* Section headings -------------------------------------------------------- */

.tclc-section {
  display: flex; align-items: baseline; gap: 14px;
  margin: 38px 0 16px;
}
.tclc-section h2 {
  margin: 0; font-size: 24px; color: #fff; letter-spacing: .2px;
}
.tclc-section .rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    rgba(255,192,0,.75), rgba(255,192,0,.18) 45%, transparent);
}
.tclc-section a {
  font-size: var(--tclc-fs-small); white-space: nowrap; font-weight: 600;
}

/* 3D bar chart ------------------------------------------------------------ */

.tclc-chart3d {
  --depth: 12px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
  padding: 26px 26px 12px;
  border-radius: var(--tclc-radius);
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  perspective: 900px;
  overflow-x: auto;
}
.tclc-bar-wrap {
  flex: 1 0 42px;
  /* A definite height, or the bars' percentage heights resolve against an
     auto-height parent and collapse to zero. */
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transform-style: preserve-3d;
}
.tclc-bar {
  position: relative;
  width: 100%;
  flex: none;
  min-height: 4px;                 /* a quiet week is still visible */
  max-height: calc(100% - 22px);   /* leaves room for the label */
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--tclc-gold-400), var(--tclc-gold-600));
  transform: rotateX(-16deg);
  transform-origin: bottom center;
  transform-style: preserve-3d;
  box-shadow: 0 10px 24px rgba(255, 192, 0, .18);
  animation: tclc-rise .9s cubic-bezier(.2, .8, .2, 1) backwards;
}
.tclc-bar.expense {
  background: linear-gradient(180deg, #6D7BA8, #3B4668);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.tclc-bar::after {
  /* The extruded top face -- what makes it read as a solid, not a rectangle. */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--depth);
  background: linear-gradient(180deg, #FFE9A8, var(--tclc-gold-400));
  transform: rotateX(74deg);
  transform-origin: top center;
  border-radius: 4px;
}
.tclc-bar.expense::after { background: linear-gradient(180deg, #97A3C6, #6D7BA8); }
/* Scale rather than height: height cannot be animated from a percentage
   reliably, and transform animates on the compositor so it stays smooth on
   a phone. */
@keyframes tclc-rise {
  from { transform: rotateX(-16deg) scaleY(0); opacity: .25; }
}
.tclc-bar-label {
  font-size: var(--tclc-fs-micro);
  color: var(--tclc-text-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Ranked list ------------------------------------------------------------- */

.tclc-list { display: grid; gap: 10px; }
.tclc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--tclc-radius-sm);
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, .035);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.tclc-row:hover {
  transform: translateX(4px);
  background: rgba(255, 192, 0, .08);
  border-color: rgba(255, 192, 0, .3);
}
.tclc-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 192, 0, .5);
  background: var(--tclc-navy-700);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--tclc-gold-300);
}
.tclc-row .name { color: #fff; font-weight: 650; font-size: 15.5px; }
.tclc-row .meta {
  color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-small);
  margin-top: 3px;
}

.tclc-pill {
  padding: 5px 13px; border-radius: 999px;
  font-size: var(--tclc-fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.tclc-pill.critical { background: rgba(248,113,113,.18); color: #FCA5A5; }
.tclc-pill.high     { background: rgba(251,146,60,.18);  color: #FDBA74; }
.tclc-pill.watch    { background: rgba(251,191,36,.16);  color: #FCD34D; }
.tclc-pill.low      { background: rgba(52,211,153,.16);  color: #6EE7B7; }
.tclc-pill.gold     { background: rgba(255,192,0,.18);   color: var(--tclc-gold-300); }

/* Quick actions ----------------------------------------------------------- */

.tclc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tclc-action {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border-radius: var(--tclc-radius);
  border: 1px solid var(--border-color);
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  text-decoration: none;
  transition: transform .16s ease, box-shadow .25s ease, border-color .2s ease;
}
.tclc-action:hover {
  transform: translateY(-3px);
  border-color: rgba(255,192,0,.45);
  box-shadow: var(--tclc-lift-2);
}
.tclc-action .icon {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  color: var(--tclc-ink);
  font-size: 19px;
}
.tclc-action strong {
  color: #fff; display: block; font-size: 15.5px; margin-bottom: 2px;
}
.tclc-action > span > span {
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-small);
}

/* --------------------------------------------------------------------------
   Interactive controls
   -------------------------------------------------------------------------- */

.tclc-controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 24px;
}

.tclc-find {
  position: relative; flex: 1 1 300px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-color);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tclc-find:focus-within {
  border-color: var(--tclc-gold-500);
  box-shadow: 0 0 0 3px var(--tclc-gold-glow);
}
.tclc-find input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: var(--tclc-fs-body); font-family: var(--tclc-sans);
}
.tclc-find input::placeholder { color: var(--tclc-text-dim); }

.tclc-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-color);
  background: rgba(6, 14, 42, .97);
  backdrop-filter: blur(18px);
  box-shadow: var(--tclc-lift-3);
}
.tclc-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none;
  border-bottom: 1px solid var(--hairline-color);
}
.tclc-result:last-child { border-bottom: none; }
.tclc-result:hover { background: rgba(255,192,0,.1); }
.tclc-result b { color: #fff; display: block; font-size: var(--tclc-fs-body); }
.tclc-result small { color: var(--tclc-text-muted); font-size: var(--tclc-fs-small); }
.tclc-noresult {
  padding: 16px; margin: 0; color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-small);
}

.tclc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tclc-chip {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-size: var(--tclc-fs-small); font-weight: 600;
  color: var(--tclc-text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  transition: all .18s ease;
}
.tclc-chip:hover { color: #fff; border-color: rgba(255,192,0,.45); }
.tclc-chip.active {
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  color: var(--tclc-ink); border-color: transparent;
}

.tclc-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.tclc-seg {
  display: flex; padding: 4px; gap: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
}
.tclc-seg button {
  padding: 7px 15px; border-radius: 999px; cursor: pointer; border: none;
  background: none; color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-small); font-weight: 600;
  transition: all .16s ease;
}
.tclc-seg button:hover { color: #fff; }
.tclc-seg button.active {
  background: var(--tclc-gold-500); color: var(--tclc-ink);
}

.tclc-hint {
  color: var(--tclc-text-dim); font-size: var(--tclc-fs-small);
  margin: -6px 0 14px;
}
.tclc-chart-empty {
  color: var(--tclc-text-muted); margin: auto; text-align: center;
  font-size: var(--tclc-fs-body);
}

/* Rows become buttons once the script is running. */
.tclc-row[data-member] { cursor: pointer; }
.tclc-row[data-member]:focus-visible {
  outline: 2px solid var(--tclc-gold-500); outline-offset: 2px;
}
.tclc-row[aria-expanded="true"] {
  background: rgba(255,192,0,.1);
  border-color: rgba(255,192,0,.45);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* Expanded member panel --------------------------------------------------- */

.tclc-panel {
  border: 1px solid rgba(255,192,0,.32);
  border-top: none;
  border-radius: 0 0 var(--tclc-radius) var(--tclc-radius);
  background: linear-gradient(180deg, rgba(255,192,0,.05), rgba(255,255,255,.02));
  padding: 20px 22px 22px;
  margin-top: -10px; margin-bottom: 10px;
  animation: tclc-open .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes tclc-open { from { opacity: 0; transform: translateY(-8px); } }

.tclc-panel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.tclc-panel h4 {
  margin: 0 0 12px; font-family: var(--tclc-sans);
  font-size: var(--tclc-fs-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--tclc-gold-300); font-weight: 700;
}
.tclc-panel-loading, .tclc-panel-note {
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-small);
  margin: 10px 0 0;
}
.tclc-panel-list { margin: 0; padding-left: 18px; }
.tclc-panel-list li {
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-small);
  margin-bottom: 5px;
}
.tclc-panel-list b { color: var(--tclc-gold-300); }

.tclc-metric {
  display: grid; grid-template-columns: 108px 1fr 42px;
  align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: var(--tclc-fs-small); color: var(--tclc-text-muted);
}
.tclc-meter {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.09);
}
.tclc-meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--tclc-gold-600), var(--tclc-gold-300));
  animation: tclc-fill .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes tclc-fill { from { width: 0 !important; } }
.tclc-metric em { font-style: normal; text-align: right; color: #fff; }
.tclc-unknown { color: var(--tclc-text-dim); grid-column: 2 / span 2; }

.tclc-warnbox {
  padding: 13px 15px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(248,113,113,.14);
  border: 1px solid rgba(248,113,113,.4);
  color: #FCA5A5; font-size: var(--tclc-fs-small); line-height: 1.5;
}

.tclc-call {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: var(--tclc-fs-body);
  color: var(--tclc-ink);
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  box-shadow: 0 6px 18px rgba(255,192,0,.28);
}
.tclc-call:hover { transform: translateY(-1px); }

.tclc-outcomes { display: flex; flex-wrap: wrap; gap: 8px; }
.tclc-outcome {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font-size: var(--tclc-fs-small); font-weight: 600;
  color: var(--tclc-text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  transition: all .15s ease;
}
.tclc-outcome:hover:not(:disabled) {
  color: #fff; border-color: rgba(255,192,0,.5);
  background: rgba(255,192,0,.12);
}
/* Outcomes that count as genuine contact are visually distinct from
   "no answer", so the scoring rule is legible in the interface itself. */
.tclc-outcome.reached { border-color: rgba(52,211,153,.34); color: #A7F3D0; }
.tclc-outcome:disabled { opacity: .45; cursor: default; }
.tclc-outcome.saving { background: var(--tclc-gold-500); color: var(--tclc-ink); }

.tclc-note {
  width: 100%; margin-top: 12px; padding: 11px 14px;
  border-radius: 12px; resize: vertical;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  color: #fff; font-family: var(--tclc-sans);
  font-size: var(--tclc-fs-small);
}

/* Feedback ---------------------------------------------------------------- */

.tclc-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 100;
  transform: translate(-50%, 20px);
  padding: 14px 24px; border-radius: 999px;
  background: rgba(6,14,42,.97);
  border: 1px solid rgba(255,192,0,.45);
  color: #fff; font-size: var(--tclc-fs-body); font-weight: 600;
  box-shadow: var(--tclc-lift-3);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.tclc-toast.in { opacity: 1; transform: translate(-50%, 0); }
.tclc-toast.bad { border-color: rgba(248,113,113,.6); }

.tclc-flash { animation: tclc-flash .7s ease; }
@keyframes tclc-flash {
  0%   { color: var(--tclc-gold-300); text-shadow: 0 0 26px var(--tclc-gold-glow); }
  100% { }
}

.is-loading .tclc-grid, .is-loading #tclc-chart, .is-loading #tclc-risk {
  opacity: .45; transition: opacity .15s ease; pointer-events: none;
}

.tclc-bar.giving {
  background: linear-gradient(180deg, #6EE7B7, #10B981);
  box-shadow: 0 10px 24px rgba(16,185,129,.2);
}
.tclc-bar.giving::after { background: linear-gradient(180deg, #A7F3D0, #6EE7B7); }

@media (max-width: 700px) {
  .tclc-panel-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Accessibility and small screens ----------------------------------------- */

@media (max-width: 900px) {
  .tclc-hero { grid-template-columns: 1fr; padding: 34px 22px; text-align: center; }
  .tclc-hero-media { order: -1; }
  .tclc-value { font-size: 32px; }
}

/* Anyone who has asked their system to reduce motion gets a still page --
   the animation is decoration, never the information. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .tclc-hero-media video { transform: none; }
}

/* --- Today ---------------------------------------------------------------
   What needs doing, directly under the hero.

   Deliberately NOT a .tclc-card. The dashboard's problem in October 2026
   was that every block below the hero was the same glass rectangle, so
   the page read as one flat sheet with no hierarchy -- adding another
   card would have made the strip invisible. These are flatter, tighter,
   laid out in a row, and carry a coloured edge instead of a border.

   Each item is a link to the place the work is done, because a count you
   are meant to act on should not make you hunt for where to press. */
.tclc-today {
  margin: 0 0 30px;
}

.tclc-today-head {
  font-family: var(--tclc-display);
  font-size: var(--tclc-fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tclc-gold-400);
  margin: 0 0 12px;
}

.tclc-today-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tclc-todo {
  flex: 1 1 210px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  /* Flat, not glass: this strip earns attention by being a different
     object from everything beneath it, not a brighter copy. */
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid var(--tclc-gold-500);
  transition: background .2s ease, transform .2s ease;
}

.tclc-todo:hover,
.tclc-todo:focus-visible {
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}

.tclc-todo b {
  font-family: var(--tclc-display);
  font-size: 30px;
  line-height: 1;
  color: var(--tclc-gold-400);
}

.tclc-todo span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--tclc-fs-small);
  line-height: 1.35;
}

/* The quiet second line: who, or when, or why it matters. Muted so the
   count and the task read first. */
.tclc-todo em {
  font-style: normal;
  opacity: .62;
  font-size: var(--tclc-fs-micro);
}

/* A register nobody has closed holds up the absence records, the
   follow-ups and the absentee batch, so it is the one thing here that
   gets to look urgent. */
.tclc-todo-urgent {
  border-left-color: var(--tclc-bad);
}
.tclc-todo-urgent b { color: var(--tclc-bad); }

/* Birthdays are not a chore. Same shape, different temperature. */
.tclc-todo-glad {
  border-left-color: var(--tclc-good);
}
.tclc-todo-glad b { color: var(--tclc-good); }

@media (max-width: 640px) {
  .tclc-todo { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tclc-todo { transition: none; }
  .tclc-todo:hover, .tclc-todo:focus-visible { transform: none; }
}

/* --- Links that are whole objects ---------------------------------------
   The admin's base.css carries

       a:not([role="button"], #header a, #nav-sidebar a, ...) { underline }

   and because :not() takes the specificity of its most specific argument,
   that `#header a` gives the rule ID-level weight. Nothing reasonable in
   this stylesheet can outrank it, which is why the dashboard's tiles and
   cards have all been quietly underlined -- a card is an object you press,
   not a phrase in a sentence, and underlining its heading makes it read
   like a footnote.

   !important rather than an invented ID: the fight is with a stylesheet
   this project does not own and cannot edit. */
.tclc-todo,
.tclc-todo:link,
.tclc-todo:visited,
.tclc-action,
.tclc-action:link,
.tclc-action:visited,
.tclc-card-link,
.tclc-card-link:link,
.tclc-card-link:visited {
  text-decoration: none !important;
}

/* Keyboard focus still has to be visible -- removing the underline must
   not remove the only cue a keyboard user gets. */
.tclc-todo:focus-visible,
.tclc-action:focus-visible,
.tclc-card-link:focus-visible {
  outline: 2px solid var(--tclc-gold-400);
  outline-offset: 3px;
}

/* --- Who is signed in, and the way out -----------------------------------
   Sits above the hero rather than in a corner. With nine people sharing
   one password, "which account is this?" is a question somebody actually
   has to answer, so it is stated rather than hidden behind an avatar. */
.tclc-whoami {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0 0 14px;
  font-size: var(--tclc-fs-micro);
  color: var(--tclc-text-muted);
}

.tclc-whoami b { color: var(--tclc-text); font-weight: 700; }
.tclc-whoami form { margin: 0; }

.tclc-signout {
  font: inherit;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--tclc-text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

/* Quiet until wanted. Signing out is not a destructive act, but it is not
   something to invite by accident either. */
.tclc-signout:hover,
.tclc-signout:focus-visible {
  color: var(--tclc-navy-900);
  background: var(--tclc-gold-400);
  border-color: var(--tclc-gold-400);
}

/* In the app rail the button has to pass for one of the links beside it,
   so it inherits .app-link and only resets what a <button> brings with
   it: its own font, its background, and a default border. */
.app-signout { margin: 0; }
.app-signout button {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* A figure that has no data behind it. Muted and dashed rather than a
   green zero: "nothing recorded" and "nothing owed" are different facts,
   and the card used to dress the first as the second. */
.tclc-value-empty {
  color: var(--tclc-text-muted);
  opacity: .55;
}

/* --- Logging a follow-up -------------------------------------------------
   One card per person, done standing up on a phone. The call button is
   big and the outcome is one tap, because the alternative -- what the
   system had until 26 October 2026 -- was leaders creating fresh records
   in the admin because the allocated ones offered them nowhere to write. */
.fu-list {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}

.fu-card {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 2fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--tclc-radius);
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, .04);
}

/* Carried from an earlier day. Marked, not hidden: a call missed on
   Tuesday is still a call to make. */
.fu-overdue { border-left: 3px solid var(--tclc-bad); }

.fu-who { display: flex; flex-direction: column; gap: 3px; }
.fu-who strong { font-size: var(--tclc-fs-lead); }

/* A phone number is for pressing, not reading. */
.fu-call {
  margin-top: 4px;
  font-size: var(--tclc-fs-small);
  color: var(--tclc-gold-400);
  text-decoration: none !important;
}
.fu-call:hover, .fu-call:focus-visible { text-decoration: underline !important; }

.fu-log {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.fu-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.fu-field span {
  font-size: var(--tclc-fs-micro);
  color: var(--tclc-text-muted);
}
.fu-field select,
.fu-field input {
  font: inherit;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--tclc-navy-800);
  color: var(--tclc-text);
}

/* Stacked on a phone: side by side, the outcome select ends up too narrow
   to read the option you picked. */
@media (max-width: 720px) {
  .fu-card { grid-template-columns: 1fr; }
  .fu-log { flex-direction: column; align-items: stretch; }
}