/* Inspiration: the library and its folders, then the channels, down the left, grouped by how they are watched; this week's outliers across the
   top; a grid of 9:16 cards; a side panel for one video. A badge takes its band: amber from 2x (a muted tag
   colour), marker red from 3x (the alert line), ink from 5x; under 2x or under the engagement floor it
   stays plain, and a card under the floor is dimmed. Marker red appears nowhere else but on a channel
   whose last refresh failed. */
.insp { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100%; min-height: 0; }
.insp.open { grid-template-columns: 248px minmax(0, 1fr) 420px; }

/* the rail */
.irail { background: var(--paper-warm); border-right: 1px solid var(--border); overflow-y: auto; padding: 10px 8px 16px; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.irailhd { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px 8px; }
.irailhd .label { flex: 1; }
.iwatchhd { justify-content: flex-start; gap: 8px; height: 30px; min-height: 0; margin-top: 12px; padding: 0 8px; border: 0; background: none; font-weight: 600; font-size: 12.5px; }
.iwatchhd:hover { background: var(--hover); }
.iwatchhd .ico { color: var(--text-3); }
.iwatchhd .count { margin-left: auto; }
.iwatchhd.on { background: var(--panel); box-shadow: 0 0 0 1px var(--border), inset 2px 0 0 var(--accent); }
.iwatchhd.on .ico { color: var(--text); }
.inichehd { justify-content: flex-start; border: 0; background: none; min-height: 0; padding: 8px 8px 4px; }
.inichehd:hover { background: none; }
.inichehd:hover .label, .inichehd.on .label { color: var(--text); }
.ichan { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 4px 0 8px; border-radius: var(--radius); cursor: pointer; color: var(--text-2); }
.ichan:hover { background: var(--hover); color: var(--text); }
.ichan.on { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--border), inset 2px 0 0 var(--accent); }
.ichan .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ichan .imore { visibility: hidden; }
.ichan:hover .imore, .ichan:focus-within .imore { visibility: visible; }
.ichav { position: relative; flex: none; display: inline-flex; }
.ichav > .logo { position: absolute; right: -4px; bottom: -3px; padding: 1px; border-radius: 50%; background: var(--panel); }
.ichav > .logo svg { width: 10px; height: 10px; }
.ichav.all { width: 22px; height: 22px; place-items: center; justify-content: center; align-items: center; color: var(--text-3); }
.iempty, .iadd { justify-content: flex-start; color: var(--text-3); }
.iadd { margin-top: 10px; }

/* the feed */
.imain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.icontrols { display: contents; }
.isearch { width: 220px; }
.inote { white-space: nowrap; }
.iscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 48px; display: flex; flex-direction: column; gap: 12px; transition: opacity 120ms; }
.iscroll > * { flex-shrink: 0; }
.iscroll.loading { opacity: .6; }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 14px; }
.icard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: border-color 120ms, box-shadow 120ms; }
.icard:hover { border-color: var(--border-strong); }
.icard.sel { border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.icard.ifloor .ithumb, .icard.ifloor .icap, .icard.ifloor .imeta { opacity: .45; }
.ifloornote { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--text-3); }
.ithumb { position: relative; aspect-ratio: 9 / 16; background: #111110; overflow: hidden; flex: none; }
.ithumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ibadge { position: absolute; left: 6px; top: 6px; font: 500 11px/1 var(--font-mono); padding: 4px 6px; border-radius: 3px; background: rgba(10, 10, 10, .72); color: #fff; }
.ibadge.amber { background: var(--chip-bg); color: var(--chip-fg); }
.ibadge.rose { background: var(--marker); color: #fff; }
.ibadge.ink { background: var(--ink); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.iplat { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .95); }
.icb { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.icap { font-size: 12.5px; font-weight: 500; line-height: 1.35; min-height: 2.7em; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.imeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 500 11px/1 var(--font-mono); color: var(--text-2); }
.imeta > span { display: inline-flex; align-items: center; gap: 3px; }
.iby { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); min-width: 0; }
.iby > span:not(.spacer):not(.istate) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.istate { display: inline-flex; color: var(--text-3); }

/* this week: the Monday digest, as a strip */
.iweek { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.iweekhd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iweekhd .ico { color: var(--text-3); }
.iweekhd .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iweekrow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; }
.iweekcard { flex: none; width: 92px; padding: 0; min-height: 0; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; font-weight: 400; }
.iweekcard:hover { background: var(--panel); border-color: var(--text-3); }
.iweekcard.sel { border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.ithumb.mini { aspect-ratio: 4 / 5; }
.ithumb.mini .ibadge { left: 4px; top: 4px; font-size: 10px; padding: 3px 4px; }
.ithumb.mini .iplat { display: none; }
.iwk { display: flex; align-items: center; gap: 4px; padding: 5px 6px; font-size: 11.5px; color: var(--text-2); min-width: 0; }
.iwk > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the panel */
.ipanel { display: none; }
.insp.open .ipanel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--border); }
.ipanel .dhd { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); flex: none; }
.iwho { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.iwho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipbody { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ipbody > * { flex-shrink: 0; }
.iphead { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
.iphead .ithumb, .isource .ithumb, .ibriefsrc .ithumb { border-radius: var(--radius); }
.iphead .btn { align-self: flex-start; }
.imetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.imetric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.imetric b { font: 600 15px/1.1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.icaption { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--text-2); max-height: 9.6em; overflow-y: auto; }
.itext { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.isec { display: flex; flex-direction: column; gap: 5px; }
.isec p { line-height: 1.55; }
.iideas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iideas li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.iideas .ico { margin-top: 3px; color: var(--text-3); }
.ispin svg { animation: spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ispin svg { animation: none; } }

/* the brief, before an idea goes on Planning */
.ibriefsrc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ibriefcap { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* the piece drawer's Source tab */
.isource { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }

/* the library: the rail's second header, saving by link, saves still in flight, notes, the extension panel */
.irailhd.inext { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.iext { margin-top: 2px; }
.ilinkbar { gap: 6px; }
.ilink { display: flex; gap: 8px; align-items: center; }
.ilinkin { flex: 1; width: auto; }
.icard.ipending { cursor: default; border-style: dashed; }
.iwait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; }
.isavefail { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.inote { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.inote p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.isteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.iaddr { margin-top: 6px; }
.iaddr input { flex: 1; min-width: 0; }

/* the niche map: a panel per niche, its creators as rows of numbers, why they fit and what to borrow */
.ihead { align-items: flex-start; }
.ihead .titles, .inichetext { flex: 1 1 320px; min-width: 0; }
.inichetext { gap: 6px; }
.ihead p { font-size: 13px; }
.iniche { overflow: hidden; }
.inichetop { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.inichetop h3 { font-size: 16px; }
.inichetop p { max-width: 72ch; line-height: 1.5; }
.inicheacts { flex: none; }
.icrow { display: grid; grid-template-columns: minmax(170px, 1.2fr) 64px 72px 44px minmax(0, 2fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.icreators > .icrow:first-child { border-top: 0; }
.icrow.watched { background: var(--paper-warm); }
.icwho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icname { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.icname:hover { text-decoration: underline; }
.icsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icnum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.icnum b { font: 600 14px/1.1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.icwhy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icwhy p { line-height: 1.45; }
.imechs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); }
.imechs li { display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.imechs .ico { margin-top: 1px; color: var(--text-3); }
.icact { justify-self: end; }
.iwatching { text-decoration: none; }
.inone { padding: 14px; }
.iwatchlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iwatchlist li { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Fits you: wide cards, the thumbnail beside the fit, why it fits and what to borrow */
.ifits { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ifit { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.ifit:hover { border-color: var(--border-strong); }
.ifit.sel { border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.ifit .ithumb { border-radius: var(--radius); }
.ifit .iplat { display: none; }   /* the by-line carries the platform's logo */
.ifitb { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ifitb p { line-height: 1.45; color: var(--text-2); }
.ifitb .icap { min-height: 0; }
.ifitscore { font: 600 11.5px/1 var(--font-mono); padding: 4px 7px; border-radius: 3px; background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.ifitbox { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius); background: var(--sunken); }
.ifitwait { flex: 1; min-width: 0; }
.ifunnel { flex-wrap: wrap; }

@media (max-width: 1180px) {
  .insp.open { grid-template-columns: 248px minmax(0, 1fr); }
  .insp.open .ipanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 60; box-shadow: -12px 0 40px rgba(10, 10, 10, .12); }
  .icrow { grid-template-columns: minmax(0, 1fr) 64px 72px 44px auto; }
  .icwhy { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 820px) {
  .insp, .insp.open { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .irail { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); padding: 6px 8px; gap: 4px; }
  .irailhd { padding: 0 4px; }
  .irailhd.inext { margin: 0 0 0 6px; padding-top: 0; border-top: 0; }
  .irailhd .label, .inichehd, .iadd, .iempty, .ichan .imore { display: none; }
  .ichan, .iwatchhd { flex: none; }
  .iwatchhd { margin: 0 0 0 6px; }
  .iwatchhd .count { margin-left: 2px; }
  .isearch { width: 100%; }
  .igrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .iweekcard { width: 80px; }
  .icrow { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .icwho { flex: 1 1 100%; }
  .icwhy { flex: 1 1 100%; }
  .icact { margin-left: auto; }
  .ifits { grid-template-columns: minmax(0, 1fr); }
  .ifit { grid-template-columns: 84px minmax(0, 1fr); }
}