/* THE RIGHT PANEL, IN HER HAND (23 Sep 2026, SEP23_UI) - source frontend/_ui_sep23/ui.css.
   Loaded last (UI_START / UI_END after WORK_END), so it speaks over the older layers.
   Her tokens only: paper, ink, lavender; Fraunces for titles, Caveat for her words. */

/* ── her drawings keep their own size: the column's "every svg is 100% wide"
      rule is for charts, not for a 19px mark ─────────────────────────────── */
html[data-ia="threads"] #side svg[data-uig],
html[data-ia="threads"] #stage svg[data-uig]{max-width:none!important;height:auto;overflow:visible;flex:none}
/* the ring round the face was squeezed to the face's own width by the same rule -
   drawn for 84px, shown at 70, so it sat off to one side */
html[data-ia="threads"] #side #sn svg.sd-rink{max-width:none!important}

/* SEP23_UI3 (Samuel: "remove this"): no greeting line over the new page - her
   work starts at the top. The node stays (the standup and the desk anchor under
   it), it is only not drawn. */
html[data-ia="threads"] #day .newpage .np-line{display:none!important}

/* ══ THE TABS: her marks, her type ══════════════════════════════════════════ */
html[data-ia="threads"] #sd-tabs{gap:2px!important;padding:14px 12px 0!important;align-items:flex-end}
html[data-ia="threads"] #sd-tabs .sd-tab{display:inline-flex!important;align-items:center;gap:7px;
  font-family:var(--serif)!important;font-size:15px!important;font-weight:600!important;
  letter-spacing:-.01em!important;color:var(--mute,#8C887E)!important;
  padding:8px 10px 12px!important;line-height:1.1}
html[data-ia="threads"] #sd-tabs .sd-tab .sdt-g{width:19px!important;height:19px!important;
  color:var(--mute,#8C887E);transition:color .15s ease,transform .25s ease}
html[data-ia="threads"] #sd-tabs .sd-tab:hover{color:var(--ink-soft,#4a463f)!important}
html[data-ia="threads"] #sd-tabs .sd-tab:hover .sdt-g{color:var(--ink-soft,#4a463f);transform:rotate(-5deg) scale(1.05)}
html[data-ia="threads"] #sd-tabs .sd-tab.on{color:var(--ink,#191510)!important}
html[data-ia="threads"] #sd-tabs .sd-tab.on .sdt-g{color:var(--lav,#AF69EE)}
/* the flat bar under the open tab becomes her pen's stroke */
html[data-ia="threads"] #sd-tabs .sd-tab.on:after{left:6px!important;right:6px!important;bottom:-1px!important;
  height:7px!important;border-radius:0!important;background:var(--lav,#AF69EE)!important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 5.2 C 16 2.6, 30 6.6, 47 4.4 S 80 2.8, 98 4.6' stroke='black' stroke-width='2.3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 5.2 C 16 2.6, 30 6.6, 47 4.4 S 80 2.8, 98 4.6' stroke='black' stroke-width='2.3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat}
html[data-ia="threads"] #sd-tabs .sd-tab:focus-visible .sdt-l{text-decoration:underline;text-decoration-color:var(--lav);text-underline-offset:4px}
/* the calendar's count: her lavender dot with the number in it */
html[data-ia="threads"] #sd-tabs .dc-tabn{display:inline-flex!important;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin:0 0 0 1px!important;border-radius:9px;
  background:var(--lav,#AF69EE)!important;color:#fff!important;font-family:var(--sans)!important;
  font-size:10.5px!important;font-weight:700!important;line-height:1;position:static!important;opacity:1!important}
/* full page and fold: two quiet marks at the end of the row */
html[data-ia="threads"] #sd-tabs .sd-max{margin-left:auto}
.sd-fold{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:0 0 4px 2px;padding:0;border:none;background:transparent;cursor:pointer;
  color:var(--mute,#8C887E);border-radius:8px}
.sd-fold:hover{color:var(--lav,#AF69EE);background:var(--lav-16,rgba(175,105,238,.16))}
.sd-fold:focus{outline:none}
.sd-fold svg{width:20px!important;height:20px!important}
html.ia-sd-max .sd-fold{display:none!important}
/* the full-page mark, drawn like the fold (SEP23_UI2) */
html[data-ia="threads"] #sd-tabs .sd-max{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:0 0 4px auto!important;padding:0!important;border-radius:8px;
  color:var(--mute,#8C887E);transition:color .15s ease,background .15s ease}
html[data-ia="threads"] #sd-tabs .sd-max:hover{color:var(--lav,#AF69EE);background:var(--lav-16,rgba(175,105,238,.16))}
html[data-ia="threads"] #sd-tabs .sd-max>span{align-items:center;justify-content:center}
html[data-ia="threads"] #sd-tabs .sd-max .sdm-open{display:inline-flex}
html.ia-sd-max[data-ia="threads"] #sd-tabs .sd-max .sdm-open{display:none}
html.ia-sd-max[data-ia="threads"] #sd-tabs .sd-max .sdm-close{display:inline-flex}
html[data-ia="threads"] #sd-tabs .sd-max svg{width:19px!important;height:19px!important}
.sd-fold{transition:color .15s ease,background .15s ease,box-shadow .2s ease}
/* SEP23_UI2: pulled past the floor, the panel stops - and the fold mark lights up
   in her lavender so he sees where hiding it lives */
html.sd-fold-hint .sd-fold{color:#fff!important;background:var(--lav,#AF69EE)!important;
  box-shadow:0 0 0 4px var(--lav-16,rgba(175,105,238,.2));animation:sdFoldPulse 1s ease-in-out infinite}
html.sd-fold-hint #sd-grip:after{opacity:.95!important;background:var(--lav,#AF69EE)!important}
@keyframes sdFoldPulse{50%{box-shadow:0 0 0 8px rgba(175,105,238,.08);transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){html.sd-fold-hint .sd-fold{animation:none}}
@media (max-width:1240px){ .sd-fold{display:none!important} }

/* SEP23_UI2: the row always fits the panel - at its narrowest the fold and the
   full-page marks were pushed off the edge (the row scrolled). Tighter first,
   then the tabs that are not open keep only their mark (the name is its title) */
html[data-ia="threads"] #side{container-type:inline-size;container-name:sdside}
@container sdside (max-width:600px){
  html[data-ia="threads"] #sd-tabs{padding:14px 8px 0!important}
  html[data-ia="threads"] #sd-tabs .sd-tab{padding:8px 7px 12px!important;font-size:14px!important;gap:6px}
}
@container sdside (max-width:520px){
  html[data-ia="threads"] #sd-tabs .sd-tab:not(.on) .sdt-l{display:none}
  html[data-ia="threads"] #sd-tabs .sd-tab:not(.on){padding:8px 9px 12px!important}
}

/* ══ THE PANEL FOLDS AWAY, LIKE THE CHATS DO ════════════════════════════════ */
html[data-ia="threads"].ia-sd-off #side,
html[data-ia="threads"].ia-sd-off #sd-grip{display:none!important}
#sd-unfold{display:none}
html[data-ia="threads"].ia-sd-off:not(.ia-sd-max) #sd-unfold{display:flex;position:absolute;right:12px;top:12px;z-index:40;
  width:38px;height:38px;align-items:center;justify-content:center;padding:0;border:none;border-radius:10px;
  background:transparent;color:var(--mute,#8C887E);cursor:pointer}
html[data-ia="threads"] #sd-unfold:hover{color:var(--lav,#AF69EE);background:var(--lav-16,rgba(175,105,238,.16))}
html[data-ia="threads"] #sd-unfold:focus{outline:none}
html[data-ia="threads"] #sd-unfold svg{width:23px!important;height:23px!important}
@media (max-width:1240px){ html[data-ia="threads"] #sd-unfold{display:none!important} }

/* ══ UP AND DOWN: a scrollbar he can take hold of, and the way back up ═════ */
html[data-ia="threads"] #sd-body>#dash,
html[data-ia="threads"] #sd-body>#calendar,
html[data-ia="threads"] #sd-body>#docs,
html[data-ia="threads"] #sd-body>#memory,
html[data-ia="threads"] #sd-body>#shelf{scrollbar-width:thin!important;
  scrollbar-color:rgba(140,136,126,.5) transparent!important}
html[data-theme="dark"][data-ia="threads"] #sd-body>#dash,
html[data-theme="dark"][data-ia="threads"] #sd-body>#calendar,
html[data-theme="dark"][data-ia="threads"] #sd-body>#docs,
html[data-theme="dark"][data-ia="threads"] #sd-body>#memory,
html[data-theme="dark"][data-ia="threads"] #sd-body>#shelf{scrollbar-color:rgba(236,232,224,.32) transparent!important}
#sd-up{position:absolute;right:20px;bottom:20px;z-index:8;width:42px;height:42px;padding:0;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--lav,#AF69EE);
  background:var(--paper,#F5F3EF);box-shadow:0 4px 16px rgba(25,21,15,.14);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
[data-theme="dark"] #sd-up{background:var(--surface,#1E1726);box-shadow:0 4px 16px rgba(0,0,0,.45)}
#sd-up.on{opacity:1;pointer-events:auto;transform:none}
#sd-up:hover{transform:translateY(-2px)}
#sd-up:focus{outline:none}
#sd-up svg{width:30px!important;height:30px!important}

/* ══ THE RAIL CARRIES THE CHAPTERS, so the row that stuck steps aside ══════ */
#dash.axr-on #sn .sd-nav{display:none!important}
#dash.axr-on #sn .sd-nav+.sd-chap,#dash.axr-on #sn .sd-nav+.sd-top{margin-top:34px}

/* ══ FULL PAGE: a page you can read, not a wall ═════════════════════════════ */
html[data-ia="threads"].ia-sd-max #side .cal-wrap.ax{max-width:1120px!important}
html[data-ia="threads"].ia-sd-max #sd-tabs{padding-left:max(28px,calc(50% - 560px))!important;
  padding-right:max(28px,calc(50% - 560px))!important}
html[data-ia="threads"].ia-sd-max #side .cal-wrap:not(.ax),
html[data-ia="threads"].ia-sd-max #side .mem-wrap{max-width:980px!important}

/* ══ THE TITLES ═════════════════════════════════════════════════════════════ */
#sn .sd-h2{display:flex;align-items:center;gap:11px}
#sn .sd-h2 .sd-hg{width:32px!important;height:32px!important;padding:6px;border-radius:50%;
  color:var(--lav,#AF69EE);background:color-mix(in srgb,var(--lav,#AF69EE) 11%,transparent)}
#sn .sd-h2 .sd-ht{min-width:0}
#sn .sd-chap{margin-top:46px}
#sn .sd-chap>.sd-h2{position:relative;font-size:25px;letter-spacing:-.02em;margin:0 0 20px;padding:0 0 12px}
#sn .sd-chap>.sd-h2:after{content:"";position:absolute;left:43px;right:0;bottom:0;height:7px;
  background:var(--lav-16,rgba(175,105,238,.22));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'><path d='M2 4.6 C 60 2.8, 120 6, 200 4.2 S 330 3, 398 4.8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'><path d='M2 4.6 C 60 2.8, 120 6, 200 4.2 S 330 3, 398 4.8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat}
#sn .sd-chap>.sd-h2 .sd-chn{margin-left:auto;font-family:var(--pen,'Caveat',cursive);font-style:normal;
  font-size:18px;font-weight:500;color:var(--mute,#8C887E);letter-spacing:0;white-space:nowrap}
#sn .sd-sec>.sd-sech>.sd-h2{font-size:24px}
#sn .sd-top>.sd-sech{margin-bottom:18px}
/* a card's title reads as the card's, not as another chapter */
#sn .sd-chd h3{font-size:17.5px}
@container sdcol (max-width:520px){
  #sn .sd-chap>.sd-h2{font-size:22px}
  #sn .sd-h2 .sd-hg{width:28px!important;height:28px!important;padding:5px}
  #sn .sd-chap>.sd-h2:after{left:39px}
}

/* ══ THE ACCOUNT: the website under the bio ═════════════════════════════════ */
#sn .sd-plink{display:inline-flex;align-items:center;gap:6px;margin-top:8px;max-width:100%;
  font-size:13.5px;font-weight:600;color:var(--lav,#AF69EE);text-decoration:none;min-width:0}
#sn .sd-plink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px dashed currentColor;line-height:1.3}
#sn .sd-plink:hover span{border-bottom-style:solid}
html[data-ia="threads"] #side #sn .sd-plink svg,#sn .sd-plink svg{width:14px!important;height:14px!important;max-width:none!important;
  flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ══ WHILE SHE READS: the page's shape, not a blank sheet ═══════════════════ */
.uiw{padding:4px 0 0}
.uiw-l{display:flex;align-items:center;gap:10px;font-family:var(--pen,'Caveat',cursive);font-size:20px;color:var(--mute,#8C887E);margin:8px 0 22px}
.uiw-pen{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid var(--lav,#AF69EE);
  border-right-color:transparent;animation:uiwspin .9s linear infinite;flex:none}
.uiw-p{display:flex;gap:18px;align-items:center}
.uiw-av{width:74px;height:74px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--lav-16,rgba(175,105,238,.2))}
.uiw-ls{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.uiw-b{height:11px;border-radius:6px}
.uiw-fr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;max-width:640px}
.uiw-f{aspect-ratio:9/16;border-radius:10px}
.uiw-av,.uiw-b,.uiw-f{background:var(--thumb,rgba(140,136,126,.16));animation:uiwpulse 1.6s ease-in-out infinite}
.uiw-f:nth-child(2){animation-delay:.2s}.uiw-f:nth-child(3){animation-delay:.4s}
@keyframes uiwspin{to{transform:rotate(360deg)}}
@keyframes uiwpulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.uiw-pen,.uiw-av,.uiw-b,.uiw-f{animation:none}}