/* hub.sierratech.us, the start page.
   2026-11-05 (Juan): a bento in the manner of the Aaxion shots (dark tiles, solid accent
   tiles, a notched corner holding an arrow, pills with a knob), in Sierra's colours from
   test.sierratech.us/v2: deep teal where they have black, Sierra green where they have lime.
   Standalone: no CoreUI, nothing fetched from anywhere but this host. */

@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }

:root, [data-theme="night"] {
  --bg: #03161B;          /* the page: deeper than any tile */
  --tile: #0A262D;        /* Sierra --dark, a step down */
  --tile-2: #0F323A;
  --line: rgba(230, 239, 241, .09);
  --on: #E6EFF1; --on-dim: #8FA9AF; --on-faint: #5E7A81;
  --green: #9CCC59; --green-2: #B4DB7C; --green-ink: #0E2410;
  --light: #F2F5F6; --light-ink: #0B1E23; --light-dim: #4F6269; --mist: #E3EAEC;
  --blue: #2368AA; --sky: #86B9EC;
  --warn: #E3AE45; --crit: #EC7A71; --ok: #9CCC59;
  /* The same colours as channels, for the translucent uses, and the roles a theme sets.
     ⚠️ hub.css below this block names NO colour of its own except the notice tags:
     everything goes through these, so a theme is only a block of them. */
  --accent-rgb: 156,204,89; --green-ink-rgb: 14,36,16; --blue-rgb: 35,104,170; --glow2-rgb: 35,104,170; --on-rgb: 230,239,241; --bg-rgb: 3,22,27;
  --green-ink-2: #2B4417; --green-hi: #e8f3d6; --green-lo: #4c7420;
  --knob-1: #6d8a91; --knob-2: #183b44; --knob-3: #051419;
  --field: #F2F5F6; --field-ink: #0B1E23; --field-dim: #4F6269; --field-line: transparent;
  --pill-dark-bg: #0B1E23; --pill-dark-text: #E6EFF1; --accent-text: var(--green);
  --shadow-rgb: 0,0,0; --shadow-k: 1; --backdrop: rgba(2,12,15,.62);
  --r: 28px;              /* tile radius */
  --gap: 14px;
  --font: "Archivo", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

/* ---- themes (Juan, 2026-11-05: light, blue like sierramgt.com, ours, "y uno mas femenino") ----
   Chosen in Settings, per person; `night` is the one above. The ROLES stay: --tile is an
   ordinary card, --light the contrast card (the first link, the notices), --green the
   accent (the second link, the clock, the main buttons), whatever colour each one is. */
[data-theme="daylight"] {
  --warn: #B7790B; --crit: #C23B33; --ok: #2F8A55;
  --green: #9CCC59; --green-2: #B4DB7C; --green-ink: #0E2410; --green-ink-2: #2B4417; --accent-rgb: 156,204,89;
  --green-ink-rgb: 14,36,16; --green-hi: #e8f3d6; --green-lo: #4c7420; --blue: #2368AA; --blue-rgb: 35,104,170; --glow2-rgb: 35,104,170;
  --bg: #E6ECEE; --tile: #FFFFFF; --tile-2: #F0F4F5; --line: rgba(8,38,44,.10);
  --on: #0B1E23; --on-dim: #4F6269; --on-faint: #7D8D92; --on-rgb: 11,30,35; --bg-rgb: 230,236,238;
  --light: #08262C; --light-ink: #E6EFF1; --light-dim: #9FB6BC; --mist: rgba(230,239,241,.10);
  --field: #FFFFFF; --field-ink: #0B1E23; --field-dim: #4F6269; --field-line: rgba(8,38,44,.16);
  --pill-dark-bg: #08262C; --pill-dark-text: #E6EFF1; --sky: #2368AA; --accent-text: #4C7420;
  --knob-1: #8fb0b8; --knob-2: #2c5560; --knob-3: #0b2a31;
  --shadow-rgb: 8,38,44; --shadow-k: .35; --backdrop: rgba(8,38,44,.35);
  color-scheme: light;
}
/* Sierra Classic: the navy, the logo blue and the red of sierramgt.com, on white. */
[data-theme="classic"] {
  --warn: #B7790B; --crit: #C8102E; --ok: #2F8A55;
  --bg: #EDF1F8; --tile: #FFFFFF; --tile-2: #F2F5FB; --line: rgba(0,24,86,.12);
  --on: #001856; --on-dim: #4A5672; --on-faint: #8A93A8; --on-rgb: 0,24,86; --bg-rgb: 237,241,248;
  --green: #0265CC; --green-2: #116DFF; --green-ink: #FFFFFF; --green-ink-2: #D6E6FA; --accent-rgb: 2,101,204;
  --green-ink-rgb: 255,255,255; --green-hi: #cfe3fb; --green-lo: #013f80;
  --light: #001856; --light-ink: #FFFFFF; --light-dim: #A9B6D6; --mist: rgba(255,255,255,.12);
  --blue: #ED1C24; --blue-rgb: 237,28,36; --glow2-rgb: 2,101,204; --sky: #0265CC;
  --field: #FFFFFF; --field-ink: #001856; --field-dim: #4A5672; --field-line: rgba(0,24,86,.18);
  --pill-dark-bg: #001856; --pill-dark-text: #FFFFFF; --accent-text: #0265CC;
  --knob-1: #9db4dc; --knob-2: #1d3f8a; --knob-3: #001856;
  --shadow-rgb: 0,24,86; --shadow-k: .32; --backdrop: rgba(0,24,86,.35);
  color-scheme: light;
}
/* The site's red bar down the side of every card. */
body[data-theme="classic"] .hub-card.tone-dark { box-shadow: inset 4px 0 0 #ED1C24; }
body[data-theme="classic"] .hub-card.tone-dark:hover { box-shadow: inset 4px 0 0 #ED1C24, 0 26px 50px rgba(0,24,86,.16); }
body[data-theme="classic"] .typed-caret { background: #ED1C24; }
/* Blossom: rose and plum. */
[data-theme="blossom"] {
  --warn: #B7790B; --crit: #C23B33; --ok: #2F8A55;
  --bg: #F9EEF3; --tile: #FFFFFF; --tile-2: #FBEBF2; --line: rgba(122,48,86,.12);
  --on: #3B1F33; --on-dim: #7A5A6C; --on-faint: #A98C9C; --on-rgb: 59,31,51; --bg-rgb: 249,238,243;
  --green: #F28DB2; --green-2: #F6A8C5; --green-ink: #3A0F22; --green-ink-2: #6B2A48; --accent-rgb: 242,141,178;
  --green-ink-rgb: 58,15,34; --green-hi: #fde2ec; --green-lo: #c25683;
  --light: #5B2A5E; --light-ink: #FCEFF6; --light-dim: #D9B8D6; --mist: rgba(252,239,246,.12);
  --blue: #9B7FD4; --blue-rgb: 155,127,212; --glow2-rgb: 155,127,212; --sky: #9B7FD4;
  --field: #FFFFFF; --field-ink: #3B1F33; --field-dim: #7A5A6C; --field-line: rgba(122,48,86,.18);
  --pill-dark-bg: #5B2A5E; --pill-dark-text: #FCEFF6; --accent-text: #B4467A;
  --knob-1: #e9b3cf; --knob-2: #9c4f86; --knob-3: #4a1d43;
  --shadow-rgb: 91,42,94; --shadow-k: .3; --backdrop: rgba(91,42,94,.3);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.hub { min-height: 100vh; background: var(--bg); color: var(--on); font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; }
a { color: inherit; }
[hidden] { display: none !important; }
.hub-shell { max-width: 1320px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: var(--gap); min-height: 100vh; }
.hub-inline { margin: 0; }

.tile { position: relative; border-radius: var(--r); background: var(--tile); border: 1px solid var(--line); }
.tile-green { background: var(--green); color: var(--green-ink); border-color: transparent; }
.tile-light { background: var(--light); color: var(--light-ink); border-color: transparent; }

/* ---- pills and chips ------------------------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 10px 20px; font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: transform .15s, background .15s, border-color .15s; }
.pill:has(.knob) { padding: 8px 8px 8px 22px; }
.pill:hover, .pill:focus-visible { transform: translateY(-1px); }
.pill:focus-visible, .hub-card-tools button:focus-visible, .hub-nav a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.knob { width: 28px; height: 28px; border-radius: 50%; flex: none; transition: transform .25s;
  background: radial-gradient(circle at 34% 30%, var(--knob-1) 0%, var(--knob-2) 45%, var(--knob-3) 100%);
  box-shadow: inset 0 -2px 4px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))); }
.pill:hover .knob { transform: translateX(3px); }
.pill-green { background: var(--green); color: var(--green-ink); }
.pill-dark { background: var(--pill-dark-bg); color: var(--pill-dark-text); }
.pill-dark .knob { background: radial-gradient(circle at 34% 30%, var(--green-hi) 0%, var(--green) 45%, var(--green-lo) 100%); }
.pill-ghost { background: transparent; color: var(--on); border-color: rgba(var(--on-rgb),.22); }
.pill-ghost:hover { border-color: var(--on-dim); }
.pill-ghost[aria-pressed="true"] { background: var(--green); color: var(--green-ink); border-color: var(--green); }

.chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 14px; border-radius: 999px;
  font: 500 13px/1 var(--font); }
.chip-green { background: var(--green); color: var(--green-ink); }

/* ---- top bar ------------------------------------------------------------- */
.hub-top { display: flex; align-items: stretch; gap: var(--gap); }
.hub-logo { display: flex; align-items: center; gap: 12px; padding: 0 26px; text-decoration: none; border-radius: 22px;
  font: 600 20px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--on); }
/* Juan, 2026-11-05: the wordmark in capitals, SIERRAHUB. */
/* The mark: white on Sierra Night, Sierra blue on the light themes. */
.mark-on-light { display: none; }
[data-theme="daylight"] .mark-on-dark, [data-theme="classic"] .mark-on-dark, [data-theme="blossom"] .mark-on-dark { display: none; }
[data-theme="daylight"] .mark-on-light, [data-theme="classic"] .mark-on-light, [data-theme="blossom"] .mark-on-light { display: block; }
.hub-logo b { color: var(--accent-text); font-weight: 700; margin-left: 1px; }
.hub-nav { flex: 1; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 22px; overflow-x: auto; scrollbar-width: none; }
.hub-nav a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  color: var(--on-dim); font: 500 15px/1 var(--font); white-space: nowrap; transition: color .15s, background .15s; }
.hub-nav a i { font-size: 18px; }
.hub-nav a:hover { color: var(--on); background: var(--tile-2); }
.hub-who { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 22px; background: var(--tile); border: 1px solid var(--line); }

.hub-note { padding: 16px 22px; border-left: 5px solid var(--warn); }
.hub-note a { color: var(--accent-text); }

/* ---- hero: greeting + search, and the clock -------------------------------- */
.hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); }
.hero-main { display: flex; flex-direction: column; gap: 16px; padding: 34px 38px 38px; overflow: hidden;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(var(--accent-rgb),.13), transparent 70%),
    radial-gradient(420px 260px at 0% 120%, rgba(var(--glow2-rgb),.25), transparent 70%),
    var(--tile); }
.hub-greet { margin: 6px 0 0; font: 500 clamp(34px, 4.6vw, 58px)/1.02 var(--font); letter-spacing: -.035em; }
.hero-sub { margin: 0; max-width: 560px; color: var(--on-dim); font-size: 16px; }
.hub-search { display: flex; align-items: center; gap: 12px; margin-top: 12px; max-width: 720px; padding: 7px 7px 7px 22px;
  background: var(--field); border-radius: 999px; color: var(--field-ink); border: 1px solid var(--field-line); }
.hub-search > i { font-size: 20px; color: var(--field-dim); }
.hub-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--light-ink);
  font: 400 17px/1.2 var(--font); padding: 12px 0; }
.hub-search input::placeholder { color: var(--field-dim); opacity: .8; }
.hub-search:focus-within { box-shadow: 0 0 0 3px var(--green); }

.hero-clock { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 26px 30px 22px; min-height: 250px; }
.clock-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.clock-label { font: 500 15px/1 var(--font); }
.clock-zone { font-size: 14px; opacity: .72; }
.clock-face { display: flex; align-items: flex-end; gap: 10px; }
.hub-time { font: 500 clamp(64px, 7vw, 96px)/.9 var(--font); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.clock-side { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.hub-sec { font: 600 20px/1 var(--font); font-variant-numeric: tabular-nums; opacity: .62; }
.hub-sec.is-tick { animation: sec .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sec { from { transform: translateY(-7px); opacity: 0; } to { transform: none; opacity: .62; } }
.hub-ampm { font: 600 18px/1 var(--font); }

/* the weather, under the clock */
.clock-weather { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-top: 14px; border-top: 1px solid rgba(var(--green-ink-rgb),.16); }
.w-icon { font-size: 30px; }
.w-temp { font: 500 32px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.w-text { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.w-sky { font-weight: 600; }
.w-place { opacity: .72; }
.w-msg { font-size: 13.5px; }
.w-link { border: 0; background: none; padding: 0; color: inherit; font: 600 13.5px/1 var(--font); text-decoration: underline; cursor: pointer; }
.has-weather .w-icon { animation: pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.pill-ink { background: var(--green-ink); color: var(--green); padding: 11px 18px; font-size: 14px; }
.pill-ink:hover { filter: brightness(1.25); }

/* ---- the greeting types itself (Juan: "un poco de typed.js"), hub.js ---- */
.hub-greet { min-height: 1.02em; }
.typed-caret { display: inline-block; width: .06em; height: .9em; margin-left: .06em; vertical-align: -.06em;
  background: var(--green); border-radius: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.is-typing .typed-caret { animation: none; }

/* ---- reminders (Costpoint) -------------------------------------------------- */
.hub-remind { display: flex; align-items: center; gap: 18px; padding: 18px 20px 18px 22px; }
.hub-remind:not(.tile-green) { border-color: rgba(var(--accent-rgb),.4); }
.remind-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; font-size: 24px;
  background: var(--green); color: var(--green-ink); }
.tile-green .remind-icon { background: var(--green-ink); color: var(--green); }
.remind-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.remind-text b { font: 600 18px/1.25 var(--font); letter-spacing: -.01em; }
.remind-text span { color: var(--on-dim); font-size: 14.5px; }
.tile-green .remind-text span { color: var(--green-ink-2); }
.remind-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill-line { background: transparent; color: var(--green-ink); border-color: rgba(var(--green-ink-rgb),.35); }
.pill-line:hover { border-color: var(--green-ink); }
.hub-remind.is-in { animation: rise .5s cubic-bezier(.2,.8,.2,1) backwards; }

.hub-demo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-color: rgba(var(--accent-rgb),.4); }
.hub-demo > span:nth-child(2) { flex: 1; color: var(--on-dim); }

/* ---- the reminder as a modal (Juan: "un modal sexy... si lo cierras te deja la alerta") ---- */
.hub-modal { border: 0; padding: 0; background: transparent; color: var(--on); width: min(540px, calc(100% - 32px));
  max-width: none; overflow: visible; }
.hub-modal::backdrop { background: var(--backdrop); backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); animation: fade .35s ease-out; }
.hub-modal[open] .modal-card { animation: modal-in .55s cubic-bezier(.2,1.25,.35,1); }
.modal-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 36px 36px 28px; border-radius: 34px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(420px 220px at 100% 0%, rgba(var(--accent-rgb),.18), transparent 70%),
              radial-gradient(360px 240px at 0% 110%, rgba(var(--glow2-rgb),.28), transparent 70%), var(--tile);
  box-shadow: 0 40px 100px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))), 0 0 0 1px rgba(var(--accent-rgb),.08); }
.modal-card.tile-green { background: radial-gradient(420px 240px at 100% 0%, rgba(255,255,255,.35), transparent 70%), var(--green);
  color: var(--green-ink); border-color: transparent; }
.modal-x { position: absolute; top: 16px; right: 16px; margin: 0; }
.modal-x button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px;
  border: 1px solid var(--line); background: rgba(var(--bg-rgb),.5); color: inherit; transition: transform .2s, background .2s; }
.tile-green .modal-x button { background: rgba(var(--green-ink-rgb),.1); border-color: rgba(var(--green-ink-rgb),.2); }
.modal-x button:hover { transform: rotate(90deg); }
.modal-icon { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px;
  border-radius: 24px; background: var(--green); color: var(--green-ink); font-size: 32px; }
.tile-green .modal-icon { background: var(--green-ink); color: var(--green); }
.modal-icon i { position: relative; z-index: 1; animation: nudge 2.4s ease-in-out infinite; }
.modal-icon span { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--green); opacity: 0;
  animation: ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.tile-green .modal-icon span { border-color: var(--green-ink); }
.modal-icon span + span { animation-delay: 1.2s; }
.modal-eyebrow { font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.tile-green .modal-eyebrow { color: var(--green-ink); opacity: .7; }
.modal-card h2 { margin: 4px 0 2px; font: 500 32px/1.08 var(--font); letter-spacing: -.03em; }
.modal-card p { margin: 0; color: var(--on-dim); font-size: 15.5px; max-width: 430px; }
.tile-green p { color: var(--green-ink-2); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.modal-actions form { margin: 0; }
.modal-settings { margin-top: 16px; font-size: 13px; color: var(--on-faint); }
.tile-green .modal-settings { color: var(--green-ink-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 93% { transform: rotate(-5deg); } }

/* ---- settings ------------------------------------------------------------------ */
.pill-ghost.is-on { border-color: var(--accent-text); color: var(--accent-text); }
.hub-settings { padding: 30px 34px 34px; max-width: 860px; width: 100%; margin: 0 auto; }
.hub-settings h1 { margin: 10px 0 6px; font: 500 40px/1.05 var(--font); letter-spacing: -.03em; }
.hub-back { color: var(--on-dim); text-decoration: none; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.hub-back:hover { color: var(--accent-text); }
.hub-saved { color: var(--accent-text); font-weight: 600; margin: 14px 0 0; }
.hub-switches { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.switch-row { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px;
  background: var(--tile-2); border: 1px solid var(--line); cursor: pointer; }
.switch-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.switch-text b { font-weight: 600; font-size: 16px; }
.switch-text span { color: var(--on-dim); font-size: 14px; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--knob-1) 0%, var(--knob-2) 45%, var(--knob-3) 100%); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.switch-row input:checked + .switch { background: var(--green); border-color: var(--green); }
.switch-row input:checked + .switch::after { transform: translateX(22px);
  background: radial-gradient(circle at 34% 30%, #fff 0%, var(--green-hi) 45%, var(--green-lo) 100%); }
.switch-row input:focus-visible + .switch { outline: 3px solid var(--sky); outline-offset: 2px; }
.hub-switches .hub-editor-foot { margin-top: 8px; }
.settings-h { margin: 14px 0 2px; font: 500 20px/1.2 var(--font); letter-spacing: -.01em; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; cursor: pointer;
  background: var(--tile-2); border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.theme-opt:hover { transform: translateY(-2px); }
.theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-opt:has(input:checked) { border-color: var(--accent-text); }
.theme-opt:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
/* A swatch wears its own theme: the page, an ordinary tile, the accent, the contrast card. */
.theme-swatch { flex: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 6px;
  width: 76px; height: 64px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.theme-swatch i { border-radius: 6px; }
.sw-tile { background: var(--tile); border: 1px solid var(--line); grid-row: span 2; }
.sw-accent { background: var(--green); }
.sw-contrast { background: var(--light); }
.theme-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.theme-text b { font-weight: 600; }
.theme-text span { color: var(--on-dim); font-size: 13.5px; }
@media (max-width: 600px) { .theme-grid { grid-template-columns: 1fr; } }

/* ---- notices --------------------------------------------------------------- */
.hub-notices { padding: 22px 24px 14px; }
.hub-notices h2 { margin: 0 0 10px; font: 500 18px/1.2 var(--font); letter-spacing: -.01em; }
.hub-pin { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-decoration: none; }
.hub-pin-tag { flex: none; min-width: 92px; text-align: center; padding: 7px 14px; border-radius: 999px;
  font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; background: #F5E2B8; color: #6B4706; }
.hub-pin-emergency .hub-pin-tag { background: #F8D3CF; color: #8A1F17; }
.hub-pin-update .hub-pin-tag { background: #DDEFC6; color: #2E5113; }
.hub-pin-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.hub-pin-title { font-weight: 600; font-size: 16px; }
.hub-pin-sum { color: var(--light-dim); }
.hub-pin .arrow { background: var(--light-ink); color: var(--light); }
.hub-pin:hover .hub-pin-title { text-decoration: underline; }

/* ---- the arrow in a circle, and the notch that holds it ---------------------- */
.arrow { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  font-size: 17px; transition: transform .25s, background .2s; }
.notch .arrow i { transform: rotate(45deg); }
.notch { position: absolute; z-index: 2; top: -1px; right: -1px; width: 72px; height: 72px; padding: 0 0 10px 10px; display: grid; place-items: center;
  background: var(--bg); border-bottom-left-radius: 26px; pointer-events: none; }
.notch::before, .notch::after { content: ""; position: absolute; width: 22px; height: 22px;
  background: radial-gradient(circle at 0 100%, transparent 21.5px, var(--bg) 22px); }
.notch::before { top: 0; left: -22px; }
.notch::after { top: 72px; right: 0; }
.notch .arrow { background: var(--tile-2); color: var(--on); border: 1px solid var(--line); }

/* ---- the link cards -------------------------------------------------------- */
.hub-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.hub-card { position: relative; border-radius: var(--r); background: var(--tile); border: 1px solid var(--line); min-height: 210px;
  transition: transform .2s, border-color .2s; }
.hub-card.tone-light { background: var(--light); color: var(--light-ink); border-color: transparent; }
@media (min-width: 1101px) { .hub-card.is-wide { grid-column: span 2; } }
.hub-card.tone-green { background: var(--green); color: var(--green-ink); border-color: transparent; }
/* 🔑 Juan, 2026-11-05: a border round the card did not work ("quedo horrible": the card
   has its own shape, notch and all, and a line fights it). The hover lives INSIDE the
   card instead, so the shape is never outlined:
   - a soft light that follows the pointer across the card (--mx/--my, set by hub.js),
   - a slight tilt toward the pointer (--rx/--ry) and a lift,
   - the icon leans in, and the arrow in the notch turns to point out and lights up.
   The light is clipped by the card's own corners and hidden by the notch, so it takes
   the card's shape for free. */
.hub-card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --spot: rgba(var(--accent-rgb),.16);
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.hub-card.tone-light { --spot: rgba(var(--glow2-rgb),.13); }
.hub-card.tone-green { --spot: rgba(255,255,255,.38); }
.hub-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), var(--spot), transparent 70%);
  opacity: 0; transition: opacity .35s; }
.hub-card-link { position: relative; z-index: 1; }
.hub-card:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
  box-shadow: 0 26px 50px rgba(var(--shadow-rgb), calc(.45 * var(--shadow-k))); }
.hub-card:hover::before { opacity: 1; }
/* ⚠️ AND ON THE DARK CARDS ONLY, the line Juan liked there (2026-11-05: "el borde
   interno se ve genial en costpoint... se ve horrible [en] sierra portal y AI workspace").
   An SVG path hub.js draws from the card's size, just inside the edge and round the
   notch (`tracePath()`): it runs round once, the card beats twice, the line stays. The
   glow is a drop-shadow of the path, never a box-shadow, so it keeps the shape; the
   beat animates `scale`, which adds to the tilt instead of replacing it. */
.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; display: none; }
.hub-card.tone-dark .trace { display: block; }
.trace path { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .2s; }
.hub-card.tone-dark:hover .trace path { opacity: 1;
  animation: trace .6s cubic-bezier(.45,0,.25,1) forwards, beat .9s .6s ease-in-out forwards; }
.hub-card.tone-dark:hover { animation: heartbeat .9s .6s ease-in-out; }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes beat {
  0%   { stroke-width: 2.5; filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),.55)); }
  14%  { stroke-width: 4;   filter: drop-shadow(0 0 9px rgba(var(--accent-rgb),.55)); }
  28%  { stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(var(--accent-rgb),.55)); }
  44%  { stroke-width: 4;   filter: drop-shadow(0 0 9px rgba(var(--accent-rgb),.55)); }
  62%  { stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(var(--accent-rgb),.55)); }
  100% { stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.55)); }
}
@keyframes heartbeat { 0%, 28%, 62%, 100% { scale: 1; } 14%, 44% { scale: 1.022; } }
.hub-card.tone-dark:hover { border-color: transparent; }

.hub-card-icon { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.hub-card:hover .hub-card-icon { transform: translateY(-3px) rotate(-8deg) scale(1.08); }
.hub-card-title { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hub-card:hover .hub-card-title { transform: translateX(4px); }


.hub-card:hover .notch .arrow { transform: rotate(0); background: var(--green); color: var(--green-ink); border-color: var(--green); }
.hub-card.tone-green:hover .notch .arrow, .hub-card.tone-light:hover .notch .arrow { background: var(--light-ink); color: var(--on); border-color: var(--light-ink); }

.hub-card-link { display: flex; flex-direction: column; height: 100%; padding: 24px 26px; text-decoration: none; border-radius: var(--r); }
.hub-card-link:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.hub-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 24px;
  background: var(--tile-2); color: var(--accent-text); margin-bottom: auto; }
.tone-light .hub-card-icon { background: var(--green); color: var(--green-ink); }
.tone-green .hub-card-icon { background: var(--green-ink); color: var(--green); }
.is-custom .hub-card-icon { color: var(--sky); }
.hub-card-title { margin-top: 26px; font: 500 24px/1.1 var(--font); letter-spacing: -.025em; }
.is-wide .hub-card-title { font-size: 34px; }
.hub-card-blurb { margin-top: 6px; font-size: 14.5px; color: var(--on-dim); overflow: hidden; text-overflow: ellipsis; }
.tone-light .hub-card-blurb { color: var(--light-dim); }
.tone-green .hub-card-blurb { color: var(--green-ink-2); }
.hub-card-group { margin-top: 14px; padding: 5px 12px; font-size: 12px; background: rgba(var(--on-rgb),.07); color: var(--on-dim); }
.tone-light .hub-card-group { background: var(--mist); color: var(--light-dim); }
.tone-green .hub-card-group { background: rgba(var(--green-ink-rgb),.12); color: var(--green-ink); }

.hub-card.is-hidden { display: none; }
.hub-card-tools { display: none; position: absolute; top: 12px; right: 12px; gap: 6px; z-index: 3; }
.hub-card-tools button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--on); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.hub-card-tools button:hover { background: var(--green); color: var(--green-ink); border-color: var(--green); }

.hub-editing .hub-card-tools { display: flex; }
.hub-editing .notch { display: none; }
.hub-editing .hub-card, .hub-editing .hub-card:hover { transform: none; animation: none; box-shadow: none; }
.hub-editing .hub-card::before, .hub-editing .trace { display: none; }
.hub-editing .hub-card.is-hidden { display: block; opacity: .4; border-style: dashed; border-color: var(--on-faint); }
.hub-editing .hub-card-link { pointer-events: none; }

/* ---- editor ---------------------------------------------------------------- */
.hub-editor { padding: 24px 26px; }
.hub-editor h2 { margin: 0 0 14px; font: 500 20px/1.2 var(--font); letter-spacing: -.01em; }
.hub-add { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-add input { flex: 1 1 240px; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  color: var(--on); font: 400 15px/1.2 var(--font); }
.hub-add input::placeholder { color: var(--on-faint); }
.hub-add input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.hub-help { color: var(--on-dim); font-size: 14px; margin: 14px 0; }
.hub-editor-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hub-status { margin-right: auto; color: var(--on-dim); font-size: 14px; }
.hub-status.is-error { color: var(--crit); }

.hub-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 8px 8px 4px; color: var(--on-faint); font-size: 13px; }
.hub-foot a { color: var(--on-dim); }

/* ---- arriving: the dashboard assembles itself (Juan, after the Aaxion shot) ----
   Tiles rise in order, the greeting wipes in, the search bar opens, icons pop, the
   arrows turn into place. `backwards`, never `both`: once a tile has landed, hover
   owns its transform again. Under a second in all, because this is every new tab.
   ⚠️ Scoped to `.hub-arriving`, which hub.js removes once they have landed, so a card
   that is hovered, reordered or redrawn later never plays its entrance again. */
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes open { from { opacity: 0; transform: scaleX(.55); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes turn { from { opacity: 0; transform: rotate(-135deg) scale(.6); } to { opacity: 1; transform: none; } }
.hub-arriving .hub-top > * { animation: drop .5s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hub-top > :nth-child(2) { animation-delay: .05s; } .hub-arriving .hub-top > :nth-child(3) { animation-delay: .1s; }
.hub-arriving .hero-main { animation: rise .6s .08s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hero-clock { animation: rise .6s .16s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hub-search { transform-origin: left center; animation: open .6s .4s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .clock-face { animation: rise .5s .35s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hub-notices { animation: rise .6s .22s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hub-card { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
.hub-arriving .hub-card-icon { animation: pop .45s cubic-bezier(.3,1.6,.5,1) backwards; }
.hub-arriving .notch .arrow { animation: turn .55s cubic-bezier(.3,1.4,.5,1) backwards; }
.hub-arriving .hub-card:nth-child(1) { animation-delay: 0.26s; } .hub-arriving .hub-card:nth-child(1) .hub-card-icon { animation-delay: 0.50s; } .hub-arriving .hub-card:nth-child(1) .notch .arrow { animation-delay: 0.55s; }
.hub-arriving .hub-card:nth-child(2) { animation-delay: 0.31s; } .hub-arriving .hub-card:nth-child(2) .hub-card-icon { animation-delay: 0.55s; } .hub-arriving .hub-card:nth-child(2) .notch .arrow { animation-delay: 0.60s; }
.hub-arriving .hub-card:nth-child(3) { animation-delay: 0.36s; } .hub-arriving .hub-card:nth-child(3) .hub-card-icon { animation-delay: 0.60s; } .hub-arriving .hub-card:nth-child(3) .notch .arrow { animation-delay: 0.65s; }
.hub-arriving .hub-card:nth-child(4) { animation-delay: 0.41s; } .hub-arriving .hub-card:nth-child(4) .hub-card-icon { animation-delay: 0.65s; } .hub-arriving .hub-card:nth-child(4) .notch .arrow { animation-delay: 0.70s; }
.hub-arriving .hub-card:nth-child(5) { animation-delay: 0.46s; } .hub-arriving .hub-card:nth-child(5) .hub-card-icon { animation-delay: 0.70s; } .hub-arriving .hub-card:nth-child(5) .notch .arrow { animation-delay: 0.75s; }
.hub-arriving .hub-card:nth-child(6) { animation-delay: 0.51s; } .hub-arriving .hub-card:nth-child(6) .hub-card-icon { animation-delay: 0.75s; } .hub-arriving .hub-card:nth-child(6) .notch .arrow { animation-delay: 0.80s; }
.hub-arriving .hub-card:nth-child(7) { animation-delay: 0.56s; } .hub-arriving .hub-card:nth-child(7) .hub-card-icon { animation-delay: 0.80s; } .hub-arriving .hub-card:nth-child(7) .notch .arrow { animation-delay: 0.85s; }
.hub-arriving .hub-card:nth-child(8) { animation-delay: 0.61s; } .hub-arriving .hub-card:nth-child(8) .hub-card-icon { animation-delay: 0.85s; } .hub-arriving .hub-card:nth-child(8) .notch .arrow { animation-delay: 0.90s; }
.hub-arriving .hub-card:nth-child(9) { animation-delay: 0.66s; } .hub-arriving .hub-card:nth-child(9) .hub-card-icon { animation-delay: 0.90s; } .hub-arriving .hub-card:nth-child(9) .notch .arrow { animation-delay: 0.95s; }
.hub-arriving .hub-card:nth-child(10) { animation-delay: 0.71s; } .hub-arriving .hub-card:nth-child(10) .hub-card-icon { animation-delay: 0.95s; } .hub-arriving .hub-card:nth-child(10) .notch .arrow { animation-delay: 1.00s; }
.hub-arriving .hub-card:nth-child(11) { animation-delay: 0.76s; } .hub-arriving .hub-card:nth-child(11) .hub-card-icon { animation-delay: 1.00s; } .hub-arriving .hub-card:nth-child(11) .notch .arrow { animation-delay: 1.05s; }
.hub-arriving .hub-card:nth-child(12) { animation-delay: 0.81s; } .hub-arriving .hub-card:nth-child(12) .hub-card-icon { animation-delay: 1.05s; } .hub-arriving .hub-card:nth-child(12) .notch .arrow { animation-delay: 1.10s; }
.hub-arriving .hub-card:nth-child(13) { animation-delay: 0.86s; } .hub-arriving .hub-card:nth-child(13) .hub-card-icon { animation-delay: 1.10s; } .hub-arriving .hub-card:nth-child(13) .notch .arrow { animation-delay: 1.15s; }
.hub-arriving .hub-card:nth-child(14) { animation-delay: 0.91s; } .hub-arriving .hub-card:nth-child(14) .hub-card-icon { animation-delay: 1.15s; } .hub-arriving .hub-card:nth-child(14) .notch .arrow { animation-delay: 1.20s; }
.hub-arriving .hub-card:nth-child(15) { animation-delay: 0.96s; } .hub-arriving .hub-card:nth-child(15) .hub-card-icon { animation-delay: 1.20s; } .hub-arriving .hub-card:nth-child(15) .notch .arrow { animation-delay: 1.25s; }
.hub-arriving .hub-card:nth-child(16) { animation-delay: 1.01s; } .hub-arriving .hub-card:nth-child(16) .hub-card-icon { animation-delay: 1.25s; } .hub-arriving .hub-card:nth-child(16) .notch .arrow { animation-delay: 1.30s; }

/* ---- smaller screens ------------------------------------------------------- */
@media (max-width: 1100px) {
  .hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-nav a span { display: none; }
}
@media (max-width: 860px) {
  .hub-hero { grid-template-columns: 1fr; }
  .hero-clock { min-height: 0; }
  .hub-time { font-size: 56px; }
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hub-shell { padding: 12px; }
  .hub-top { flex-wrap: wrap; }
  .hub-nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .hub-logo { flex: 1; padding: 14px 18px; }
  .hub-who .pill-ghost span { display: none; }
  .hero-main { padding: 26px 22px; }
  .hub-search .pill span:first-child { display: none; }
  .hub-search .pill { padding: 7px; }
  .hub-cards { grid-template-columns: 1fr; }
  .hub-card { min-height: 0; }
  .hub-card-icon { margin-bottom: 0; }
  .hub-remind { flex-wrap: wrap; }
  .remind-actions { justify-content: flex-start; }
  .hub-greet { min-height: 2.04em; }
  .hub-pin { flex-wrap: wrap; gap: 10px; }
  .hub-pin .arrow { margin-left: auto; width: 38px; height: 38px; }
  .hub-pin-text { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hub-card:hover, .pill:hover { transform: none; }
  .hub-card.tone-dark:hover .trace path { stroke-dashoffset: 0; opacity: 1; }
}