/* ============================================================
   ai45.xyz — home / learning plan (index.html, assets/plan.js)
   Full-screen version of the app-frame design: the black bar and
   floating toolbar come from nav.js + app.css; this file styles
   the canvas: icon rail, lesson cards, the tilted continue card,
   stat tiles, events and the to-do block.
   ============================================================ */
.canvas { max-width: 1320px; margin: 0 auto; padding: 34px 32px 120px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.loading { grid-column: 1 / -1; padding: 120px 0; text-align: center; color: var(--faint); font-weight: 600; }
.canvas .e { margin-left: 6px; }

/* ---------- left icon rail ---------- */
.rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 96px; }
.rail__grp { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; padding: 6px; box-shadow: 0 1px 0 var(--line); }
.rail button, .rail a { width: 48px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); font-size: 18px; transition: background-color .2s, color .2s; }
.rail button:hover, .rail a:hover { background: var(--navy); color: var(--paper); }
.rail .is-on { background: var(--ink); color: #fff; }
.rail svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rail .bell { position: relative; }
.rail .bell i { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mint-2); color: var(--paper); font-style: normal; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }

/* ---------- main ---------- */
.main { min-width: 0; }
.main__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.main__h h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.main .search { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); height: 48px; padding: 0 16px; border-radius: 999px; background: var(--card); color: var(--faint); box-shadow: 0 1px 0 var(--line); }
.main .search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: var(--paper); background: none; }
.main .search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.stats { margin: 22px 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.stat { position: relative; padding: 16px 14px; border-radius: 20px; text-align: center; background: var(--sky); box-shadow: none; }
.stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.stat span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.stat--done { background: var(--mint); }
.stat--up { background: var(--card); }
.stat .e { position: absolute; top: -12px; right: 8px; font-size: 22px; }

.grid { position: relative; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; border-left: 2px dotted #BFE3C9; }
.lesson { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 20px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line); min-height: 196px; color: var(--paper); }
.lesson__ic { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #2E7D4F; }
.lesson__ic.is-lock { background: var(--navy); color: var(--muted); }
.lesson__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lesson h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; padding-right: 52px; }
.lesson p { font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 32ch; }
.lesson__f { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.lesson__acts { display: flex; align-items: center; gap: 6px; }
.lesson__acts a, .lesson__acts span.ok { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--paper); transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1); }
.lesson__acts a:hover { transform: translateY(-2px); }
.lesson__acts .ok { background: var(--ink); color: #fff; }
.lesson__acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feat { position: relative; z-index: 2; display: block; padding: 26px 26px 22px; border-radius: 30px; background: var(--lav); color: var(--paper); transform: rotate(-3deg); transform-origin: 50% 50%; box-shadow: 0 30px 50px -30px rgba(80, 40, 140, .45); transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1); }
.feat:hover { transform: rotate(-1deg) translateY(-2px); }
.feat h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; max-width: 10ch; }
.feat p { margin-top: 8px; font-size: 13.5px; color: #5B4A7A; max-width: 26ch; }
.feat__play { position: absolute; right: 26px; top: 26px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 10px rgba(255, 255, 255, .45); }
.feat__play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.feat__n { position: absolute; right: 36px; top: 10px; font-size: 22px; opacity: .8; }
.feat__f { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feat__time { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; }
.feat__time svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.feat__avs { display: flex; }
.feat__avs span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: #fff; margin-left: -8px; box-shadow: 0 0 0 2px var(--lav); }

/* ---------- to-dos ---------- */
.todo { margin-top: 26px; padding: 22px 24px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line); scroll-margin-top: 100px; }
.todo__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.todo__h h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.todo__h small { color: var(--muted); font-size: 13px; }
.todo form { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.todo input { height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--navy); font: inherit; color: var(--paper); outline: 0; }
.todo input[type="date"] { width: 160px; }
.todo input:focus { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.todo button[type="submit"] { height: 46px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; }
.todo__hint { margin-top: 8px; font-size: 12px; color: var(--faint); }
.todo__list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ti { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--navy); }
.ti.is-done { opacity: .55; }
.ti.is-done .ti__t { text-decoration: line-through; }
.ti__chk { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--faint); background: var(--card); display: grid; place-items: center; color: #fff; }
.ti.is-done .ti__chk { background: #2E7D4F; border-color: #2E7D4F; }
.ti__chk svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ti__t { font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti__t small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.ti__due { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--sun); color: #6B4B00; white-space: nowrap; }
.ti__due.is-late { background: var(--rose); color: #8A2A3C; }
.ti__due.is-today { background: var(--mint); color: #1E5C38; }
.ti__del { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); }
.ti__del:hover { background: var(--card); color: var(--paper); }
.todo__empty { margin-top: 12px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 13.5px; }

/* ---------- right column: events ---------- */
.events { position: sticky; top: 96px; }
.events h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.ev { margin-top: 14px; padding: 10px; border-radius: 22px; background: var(--sky); box-shadow: none; }
.ev--lav { background: var(--lav); } .ev--sun { background: var(--sun); } .ev--mint { background: var(--mint); } .ev--rose { background: var(--rose); }
.ev__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 10px; font-size: 13px; font-weight: 600; }
.ev__h span:last-child { font-weight: 500; color: rgba(0, 0, 0, .55); }
.ev__h svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; }
.ev__b { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.45; }
.ev__t { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; }
.ev__t svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ev--tilt { transform: rotate(-4deg) translateX(-14px); margin-top: 22px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35); }
.events .empty { margin-top: 14px; padding: 18px; border-radius: 22px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; background: none; }
.events .empty a { font-weight: 700; color: var(--paper); }
.events__more { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.events__more a { padding: 8px 12px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 0 var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }

@media (max-width: 1080px) { .canvas { grid-template-columns: 64px minmax(0, 1fr); } .events { grid-column: 2; position: static; } }
@media (max-width: 760px) {
  .canvas { grid-template-columns: 1fr; padding: 22px 16px 120px; gap: 18px; }
  .main, .events { grid-column: auto; min-width: 0; }
  .main__h h1 { font-size: 28px; }
  .rail { flex-direction: row; position: static; } .rail__grp { flex-direction: row; }
  .stats { max-width: none; }
  .grid { grid-template-columns: 1fr; } .grid::before { display: none; }
  .feat { transform: none; }
  .ev--tilt { transform: none; margin-top: 14px; }
  .todo form { grid-template-columns: 1fr; } .todo input[type="date"] { width: 100%; }
}

/* ---------- track switch (rail + a pill row on small screens) ---------- */
.rail__modes button { height: 48px; }
.rail .ibm { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.tracks { display: none; margin-top: 16px; gap: 8px; }
.track { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 0 var(--line); font-weight: 600; color: var(--muted); }
.track svg, .track .ibm { width: 16px; height: 16px; }
.track .ibm { font-family: Georgia, serif; font-weight: 700; font-size: 13px; width: auto; }
.track.is-on { background: var(--ink); color: #fff; }
.main__h h1 span { display: block; font-size: 17px; font-weight: 500; color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.hint { margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: var(--sun); font-size: 14px; }
.hint a { font-weight: 700; color: var(--paper); text-decoration: underline; }
.feat--sky { background: var(--sky); box-shadow: 0 30px 50px -30px rgba(20, 110, 130, .4); }
.feat--sky p { color: #24606B; } .feat--sky .feat__avs span { box-shadow: 0 0 0 2px var(--sky); }
.feat--sun { background: var(--sun); box-shadow: 0 30px 50px -30px rgba(140, 100, 0, .35); }
.feat--sun p { color: #6B4B00; } .feat--sun .feat__avs span { box-shadow: 0 0 0 2px var(--sun); }

/* hover: each card tints to its own pastel */
.lesson { transition: background-color .25s, transform .25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .25s; }
.grid .lesson:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35); }
.grid .lesson:nth-child(5n+1):hover { background: var(--rose); }
.grid .lesson:nth-child(5n+2):hover { background: var(--mint); }
.grid .lesson:nth-child(5n+3):hover { background: var(--sky); }
.grid .lesson:nth-child(5n+4):hover { background: var(--sun); }
.grid .lesson:nth-child(5n+5):hover { background: var(--lav); }
.grid .lesson:hover .lesson__ic { background: rgba(255, 255, 255, .8); }
.grid .lesson:hover .lesson__acts a { background: rgba(255, 255, 255, .85); }
@media (max-width: 760px) { .tracks { display: flex; } }

/* ---------- home canvas: the soft blue from the owner's sketch ---------- */
body.home { background: var(--soft, #EAF4FB); }
body.home .canvas { padding-top: 30px; }
body.home .rail__grp, body.home .lesson, body.home .main .search, body.home .todo, body.home .stat--up, body.home .aip { box-shadow: none; }

/* ---------- prompts for you (the tall white panel on the right) ---------- */
.aip { padding: 20px 18px 16px; border-radius: 26px; background: var(--card); }
.aip__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aip__h h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.aip__h a { font-size: 13px; font-weight: 700; color: var(--muted); }
.aip__sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.aip__i { margin-top: 12px; padding: 14px 14px 12px; border-radius: 18px; background: var(--navy); transition: background-color .25s; }
.aip__i:nth-child(odd):hover { background: var(--lav); } .aip__i:nth-child(even):hover { background: var(--mint); }
.aip__t { display: flex; gap: 6px; flex-wrap: wrap; }
.aip__tool, .aip__tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--card); color: var(--muted); }
.aip__tool.t-claude { background: var(--rose); color: #8A2A3C; } .aip__tool.t-gpt { background: var(--mint); color: #1E5C38; } .aip__tool.t-pplx { background: var(--sky); color: #24606B; } .aip__tool.t-gem { background: var(--lav); color: #5B2DA0; }
.aip__i b { display: block; margin-top: 8px; font-size: 14.5px; }
.aip__i p { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aip__f { margin-top: 10px; display: flex; gap: 8px; }
.aip__copy, .aip__f a { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; }
.aip__copy { background: var(--ink); color: #fff; }
.aip__f a { background: var(--card); color: var(--paper); }
.events__h { margin-top: 26px; }

/* Uni prep on the home page: deadlines and prep tasks from uni-core.js, icons instead of emoji */
.dot--uni { background: #E37239; }
.cal__tag--uni { background: #FFE1CF; }
.ev--uni { background: #FFE1CF; }
.u-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.feat__n.u-ic svg { width: 24px; height: 24px; }

/* ---------- Prompts track (full width, no right column) ---------- */
.canvas.is-wide { grid-template-columns: 64px minmax(0, 1fr); }
.canvas.is-wide > .events { display: none; }
.pm-for, .pm-lib { margin-top: 26px; }
.pm-why { font-size: 13px; font-weight: 600; color: var(--muted); }
.pm-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pm { padding: 16px 16px 14px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 0 var(--line); transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1), background-color .25s; }
.pm:hover { transform: translateY(-2px); }
.pm b { display: block; margin-top: 10px; font-size: 15px; letter-spacing: -0.01em; }
.pm p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pm.is-open p { display: block; -webkit-line-clamp: unset; }
.pm--big { background: var(--lav); } .pm-grid--for .pm--big:nth-child(2) { background: var(--mint); } .pm-grid--for .pm--big:nth-child(3) { background: var(--sky); }
.pm--big .aip__tool, .pm--big .aip__tag { background: rgba(255, 255, 255, .7); }
.pm--big p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.pm__blank { background: rgba(227, 114, 57, .16); color: #A3461A; border-radius: 5px; padding: 0 3px; font-weight: 700; }
.pm__more { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: none; }
.pm__more:hover { color: var(--paper); }
.pm-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chips button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; font-weight: 700; box-shadow: 0 1px 0 var(--line); transition: background-color .2s, color .2s; }
.pm-chips button small { font-size: 11px; opacity: .6; }
.pm-chips button:hover { color: var(--paper); }
.pm-chips button.is-on { background: var(--ink); color: #fff; }
.pm-chips--tools { margin-top: 8px; }
.pm-chips--tools i.aip__tool { width: 9px; height: 9px; padding: 0; border-radius: 50%; }
.pm-empty { margin-top: 14px; padding: 22px; border-radius: 22px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 14px; }
.pm-empty button { font-weight: 700; color: var(--paper); text-decoration: underline; }
@media (max-width: 1080px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .canvas.is-wide > .main { grid-column: 2; } }
@media (max-width: 760px) { .pm-grid { grid-template-columns: 1fr; } .canvas.is-wide { grid-template-columns: 1fr; } .canvas.is-wide > .main { grid-column: auto; } }

/* ---------- IB track: subjects are the only bento; the rest is type, lines and lists ---------- */
.bento { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.bento .bento__c { min-height: 168px; }
.bento .bento__c--hl { grid-column: span 2; }
.bento__next { font-size: 13px; color: var(--muted); }
.bento__next b { color: var(--paper); font-weight: 700; }
.bento__p { display: block; height: 4px; margin-top: 10px; border-radius: 9px; background: var(--navy); overflow: hidden; }
.bento__p i { display: block; height: 100%; border-radius: 9px; background: var(--orange); transition: width .6s cubic-bezier(0.32, 0.72, 0, 1); }
.subj:hover .bento__p { background: rgba(255, 255, 255, .7); }
.bento__m { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bento .subj--edit { min-height: 168px; }
/* continue: one big line of type with a hairline progress rule, no box */
.resume { display: block; margin-top: 34px; padding: 4px 0 0; color: var(--paper); }
.resume__k { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.resume__t { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.resume__t em { font-style: normal; color: var(--orange); }
.resume__go { flex: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1); }
.resume__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.resume:hover .resume__go { transform: translateX(4px); }
.resume__line { display: block; margin-top: 16px; height: 2px; background: var(--line); }
.resume__line i { display: block; height: 100%; background: var(--paper); }
.resume__m { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* this week (timeline) + guides (list), side by side, no cards */
.ibx { margin-top: 38px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.tl__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tl__h h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tl__h a { font-size: 13px; font-weight: 700; color: var(--muted); }
.tl__ses { font-size: 12px; font-weight: 700; color: #5B2DA0; }
.tl__list { list-style: none; margin: 0; padding: 6px 0 0; position: relative; }
.tl__list::before { content: ""; position: absolute; left: 66px; top: 14px; bottom: 14px; width: 1.5px; background: var(--line); }
.tl__list li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 10px 0; align-items: baseline; }
.tl__list li::before { content: ""; position: absolute; left: 62px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--faint); }
.tl__list li.is-today::before { background: var(--orange); box-shadow: none; }
.tl__list li.is-late::before { background: #E5484D; box-shadow: none; }
.tl__d { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tl__d small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.is-today .tl__d { color: var(--sand); } .is-late .tl__d { color: #C2364B; }
.tl__list a { font-size: 14.5px; font-weight: 600; color: var(--paper); }
.tl__list a small { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tl__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl__empty { padding: 14px 0; font-size: 14px; color: var(--muted); }
.tl__empty a { font-weight: 700; color: var(--paper); }
.gl__list { list-style: none; margin: 0; padding: 0; }
.gl__list li + li { border-top: 1px solid var(--line); }
.gl__list a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 0; color: var(--paper); }
.gl__tool { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--card); color: var(--muted); }
.gl__tool.t-claude { background: var(--rose); color: #8A2A3C; } .gl__tool.t-gpt { background: var(--mint); color: #1E5C38; } .gl__tool.t-pplx { background: var(--sky); color: #24606B; } .gl__tool.t-gem { background: var(--lav); color: #5B2DA0; }
.gl__t { min-width: 0; } .gl__t b { display: block; font-size: 14.5px; font-weight: 600; } .gl__t small { font-size: 12px; color: var(--muted); }
.gl__min { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl__list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } .bento .bento__c--hl { grid-column: auto; } .ibx { grid-template-columns: 1fr; gap: 28px; } .resume__go { width: 40px; height: 40px; } }

/* a picked subject we have no notes for yet: same tile, muted, not a link */
.bento .subj--soon { cursor: default; background: rgba(var(--fg-rgb, 21, 22, 26), .035); box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb, 21, 22, 26), .07); }
.bento .subj--soon:hover { transform: none; background: rgba(var(--fg-rgb, 21, 22, 26), .035); }
.subj--soon .subj__n { color: var(--muted); }
.subj__soon { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(var(--fg-rgb, 21, 22, 26), .07); color: var(--paper); font-size: 11.5px; font-weight: 700; }
/* the library shows 60 at a time (hundreds of prompts since 2026-10-28) */
.pm-moreall { display: block; margin: 16px auto 0; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--on-accent, #fff); font: inherit; font-size: 14px; font-weight: 700; }

/* ---------- Home hero (owner, 2026-10-26: mock-up A "one hero, one question"; dark in every theme) ---------- */
.main__h.is-hidden { display: none; }
.hh { position: relative; overflow: hidden; isolation: isolate; margin-bottom: 18px; padding: 44px 48px 30px; border-radius: 30px; background: #0E0F14; color: #fff; }
.hh__glow { position: absolute; inset: -25%; z-index: -1; background: radial-gradient(38% 50% at 18% 28%, rgba(227, 114, 57, .55), transparent 70%), radial-gradient(34% 46% at 78% 22%, rgba(185, 166, 255, .45), transparent 70%), radial-gradient(40% 50% at 58% 92%, rgba(142, 201, 255, .32), transparent 70%); filter: blur(40px); animation: hhDrift 16s ease-in-out infinite alternate; }
@keyframes hhDrift { to { transform: translate(5%, -4%) scale(1.07); } }
.hh__k { margin: 0; color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hh__h { margin: 10px 0 22px; max-width: 820px; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; color: #fff; }
.hh__h em { font-style: normal; background: linear-gradient(90deg, #E37239, #F2B36B, #B9A6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh__ask { display: flex; align-items: center; gap: 10px; max-width: 720px; padding: 7px 7px 7px 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: box-shadow .2s, background .2s; }
.hh__ask:focus-within { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(242, 179, 107, .8); }
.hh__spark { color: #F2B36B; font-size: 18px; }
.hh__ask input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 16.5px; color: #fff; }
.hh__ask input::placeholder { color: rgba(255, 255, 255, .55); }
.hh__ask button { border: 0; border-radius: 999px; padding: 11px 20px; background: #fff; color: #121318; font: inherit; font-weight: 800; cursor: pointer; }
.hh__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hh__chips button { border: 0; border-radius: 999px; padding: 7px 13px; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .82); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.hh__chips button:hover { background: rgba(255, 255, 255, .17); }
@media (max-width: 700px) { .hh { padding: 28px 20px 22px; border-radius: 24px; } .hh__ask { padding-left: 14px; } .hh__ask input { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .hh__glow { animation: none; } }