/* mohamed.ai — M1 "Ledger": the writing page. Extends I's site.css (tokens, bar, primitives, lattice).
   A dense ruled ledger under the compressed reading bar: I's four topic cells as the filter bar, a mono
   search row, one walled hero cell, then one ruled row per piece, newest first, with
   month labels hanging in the left margin column. Hairline joints, no rounding, no dead space. */

:root { --mo-w: 132px; --cell-h: 88px; --ctl-h: 52px; }
@media (max-width: 1159px) { :root { --mo-w: 112px; --cell-h: 80px; } }

/* every topic-bearing element gets its colour as --tc (I's [data-topic] sets --accent for the page's roles) */
[data-topic="eldercare"]        { --tc: var(--c-eldercare); }
[data-topic="ai-agents"]        { --tc: var(--c-ai); }
[data-topic="company-building"] { --tc: var(--c-company); }
[data-topic="reading-list"]     { --tc: var(--c-reading, #b45309); --accent: var(--c-reading, #b45309); --accent-dark: var(--c-reading-dark, #f5b455); }

html.writing { scroll-padding-top: calc(var(--bar) + 16px); }
html.writing body { overflow-x: clip; }

/* ---------- the bar (compressed form) ---------- */
html.writing .bar { box-shadow: 0 1px 0 var(--line); }

/* ---------- swatches (shared by cells, hero, rows) ---------- */
.sw { background: var(--tc, var(--accent)); }
.sw.sw2 { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--tc); margin-left: 8px; margin-right: 0; }

/* ---------- the filter bar: four topic cells ---------- */
.filt { position: relative; z-index: 1; }
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: var(--cell-h);
  padding: 14px 20px 14px; text-decoration: none; color: #fff; min-width: 0;
  background: var(--tc);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.cell .n { color: rgba(255, 255, 255, .78); transition: color .5s var(--ease); white-space: nowrap; }
.cell .nm { font-family: var(--serif-name); font-size: clamp(24px, 2vw, 30px); line-height: 1; letter-spacing: -.006em; display: flex; align-items: flex-start; gap: 10px; text-wrap: balance; }
.cell .nm::before { content: ""; width: 10px; height: 10px; margin-top: .3em; background: var(--tc); flex: none; opacity: 0; width: 0; margin-right: -10px; transition: opacity .5s var(--ease), width .5s var(--ease), margin .5s var(--ease); }
.cell .x { position: absolute; right: 20px; top: 15px; color: rgba(255, 255, 255, .85); opacity: 0; transition: opacity .35s var(--ease); }
.cell:hover .nm { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cell:focus-visible { outline-offset: -3px; outline-color: #fff; }
/* when one topic is selected, the others go quiet: white cell, colour kept only as the swatch */
.filt.has-sel .cell:not(.sel) { background: var(--paper); color: var(--ink); }
.filt.has-sel .cell:not(.sel) .n { color: var(--ink-3); }
.filt.has-sel .cell:not(.sel) .nm::before { opacity: 1; width: 10px; margin-right: 0; }
.filt.has-sel .cell:not(.sel):focus-visible { outline-color: var(--tc); }
.filt.has-sel .cell.sel .x { opacity: 1; }
.filt.has-sel .cell:not(.sel):hover { color: var(--tc); }
/* a piece hidden by the search still counts in the cell; the count dims when it is 0 */
.cell .n.zero { opacity: .5; }
/* an empty topic keeps its cell but is inert: no link, no hover, no cursor, out of the tab order */
.cell.is-empty { cursor: default; }
.cell.is-empty:hover .nm { text-decoration: none; }
.filt.has-sel .cell.is-empty:hover { color: var(--ink); }

/* ---------- the search row ---------- */
.ctl { display: block; }
.srch { display: flex; align-items: center; height: var(--ctl-h); padding: 0 32px 0 20px; gap: 14px; margin: 0; min-width: 0; }
.srch .k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.srch:focus-within .k { color: #fff; background: var(--accent); box-shadow: none; }
.srch input {
  flex: 1; min-width: 0; height: 32px; border: 0; background: none; padding: 0; margin: 0; color: var(--ink);
  font-family: var(--mono); font-size: 13px; letter-spacing: .01em; -webkit-appearance: none; appearance: none; outline: none;
}
.srch input::placeholder { color: var(--ink-3); opacity: 1; }
.srch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.srch .cnt { white-space: nowrap; color: var(--ink-3); }
.srch .cnt b { color: var(--accent); }
.srch .clr { white-space: nowrap; color: var(--ink); }
.srch .clr:hover { color: var(--accent); }
html:not(.js) .srch .cnt { display: none; }

/* ---------- the hero cell ---------- */
.hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), visibility 0s linear .55s; }
.hero-in { min-height: 0; overflow: hidden; transition: opacity .4s var(--ease), transform .55s var(--ease); }
.hero-wrap.off { grid-template-rows: 0fr; visibility: hidden; }
.hero-wrap.off .hero-in { opacity: 0; transform: translateY(-12px); }
.hero { display: grid; grid-template-columns: var(--colL) 1fr; }
.hero-main { padding: 26px 32px 30px; display: flex; flex-direction: column; min-width: 0; }
.hero-main .eye { margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-main .eye .sw { vertical-align: 0; }
.hero-main h2 { font-family: var(--serif-name); font-size: clamp(40px, 4.2vw, 64px); line-height: .96; letter-spacing: -.01em; margin: 0 0 14px -.02em; text-wrap: balance; max-width: 14em; }
.hero-main h2 a { text-decoration: none; }
.hero-main h2 a:hover { color: var(--tc); }
.hero-main .dek { margin: 0; font-style: italic; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.hero-side { padding: 28px 32px 26px; display: flex; flex-direction: column; min-width: 0; }
.hero-side .open { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 34em; text-wrap: pretty; }
.hero-side .open::after { content: " …"; color: var(--ink-3); }
.hero-side .go { margin-top: auto; padding-top: 22px; color: var(--tc); text-decoration: none; align-self: flex-start; }
.hero-side .go:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .eye b { color: var(--ink); }
/* a short opening (placeholder essays): one column, the opening under the dek, so the row is only as tall as its text */
.hero-solo { grid-template-columns: minmax(0, 1fr); }
.hero-solo .hero-main { padding-bottom: 22px; }
.hero-solo .hero-side { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px 32px; padding: 18px 32px 22px; }
.hero-solo .hero-side .open { max-width: 40em; }
.hero-solo .hero-side .go { margin-top: 0; padding-top: 0; }
.hero .eye .tn { color: var(--tc); }
.hero .eye .tl { text-decoration: none; color: var(--tc); }
.hero .eye .tl:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .eye a.sw2 { vertical-align: 0; }
.hero.swap .hero-main, .hero.swap .hero-side { animation: rise .55s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the ledger ---------- */
.led-head { height: var(--bar); display: flex; align-items: center; padding: 0 32px 0 20px; white-space: nowrap; }
.led-head .sort { display: flex; gap: 22px; }
.led-head .sort a { text-decoration: none; color: var(--ink-3); transition: color .3s var(--ease); }
.led-head .sort a:hover { color: var(--ink); }
.led-head .sort a[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
html:not(.js) .led-head .sort a[data-sort="popular"] { display: none; }
/* resorting: rows FLIP from their old place to the new one */
.row.flip { transition: transform .55s var(--ease); }
/* under Most popular the margin carries the rank instead of the month */
.mo .rank { display: none; }
.rows[data-sort="popular"] .mo .full, .rows[data-sort="popular"] .mo .dit { display: none !important; }
.rows[data-sort="popular"] .mo .rank { display: inline; color: var(--ink-3); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease), visibility 0s linear .45s; }
.row-in { position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-columns: var(--mo-w) minmax(0, 1fr); background: var(--paper); box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.row.off { grid-template-rows: 0fr; visibility: hidden; }
.row.off .row-in { opacity: 0; transform: translateY(-10px); }
.row.pop .row-in { animation: rise .45s var(--ease) both; }

/* the margin column: the month hangs on the first row of each month; the rest carry a ditto that becomes the month on hover */
.mo { display: flex; align-items: flex-start; padding: 22px 20px 0; box-shadow: inset -1px 0 0 var(--line); color: var(--ink); white-space: nowrap; }
.mo .full { display: none; }
.mo .dit { display: inline; color: var(--ink-3); opacity: .55; font-size: 12px; line-height: 13px; letter-spacing: 0; }
.row.first-mo .mo .full { display: inline; }
.row.first-mo .mo .dit { display: none; }
.row:not(.first-mo):hover .mo .full { display: inline; color: var(--ink-3); }
.row:not(.first-mo):hover .mo .dit { display: none; }
.row.is-short .mo { padding-top: 18px; }

.body { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0; align-items: start; padding: 18px 32px 20px 20px; min-width: 0; }
/* the whole row is the piece's link: the title anchor's ::after covers the row; the swatch links float above it */
.tt .t { text-decoration: none; color: inherit; }
.tt .t::after { content: ""; position: absolute; inset: 0; }
.tt .t:focus-visible { outline: none; }
.tt .t:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }
.tp a { position: relative; z-index: 2; }
.tp a:hover { outline: 2px solid var(--tc); outline-offset: 2px; }
.tp a:focus-visible { outline-offset: 2px; }
.row.is-short .body { padding: 15px 32px 17px 20px; }
.tp { display: flex; align-items: center; gap: 0; padding-top: 8px; }
.tp .sw { margin: 0; width: 9px; height: 9px; }
.tp .sw.sw2 { margin-left: 3px; }
.tt { min-width: 0; }
.tt .t { display: inline; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; }
.tt .s { display: block; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); margin-top: 4px; max-width: 52em; text-wrap: pretty; }
.row.is-short .tt .t { font-weight: 440; font-style: italic; font-size: 21px; letter-spacing: 0; }
.tt .feat { display: inline-block; margin-left: 12px; vertical-align: 3px; color: var(--tc); }
.tt .snip { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.tt .snip[hidden] { display: none; }
.tt .snip .lab { color: var(--ink-3); margin-right: 8px; }
.row-in:hover .t { color: var(--tc); }
mark { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--tc, var(--accent)), inset 0 0 0 0 var(--tc); background: color-mix(in srgb, var(--tc, var(--accent)) 12%, transparent); padding: 0 1px; margin: 0 -1px; }
.hero mark { background: color-mix(in srgb, var(--tc) 14%, transparent); }

/* a reading row: kind mark · title + author · one line · STANCE why. Stance is a mono word in ink, never a colour. */
.row.is-read .tt .by { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); margin-top: 5px; }
.row.is-read .tt .by .kind { color: var(--ink); text-transform: uppercase; letter-spacing: .09em; }
.row.is-read .tt .s { margin-top: 5px; }
.st { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--ink-2); max-width: 52em; text-wrap: pretty; }
.st .stance { color: var(--ink); font-weight: 500; margin-right: 10px; }
.st .stance::after { content: "—"; color: var(--line); margin-left: 10px; }
.row.is-read .row-in:hover .t { color: var(--tc); }
.hero-read .hero-main .by { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hero-read .hero-side > .lab { margin-bottom: 12px; }
.hero-read .hero-side .take::after { content: none; }
.hero-read .hero-side .st { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; }

/* the empty state: one ruled row, in the ledger's own voice */
.row.empty .body { display: block; padding: 22px 32px 24px 20px; }
.row.empty .none { margin: 0; font-style: italic; font-size: 20px; line-height: 1.35; color: var(--ink); }
.row.empty .none q { quotes: "“" "”"; color: var(--accent); }
.row.empty .acts { margin: 12px 0 0; }
.row.empty .acts button[hidden] { display: none; }
.row.empty .acts .dot[hidden] { display: none; }
.row.empty .acts button { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.row.empty .acts button:hover { text-decoration: underline; text-underline-offset: 3px; }
.row.empty .mo .full { display: inline; color: var(--line); }
html:not(.js) .row.empty { display: none; }

/* ---------- tablets ---------- */
@media (max-width: 1159px) {
  .body { padding-right: 24px; }
  .hero-main, .hero-side { padding: 22px 24px 24px; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-main { padding: 22px 20px 20px; }
  .hero-side { padding: 18px 20px 20px; }
  .hero-solo .hero-side { flex-direction: column; align-items: flex-start; gap: 0; padding: 18px 20px 20px; }
  .hero-solo .hero-side .go { padding-top: 16px; }
  .hero-side .go { padding-top: 16px; }
  .ctl { grid-template-columns: 1fr; }
}

/* ---------- phones (390) ---------- */
@media (max-width: 599px) {
  :root { --cell-h: 74px; --mo-w: 0px; }
  .cells { grid-template-columns: 1fr 1fr; }
  .cell { padding: 12px 14px 12px; }
  .cell .nm { font-size: 22px; }
  .cell .x { right: 14px; top: 13px; }
  .srch { padding: 0 14px 0 16px; }
  .srch input { font-size: 14px; }
  .srch:not(.has-q) .cnt { display: none; }
  .hero-main h2 { font-size: 38px; }
  .led-head { padding: 0 16px; }
  .led-head .sort { gap: 14px; }
  /* the margin column becomes a month rule across the row; dittos go */
  .row-in { grid-template-columns: 1fr; }
  .mo { display: none; }
  .row.first-mo .mo { display: flex; padding: 12px 16px 6px; box-shadow: none; color: var(--ink-3); }
  .row.first-mo .mo .full { color: var(--ink); }
  .body { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 12px 16px 14px; }
  .row.is-short .body { padding: 12px 16px 14px; }
  .tp { flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 7px; }
  .tp .sw.sw2 { margin-left: 0; }
  .tt .t { font-size: 18px; }
  .row.is-short .tt .t { font-size: 18px; }
  .tt .s { font-size: 14.5px; }
  .tt .feat { margin-left: 10px; vertical-align: 2px; }
  .row.empty .body { padding: 18px 16px 20px; }
  .row.empty .mo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wrap, .hero-in, .row, .row-in, .cell { transition: none !important; }
  .row.pop .row-in, .hero.swap .hero-main, .hero.swap .hero-side { animation: none !important; }
}