/* Studio, the layer over 04-studio.css (31-studio-layer.js): the approved cleanup of tab A. Entries leave the frame for a
   drawer on the left; Analysis and Notes get a drawer on the right; the journal takes the middle; the date is the title;
   Feeling and Topics sit on its line; the day's chapters are bars in a strip. The surface applies while the Studio is open
   (body.studio-on, set by 30-studio.js). Light only for now: the surface colors need tokens before dark can track it. */
#section-studio { --ac-rail: 44px; }

/* ── the frame: rail, Questions, journal, the right column, rail ── */
#section-studio .ob-ws > .ob-left, #section-studio .ob-ws > .ob-gut-fixed { display: none; }

/* ── the tabs row: Write and Board on the left, Layout on the right ── */
#section-studio .ob-tabsrow { align-items: center; padding: 2px 4px 12px 6px; }
#section-studio .ob-tab { font-size: 19px; padding: 4px 0 5px; letter-spacing: 0; }
#section-studio .ob-tab.on { border-color: var(--purple); }
#section-studio .ob-subtabs { padding-left: 18px; border-left: 1px solid var(--border); }
#section-studio .ob-sub-tab { font-size: 16px; }
.ac-layout { margin-left: auto; position: relative; }
.ac-layout > button, .ac-menu button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); font-family: var(--sans); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ac-layout > button .bi { color: var(--purple); font-size: 12px; }
.ac-layout > button:hover, .ac-menu button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); }
.ac-menu { display: none; position: absolute; right: 0; top: 38px; z-index: 40; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent); min-width: 190px; }
.ac-menu button { width: 100%; justify-content: flex-start; border-color: transparent; }
.ac-layout.open .ac-menu { display: flex; }

/* ── the rails: an icon with its word ── */
#section-studio { --ac-rail: 64px; }
.ac-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; min-height: 0; }
.ac-rail button { position: relative; width: 56px; padding: 9px 0 8px; border: 0; background: none; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .01em; transition: color .2s ease, background .2s ease; }
.ac-rail button .bi { font-size: 16px; }
.ac-rail button:hover, .ac-rail button.on { color: var(--purple); background: color-mix(in srgb, var(--purple) 9%, transparent); }
.ac-rail button[data-ac-count]::before { content: attr(data-ac-count); position: absolute; top: 4px; right: 8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--purple); color: var(--bg); font-family: var(--sans); font-size: 9.5px; font-weight: 500; display: grid; place-items: center; }
.ac-drawer { position: absolute; top: 0; bottom: 0; width: 320px; z-index: 30; background: var(--bg); display: flex; flex-direction: column; min-height: 0; transition: transform .38s cubic-bezier(.22,.8,.24,1), opacity .3s ease; opacity: 0; pointer-events: none; }
.ac-drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.ac-drawer .ob-left { display: flex !important; flex-direction: column; min-height: 0; flex: 1; }
.ac-drawer .ob-phrow { padding-top: 16px; }
.ac-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 10px 18px; }
.ac-dhead .ob-ph { font-size: 21px; }
.ac-dtabs { display: flex; gap: 18px; padding: 0 18px 8px; border-bottom: 1px solid var(--border-light); }
.ac-dtabs button { border: 0; background: none; padding: 4px 0 6px; font-family: var(--serif); font-size: 17px; color: var(--muted); border-bottom: 1.5px solid transparent; cursor: pointer; }
.ac-dtabs button.on { color: var(--ink); border-color: var(--purple); }
.ac-dbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 20px; }
.ac-dbody[hidden] { display: none; }
.ac-dbody .ob-msg.result h4 { display: none; }
.ac-dbody .ob-tool-p .meta, .ac-dbody .meta { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); margin: 0 0 10px; }
.ac-dbody .ob-obs { border-left: 2px solid var(--purple); padding: 2px 0 2px 14px; margin: 0 0 14px; }
.ac-dbody .ob-obs p { margin: 0 0 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.ac-dbody .ob-doors { display: flex; gap: 6px; flex-wrap: wrap; }
.ac-dbody .ob-acts { margin-top: 10px; }
.ac-start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 10px; }
.ac-start .bi { font-size: 24px; color: var(--purple); }
.ac-start h4 { margin: 0; font: 500 20px var(--serif); color: var(--ink); }
.ac-start p { margin: 0 0 6px; font: 400 15.5px/1.45 var(--serif); color: var(--muted); }
.ac-note { display: block; width: 100%; text-align: left; padding: 10px 12px 11px; margin: 0 0 8px; border: 1px solid var(--border-light); border-left: 2px solid var(--purple); background: color-mix(in srgb, var(--ink) 1.5%, var(--bg)); cursor: pointer; font-family: var(--serif); }
.ac-note:hover, .ac-note.on { border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); border-left-color: var(--purple); background: var(--bg); }
.ac-note .on { display: block; font-size: 14px; font-style: italic; color: var(--muted); margin-bottom: 3px; }
.ac-note .on mark { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--ink-soft); font-style: normal; padding: 0 2px; }
.ac-note .tx { display: block; font-size: 16.5px; line-height: 1.4; color: var(--ink); }
.ac-note .w { display: block; font-size: 13px; font-style: italic; color: var(--whisper); margin-top: 4px; }
mark.ac-mark { background: color-mix(in srgb, var(--purple) 12%, transparent); border-bottom: 1.5px solid var(--purple); color: inherit; padding: 0 1px; cursor: pointer; }
mark.ac-mark.on { background: color-mix(in srgb, var(--purple) 24%, transparent); }

/* ── the journal: the main module ── */
#section-studio .ob-center { background: var(--bg); display: flex; flex-direction: column; transition: border-color .3s ease; }
#section-studio .ob-page { max-width: none; padding: 26px 36px 100px; }
#section-studio .ob-title { display: none !important; }
.ac-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin: 0; padding: 0; border: 0; min-height: 36px; }
.ac-headl { flex: 1 1 auto; } .ac-headr { flex: 0 0 auto; }
.ac-headl { min-width: 0; } .ac-headr { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ac-switch { position: relative; }
.ac-switch > button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font-family: var(--serif); font-size: 15px; color: var(--muted); cursor: pointer; }
.ac-switch > button .bi { font-size: 10px; color: var(--purple); }
.ac-switch > button:hover { color: var(--ink); }
.ac-switch .ac-menu { right: 0; left: auto; top: 30px; }
.ac-date { font-family: var(--serif); }
.ac-day { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; }
.ac-datetxt { display: block; white-space: nowrap; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); background: none; border: 0; border-bottom: 1px dashed transparent; padding: 2px 4px; cursor: pointer; transition: border-color .2s ease; }
.ac-datetxt:hover, .ac-day.open .ac-datetxt { border-bottom-color: color-mix(in srgb, var(--purple) 50%, transparent); }
.ac-daystep { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; background: none; color: var(--muted); font-size: 13px; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.ac-daystep:hover:not(:disabled) { color: var(--ink); border-color: var(--border); }
.ac-daystep:disabled { opacity: .3; cursor: default; }
.ac-cal { display: none; position: absolute; left: 34px; top: calc(100% + 8px); z-index: 45; width: 292px; padding: 14px 14px 12px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent); }
.ac-day.open .ac-cal { display: block; animation: asPageIn .22s ease both; }
.ac-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ac-cal-t { font: 500 18px var(--serif); color: var(--ink); }
.ac-cal-m { width: 28px; height: 28px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.ac-cal-m:hover:not(:disabled) { color: var(--ink); border-color: var(--border); } .ac-cal-m:disabled { opacity: .3; cursor: default; }
.ac-cal-w, .ac-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ac-cal-w span { text-align: center; font: 400 13px var(--serif); color: var(--muted); padding: 2px 0 4px; }
.ac-cal-g button { height: 34px; border: 1px solid transparent; background: none; font: 400 15px var(--serif); color: var(--ink-soft); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ac-cal-g button:hover:not(:disabled) { border-color: var(--border); color: var(--ink); }
.ac-cal-g button.wrote { background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--ink); }
.ac-cal-g button.today { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.ac-cal-g button.on { background: var(--ink); color: var(--bg); border-color: transparent; }
.ac-cal-g button:disabled { color: var(--whisper); cursor: default; }
.ac-cal-f { margin: 10px 0 0; font: 400 14px var(--serif); color: var(--muted); }
.ac-cal-acts { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .ac-day.open .ac-cal { animation: none; } }
#section-studio .ob-page.ac-docs .ac-strip, #section-studio .ob-page.ac-files .ac-strip, #section-studio .ob-page.ac-docs .ac-conn, #section-studio .ob-page.ac-files .ac-conn { display: none; }
.ac-prompt { position: relative; display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ink-soft); }
.ac-prompt > .bi { color: var(--gold); font-size: 13px; position: relative; top: 1px; flex: 0 0 auto; }
.ac-prompt .t { flex: 1; cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .2s ease, color .2s ease; }
.ac-prompt .t:hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--purple) 50%, transparent); }
.ac-prompt .acts { display: flex; flex: 0 0 auto; align-self: center; color: var(--whisper); font-size: 10px; transition: transform .2s ease; }
.ac-prompt.open .acts { transform: rotate(180deg); }
.ac-pmenu { display: none; position: absolute; left: 22px; top: calc(100% + 8px); z-index: 45; width: min(520px, calc(100% - 22px)); padding: 8px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 14%, transparent); flex-direction: column; gap: 2px; font-style: normal; }
.ac-prompt.open .ac-pmenu { display: flex; }
.ac-pmenu .k { margin: 4px 10px 6px; font: italic 400 13.5px var(--serif); color: var(--muted); }
.ac-pmenu button { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; text-align: left; font: italic 400 17px/1.35 var(--serif); color: var(--ink); cursor: pointer; }
.ac-pmenu button .bi { font-size: 12px; color: var(--gold); flex: 0 0 auto; position: relative; top: 1px; }
.ac-pmenu button:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ac-pmenu button.own { border-top: 1px solid var(--border-light); margin-top: 4px; font-style: normal; font-size: 15.5px; color: var(--ink-soft); } .ac-pmenu button.own .bi { color: var(--purple); }

.ac-prompt .acts button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); }
#section-studio .ob-page.ac-docs .ob-body, #section-studio .ob-page.ac-docs #obProps, #section-studio .ob-page.ac-docs .ac-prompt, #section-studio .ob-page.ac-docs #obPrompt, #section-studio .ob-page.ac-files .ob-body, #section-studio .ob-page.ac-files #obProps, #section-studio .ob-page.ac-files .ac-prompt, #section-studio .ob-page.ac-files #obPrompt { display: none; }
.ac-more { display: none; margin-top: 10px; }
#section-studio .ob-page.ac-docs .ac-more, #section-studio .ob-page.ac-files .ac-more { display: block; }
.ac-more .ob-more { border: 0; padding: 0; max-height: none; overflow: visible; }
.ac-more .ob-folder { display: none; }
#section-studio .ob-page.ac-docs .ob-folder[data-more="Google Docs"], #section-studio .ob-page.ac-files .ob-folder[data-more="Files"] { display: block; }
.ac-more .ob-folder > .ob-fold { display: none; }
.ac-more .ob-folder ul { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ac-more .ob-item { padding: 16px 18px 18px; border: 1px solid var(--border); border-left: 2px solid var(--purple); background: color-mix(in srgb, var(--ink) 1.4%, var(--bg)); transition: transform .2s ease, box-shadow .2s ease; }
.ac-more .ob-item:hover { background: var(--bg); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.ac-more .ob-item .t { font-size: 18px; color: var(--ink); white-space: normal; }
.ac-more .ob-item .d { margin-top: 4px; }
.ac-more-foot { margin-top: 18px; display: flex; gap: 8px; }

/* the cluster: Feeling and Topics on one line, Roots and Branches under them, all to the right */
#section-studio .ob-props { margin: 0; padding: 0; gap: 0; border: 0; align-items: center; }
#section-studio .ob-pcell.links { display: none; }
#section-studio .ob-props .when { display: none; }
#section-studio .ob-props .ob-propbox { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; width: auto; }
#section-studio .ob-pcell { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; }
#section-studio .ob-pcell .k { margin: 0; font-size: 13.5px; }
#section-studio .ob-pcell .k .bi { font-size: 11.5px; }
#section-studio .ob-pcell.feel .k, #section-studio .ob-pcell.topics .k { display: none; }
#section-studio .ob-pcell.links { grid-column: auto; width: 100%; justify-content: flex-end; }
#section-studio .ob-pcell.links .k { font-size: 14px; color: var(--muted); }
#section-studio .ob-pcell.links .k .bi { display: none; }
#section-studio .ob-tag { height: 26px; font-size: 14.5px; }
#section-studio .ob-tag.add { height: 26px; }
#section-studio .ob-plink { padding: 3px 10px 4px; border: 1px solid transparent; border-left: 2px solid var(--purple); background: color-mix(in srgb, var(--purple) 5%, transparent); }
#section-studio .ob-plink { max-width: 100%; } #section-studio .ob-plink .n { font-size: 15.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #section-studio .ob-plink .d { font-size: 13.5px; }
#section-studio .ob-tagpanel { top: 36px; right: 0; left: auto; }

/* topic colors: the tag itself, dots on rows, lines and nodes */
#section-studio .ob-tag.ac-tc, #section-studio .ob-chip.ac-tc { border-color: color-mix(in srgb, var(--tc) 55%, var(--border)); background: color-mix(in srgb, var(--tc) 14%, var(--bg)); color: color-mix(in srgb, var(--tc) 55%, var(--ink)); }
#section-studio .ob-chip.ac-tc.on { background: var(--tc); border-color: var(--tc); color: var(--bg); }
.ac-drawer .ob-folder.ac-tc > .ob-fold::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); margin-right: 2px; flex: 0 0 auto; }
.ac-drawer .ob-folder.ac-tc .ob-ecard { border-left-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.ac-drawer .ob-folder.ac-tc .ob-ecard.on { border-left-color: var(--tc); }
#obRT .ob-outline li.ac-tc > .go::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); margin: 0 8px 2px 0; }
#obRB .lnode.entry.ac-tc:not(.me) .dot { fill: var(--tc); stroke: var(--bg); stroke-width: 1.5; }
#obRB .lnode.entry.ac-tc.me .dot { fill: var(--tc); stroke: var(--purple); stroke-width: 2.5; }

/* the strip: the day's entries as bars, the open one lit; the writing of the open one under it */
.ac-strip { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--border-light); }
.ac-bars { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.ac-bars::-webkit-scrollbar { display: none; }
.ac-bar { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--border-light); background: color-mix(in srgb, var(--ink) 2%, var(--bg)); color: var(--ink-soft); font: 400 14.5px var(--serif); cursor: pointer; white-space: nowrap; max-width: 240px; min-width: 0; flex: 0 1 auto; transition: border-color .2s ease, background .2s ease; }
.ac-bar .car { font-size: 9px; color: var(--muted); transition: transform .2s ease, color .2s ease; flex: 0 0 auto; }
.ac-bar .from { font-size: 11px; color: var(--purple); flex: 0 0 auto; }
.ac-bar .t { overflow: hidden; text-overflow: ellipsis; }
.ac-bar:hover { border-color: var(--border); color: var(--ink); }
.ac-bar.on { background: var(--bg); border-color: var(--purple); color: var(--ink); font-weight: 500; }
.ac-bar.on .car { transform: rotate(90deg); color: var(--purple); }
.ac-bar .beside { display: none; width: 20px; height: 20px; margin: 0 -4px 0 2px; place-items: center; color: var(--muted); font-size: 11px; }
.ac-bar:hover .beside { display: inline-grid; } .ac-bar .beside:hover { color: var(--purple); }
.ac-strip-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.ac-strip-acts .ob-btn[disabled] { opacity: .45; cursor: default; }
.ac-conn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: italic 400 14px var(--serif); color: var(--muted); }
.ac-conn:not(:empty) { margin: -6px 0 16px; }
.ac-conn .k { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); } .ac-conn .k .bi { font-size: 12px; }
.ac-chip { display: inline-flex; align-items: baseline; gap: 7px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-left: 2px solid var(--purple); background: var(--bg); font: 400 14.5px var(--serif); color: var(--ink); cursor: pointer; }
.ac-chip em { font-size: 13px; color: var(--muted); } .ac-chip .bi { font-size: 11px; color: var(--purple); align-self: center; }
.ac-chip:hover { border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); }
.ac-conn .none { color: var(--whisper); }
.ac-conn-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 4px; }
#obBody > [data-ac-off] { display: none !important; }
#obPrompt:empty { display: none; }
#section-studio .ob-body h2.ob-blk { margin: 0 0 8px !important; padding-top: 0 !important; border-top: 0 !important; }
#section-studio .ob-body h2.ob-qblk::before { top: 6px !important; }
/* Open Beside: two entries in the journal module, a gutter between them */
.ac-split { flex: 1; min-height: 0; display: flex; --ac-sp: 1; --ac-sb: 1; }
.ac-split > .ob-write { flex: var(--ac-sp) 1 0; min-width: 0; }
.ac-sgut { display: none; flex: 0 0 10px; cursor: col-resize; position: relative; touch-action: none; }
.ac-sgut::before { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--border); }
.ac-sgut:hover::before { background: var(--purple); width: 2px; }
.ac-beside { display: none; flex: var(--ac-sb) 1 0; min-width: 0; flex-direction: column; min-height: 0; }
.ac-split.on .ac-sgut { display: block; } .ac-split.on .ac-beside { display: flex; }
.ac-split.on .ac-head { grid-template-columns: minmax(0, 1fr); } .ac-split.on .ac-headr { max-width: none; align-items: flex-start; padding-top: 10px; } .ac-split.on .ac-headr .ob-propbox { justify-content: flex-start; } .ac-split.on .ob-pcell.links { justify-content: flex-start; }
.ac-split.on .ac-strip-acts .ob-btn { font-size: 0; gap: 0; width: 30px; padding: 0; justify-content: center; } .ac-split.on .ac-strip-acts .ob-btn .bi { font-size: 12px; }
.ac-beside-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 26px 28px 10px 28px; font: italic 400 14.5px var(--serif); color: var(--muted); }
.ac-beside-h .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-beside-b { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px 60px; font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink); outline: 0; }
.ac-beside-b h2 { font-size: 28px; font-weight: 500; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.ac-beside-b h3 { font-size: 21px; font-weight: 500; margin: 22px 0 4px; } .ac-beside-b p { margin: 0 0 16px; }
.ac-beside-b .ob-qtagrow, .ac-beside-b .ob-movedcard { display: none; }

/* the Guiding Idea lives as the prompt on the page */
#section-studio .ob-qfoot .ob-gi { display: none; }

/* the writing: bolder */
#section-studio .ob-body { font-size: 18px; }
#section-studio .ob-body h2.ob-blk { font-size: 30px; }
#section-studio .ob-body h3 { font-size: 21px; }

/* the format bar in one row, the mic and the word count with it */
#section-studio .ob-fmtrow { flex-wrap: nowrap; gap: 0; padding: 7px 16px 8px; overflow: hidden; }
#section-studio .ob-fmtg { padding: 0 5px; }
#section-studio .ob-fb { min-width: 30px; height: 30px; padding: 0 6px; }
#section-studio .ob-fb.txt { font-size: 12px; padding: 0 7px; }
#section-studio .ob-wc { font-size: 13.5px; padding-left: 10px; }

/* ── the side panels: quiet, with a corner for folding and moving ── */
#section-studio .ob-ws > .ob-pane, #section-studio .ob-right > section { position: relative; background: color-mix(in srgb, var(--ink) 1.2%, var(--bg)); }
#section-studio .ob-phrow { padding: 14px 44px 8px 16px; }
#section-studio .ob-ph { font-size: 18px; position: relative; padding-bottom: 6px; }
#section-studio .ob-ws > .ob-pane > .ob-phrow .ob-ph::after, #section-studio .ob-right > section > .ob-phrow .ob-ph::after { content: ''; position: absolute; left: 0; bottom: 0; width: 22px; height: 1.5px; background: var(--purple); }
[data-ac-collapsed="1"]::before { color: var(--purple) !important; }
.ac-layout > button { color: var(--ink-soft); }
.ac-menu-h { margin: 6px 10px 6px; font: italic 400 14px var(--serif); color: var(--muted); }
.ac-menu-f { margin: 8px 10px 4px; font: italic 400 13px var(--serif); color: var(--whisper); max-width: 220px; }
.ac-colors { flex-direction: column; gap: 2px; }
.ac-color { display: flex; align-items: center; gap: 9px; padding: 6px 10px; font: 400 15px var(--serif); color: var(--ink); cursor: pointer; position: relative; }
.ac-color input { position: absolute; width: 0; height: 0; opacity: 0; }
.ac-color i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); }
.ac-corner { position: absolute; top: 10px; right: 8px; display: flex; gap: 2px; z-index: 4; opacity: .55; transition: opacity .2s ease; }
.ob-pane:hover > .ac-corner, section:hover > .ac-corner, [data-ac-collapsed="1"] > .ac-corner { opacity: 1; }
.ac-corner button { width: 24px; height: 24px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; display: inline-grid; place-items: center; }
.ac-corner button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ac-corner .ac-grip { cursor: grab; }
.ob-pane.ac-over, section.ac-over { outline: 2px solid var(--purple); outline-offset: -2px; }
.ob-pane.ac-lifting, section.ac-lifting { opacity: .4; }
/* folded panels */
#section-studio .ob-ws.ac-q-folded { --qw: var(--ac-rail) !important; }
#section-studio .ob-ws.ac-q-folded > .ob-gut[data-g="q"] { pointer-events: none; }
#section-studio .ob-right.ac-top-folded { --rth: var(--ac-rail) !important; }
#section-studio .ob-right.ac-bot-folded { grid-template-rows: minmax(0, 1fr) 7px var(--ac-rail); }
#section-studio .ob-right.ac-top-folded.ac-bot-folded { grid-template-rows: var(--ac-rail) 7px minmax(0, 1fr); }
[data-ac-collapsed="1"] > :not(.ac-corner) { display: none !important; }
[data-ac-collapsed="1"] > .ac-corner { top: 6px; right: 6px; }
[data-ac-collapsed="1"]::before { content: attr(data-ac-name); position: absolute; font-family: var(--serif); font-size: 15px; color: var(--muted); }
[data-ac-collapsed="1"][data-ac-slot="q"]::before { left: 50%; top: 40px; transform: translateX(-50%); writing-mode: vertical-rl; }
[data-ac-collapsed="1"][data-ac-slot="rt"]::before, [data-ac-collapsed="1"][data-ac-slot="rb"]::before { left: 16px; top: 50%; transform: translateY(-50%); }
[data-ac-collapsed="1"][data-ac-slot="rb"] { min-height: var(--ac-rail); }
.ac-fold .bi { transition: transform .25s ease; }
[data-ac-collapsed="1"][data-ac-slot="q"] .ac-fold .bi { transform: rotate(180deg); }
[data-ac-collapsed="1"][data-ac-slot="rt"] .ac-fold .bi, [data-ac-collapsed="1"][data-ac-slot="rb"] .ac-fold .bi { transform: rotate(180deg); }
.ac-toast-hint { font-family: var(--serif); font-style: italic; }


body.studio-on #section-studio .ob-ws { background: #EAE5DB; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(var(--st-shade),.025) 0 1px, transparent 1px 3px); border-color: var(--st-line-2); padding: 12px; column-gap: 0; }
body.studio-on #section-studio .ob-ws > .ob-pane, body.studio-on #section-studio .ob-right > section { background: var(--st-pane); border: 1px solid var(--st-line); box-shadow: 0 1px 2px rgba(var(--st-shade),.05), 0 10px 24px -16px rgba(var(--st-shade),.25); }
body.studio-on #section-studio .ob-center { background: var(--st-panel); border: 1px solid var(--st-line); box-shadow: 0 2px 4px rgba(var(--st-shade),.05), 0 24px 50px -28px rgba(var(--st-shade),.4); }
body.studio-on #section-studio .ob-gut::before { background: transparent; }
body.studio-on #section-studio .ob-gut { width: 12px; margin: 0 -2px; }
body.studio-on #section-studio .ob-right { row-gap: 0; }
body.studio-on #section-studio .ob-right > .ob-gut-row::before { background: transparent; }
body.studio-on #section-studio .ob-right { grid-template-rows: var(--rth) 12px minmax(0, 1fr); }
body.studio-on #section-studio .ac-rail { background: transparent; border: 0; }
body.studio-on #section-studio .ob-fmt { background: var(--st-panel); border-top-color: var(--st-line); }
body.studio-on #section-studio .ac-drawer { background: var(--st-pane); }



/* the format bar keeps to one row at every width: a shorter name for the block button, the count never clipped */
#section-studio .ob-fb[data-fmt="h2"] { font-size: 0; }
#section-studio .ob-fb[data-fmt="h2"]::before { content: 'Block'; font-family: var(--sans); font-size: 12px; font-weight: 500; }
#section-studio .ob-fmtrow { padding-right: 14px; }
#section-studio .ob-wc { flex: 0 0 auto; }
#section-studio .ac-rail { position: relative; z-index: 35; }


/* Desk carries over the whole Studio: the tabs row, the frame and the AI box sit on the same linen */
/* the product paints every section with its own gradient at id specificity; these carry the desk over the section, the tabs row and the AI box */
body.studio-on #section-studio .ob-ws { background: transparent; background-image: none; border: 0; padding: 0; }
body.studio-on #section-studio .ob-tab.on { border-color: var(--purple); }
body.studio-on .ac-layout > button, body.studio-on #section-studio .ob-pill, body.studio-on #section-studio .ob-orb { background: var(--st-panel); border-color: var(--st-line-2); }
body.studio-on #section-studio .ob-graph, body.studio-on #section-studio .ob-canvaswrap, body.studio-on #section-studio .ob-strip { background: var(--st-panel); }

/* Edit Layout: grips show, panels outline, the gaps light up for a drop; locked, the grips are gone */
.ac-corner .ac-grip { display: none; }
.ac-editing .ac-corner { opacity: 1; } .ac-editing .ac-corner .ac-grip { display: inline-grid; }
.ac-editing > .ob-pane, .ac-editing .ob-right > section { outline: 1.5px dashed color-mix(in srgb, var(--purple) 55%, transparent); outline-offset: -1.5px; }
.ac-editing .ob-gut[data-g="q"], .ac-editing .ob-gut-row { background: color-mix(in srgb, var(--purple) 10%, transparent); }
.ac-editing .ob-gut.ac-over { background: color-mix(in srgb, var(--purple) 40%, transparent); }
.ac-layout > button.on { border-color: var(--purple); color: var(--purple); }

/* Board keeps A's one tall right panel */
body.studio-on #section-studio .ob-ws[data-view="board"] .ob-right { grid-template-rows: minmax(0, 1fr) 0 0; }
#section-studio .ob-ws[data-view="board"] .ob-right > section:first-child { height: 100%; }

/* the frame: 24px from the window's edges; the tabs row starts where Questions starts; Layout ends where the right panel ends */
body:has(.hub-shell) #section-studio.section.active { padding: 0 24px 0 !important; gap: 0 !important; }
#section-studio .ob-tabsrow { padding: 14px 0 12px var(--ac-rail); }
.ac-layout { margin-right: var(--ac-rail); }
/* the AI box: as wide as the journal module, 14px above the window's edge */
#obDock { left: var(--ac-dock-l, 50%) !important; width: var(--ac-dock-w, min(780px, calc(100vw - 32px))) !important; transform: none !important; bottom: 14px !important; }
#obDock .ob-pill { min-height: 48px; }
#obDock .ob-disclaim { margin: 6px 0 0; font-size: 12.5px; }
body.studio-on #obDock .ob-pill, body.studio-on #obDock .ob-orb { background: var(--st-panel); border-color: var(--st-line-2); }



/* ═══ the mode row and the AI box: two light panels on the desk, bordered, as wide as the frame ═══ */
#section-studio .ob-tabsrow { margin: 14px 0 14px; padding: 0 22px; height: 54px; align-items: center; background: var(--st-panel); border: 1px solid var(--st-line-2); box-shadow: 0 1px 2px rgba(var(--st-shade),.04), 0 12px 28px -20px rgba(var(--st-shade),.3); }
#section-studio .ob-tab, #section-studio .ob-sub-tab { color: var(--muted); font-size: 19px; padding: 4px 0 4px; border-bottom-width: 2px; box-sizing: border-box; height: 34px; }
#section-studio .ob-tabs, #section-studio .ob-subtabs { align-items: center; }
#section-studio .ob-tab:hover, #section-studio .ob-sub-tab:hover { color: var(--ink); }
#section-studio .ob-tab.on, #section-studio .ob-sub-tab.on { color: var(--ink); border-color: var(--purple); }
.ac-layout { margin-right: 0; }
.ac-layout > button { height: 34px; padding: 0 14px; background: transparent; border: 1px solid var(--border); color: var(--ink); font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; }
.ac-layout > button .bi { color: var(--purple); }
.ac-layout > button:hover { border-color: var(--ink); color: var(--ink); }
.ac-layout > button.on { border-color: var(--purple); color: var(--purple); }
body.studio-on .ac-layout > button { background: transparent; border-color: var(--border); color: var(--ink); }
#obDock { bottom: 14px !important; }
#obDock .ob-barrow { padding: 9px 10px 9px 10px; background: var(--st-panel); border: 1px solid var(--st-line-2); box-shadow: 0 1px 2px rgba(var(--st-shade),.04), 0 12px 28px -20px rgba(var(--st-shade),.3); }
#obDock .ob-pill { min-height: 46px; border-color: var(--border-light); background: var(--bg); box-shadow: none; }
#obDock .ob-orb { width: 46px; height: 46px; box-shadow: none; }
#obDock .ob-disclaim { margin: 6px 0 0; font-size: 12.5px; }
#obDock.open .ob-barrow { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ac-strip-acts .ob-btn { height: 30px; padding: 0 10px; font: 500 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); gap: 7px; }
.ac-bar { min-width: 120px; }
.ac-strip-acts .ob-btn .bi { font-size: 12px; color: var(--purple); }
.ac-strip-acts .ob-btn:hover { border-color: var(--ink); }
#section-studio .ac-bar.on { border-color: var(--ink); background: var(--bg); }
#section-studio .ac-bar.on .car { color: var(--ink); }
#section-studio .ac-bar .from { color: var(--purple); }

/* ═══ color: four ways to carry the open entry's topic color, chosen in the black bar ═══ */
/* Edge: a 3px edge down the journal's left (the default) */
/* Wash: the edge, and the head of the page washed in the color, tags solid */
/* Thread: a 4px line along the top of the journal instead of the edge, the open bar and the tags in the color */
body #section-studio .ob-center { border-left: 1px solid var(--st-line) !important; border-top: 4px solid var(--ac-topic, transparent) !important; }
body #section-studio .ob-ws > .ob-pane, body #section-studio .ob-right > section { border-top: 4px solid color-mix(in srgb, var(--purple) 55%, var(--border)); }
body #section-studio .ob-right > section[data-ac-panel="links"] { border-top-color: color-mix(in srgb, var(--sage) 70%, var(--border)); }

/* Bars: every bar in the strip wears its own entry's color, with the edge */
body #section-studio .ac-bar { border-left: 3px solid var(--tc, var(--border-light)); padding-left: 7px; }
body #section-studio .ac-bar .car { color: var(--tc, var(--muted)); }
body #section-studio .ac-bar.on { border-color: var(--tc, var(--ink)); }
/* Tint: the whole sheet takes a breath of the color, with the edge */
/* Ink: no edge; the date and the entry's title are set in the color */
/* Band: no edge; the strip is a band of the color across the module, the open bar solid in it */
/* Wash: one unbroken block from the top of the sheet to the strip's rule */

/* Links: Map or Timeline */
.ac-lens { display: flex; gap: 2px; padding: 0 16px 8px; }
.ac-lens button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid transparent; background: none; color: var(--muted); font: 500 11.5px var(--sans); cursor: pointer; }
.ac-lens button .bi { font-size: 11px; }
.ac-lens button.on { color: var(--ink); border-color: var(--border); background: var(--bg); }
.ac-lens button:hover { color: var(--ink); }
.ac-tl { display: none; flex: 1; min-height: 0; padding: 4px 10px 8px 6px; }
.ac-tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
section.ac-timeline > .ob-scroll { display: none; } section.ac-timeline > .ac-tl { display: block; }
.ac-tl .lane { font: italic 400 12.5px var(--serif); fill: var(--muted); }
.ac-tl .ln { stroke: var(--border-light); stroke-width: 1; }
.ac-tl .tick { font: 400 11px var(--sans); fill: var(--whisper); }
.ac-tl .arc { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: .9; }
.ac-tl .dot { cursor: pointer; } .ac-tl .dot .hit { fill: transparent; }
.ac-tl .dot circle:not(.hit) { fill: var(--c); stroke: var(--bg); stroke-width: 2; transition: r .2s ease; }
.ac-tl .dot.on circle:not(.hit) { stroke: var(--ink); stroke-width: 2.5; }
.ac-tl .dot:hover circle:not(.hit) { stroke: var(--ink); }
#section-studio .ob-ws[data-view="board"] .ac-lens, #section-studio .ob-ws[data-view="board"] .ac-tl { display: none !important; }

/* the desk runs to the bottom of the window: the hub's main fills it and the body behind it matches */
body.studio-on { background: var(--st-canvas) !important; }

/* the prompt line: editable in place, Write on It on hover */
.ac-prompt .t[contenteditable="true"] { outline: 0; border-bottom: 1px solid var(--purple); color: var(--ink); min-width: 240px; }
.ac-prompt.editing .t:empty::before { content: 'Write your own prompt, then press Enter'; color: var(--whisper); }
.ac-prompt .writeon { display: none; align-items: center; gap: 6px; height: 26px; padding: 0 9px; margin-left: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; align-self: center; white-space: nowrap; }
.ac-prompt .writeon .bi { font-size: 11px; color: var(--purple); }
.ac-prompt:hover .writeon, .ac-prompt.open .writeon { display: inline-flex; }
.ac-prompt.editing .writeon, .ac-prompt.editing .acts { display: none; }
/* the bars: an x on hover, lift and a slot while dragging */
.ac-bar .del { display: none; width: 18px; height: 18px; margin: 0 -5px 0 2px; place-items: center; color: var(--muted); font-size: 10px; }
.ac-bar:hover .del { display: inline-grid; } .ac-bar .del:hover { color: var(--ink); }
.ac-bar.lifting { opacity: .35; }
.ac-bar.over-l { box-shadow: -3px 0 0 var(--purple); } .ac-bar.over-r { box-shadow: 3px 0 0 var(--purple); }
.ac-bar[draggable="true"] { cursor: grab; }

/* the rail buttons: each in its own color, and the drawer it opens wears the same color as its band */
.ac-rail button { --rc: var(--muted); border-radius: 0; }
.ac-rail button[data-ac-drawer="entries"] { --rc: #5F8F96; }
.ac-rail button[data-ac-drawer="reading"] { --rc: #B08A4F; }
.ac-rail button[data-ac-drawer="notes"] { --rc: #BC7C8E; }
.ac-rail button { background: color-mix(in srgb, var(--rc) 12%, transparent); color: color-mix(in srgb, var(--rc) 70%, var(--ink)); }
.ac-rail button .bi { color: var(--rc); }
.ac-rail button:hover { background: color-mix(in srgb, var(--rc) 20%, transparent); color: var(--ink); }
.ac-rail button.on { background: var(--rc); color: #fff; } .ac-rail button.on .bi { color: #fff; }
.ac-rail button[data-ac-count]::before { background: var(--rc); }
.ac-drawer { border-top: 4px solid var(--dc, #5F8F96); width: 380px; }
.ac-dtabs button.on { border-color: var(--purple); }
.ac-drawer.right .ac-dtabs button[data-ac-tab="reading"].on { border-color: #B08A4F; }
.ac-drawer.right .ac-dtabs button[data-ac-tab="notes"].on { border-color: #BC7C8E; }
.ac-drawer.left .ob-ph::after, .ac-drawer.right .ob-ph::after { display: none; }

/* the rail buttons: white cards, the icon and the word in one line, the color as the card's edge and icon */
#section-studio { --ac-rail: 104px; }
.ac-rail { padding: 12px 8px; gap: 8px; }
.ac-rail.left { padding-right: 10px; } .ac-rail.right { padding-left: 10px; }
.ac-rail button { width: 100%; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 10px 0 9px; height: 34px; background: var(--st-panel); border: 1px solid var(--st-line-2); border-left: 3px solid var(--rc); color: var(--ink); font-size: 11.5px; letter-spacing: .02em; box-shadow: 0 1px 2px rgba(var(--st-shade),.04); }
.ac-rail button .bi { font-size: 14px; color: var(--rc); }
.ac-rail button:hover { background: color-mix(in srgb, var(--rc) 8%, var(--st-panel)); color: var(--ink); border-color: color-mix(in srgb, var(--rc) 40%, var(--st-line-2)); border-left-color: var(--rc); }
.ac-rail button.on { background: color-mix(in srgb, var(--rc) 14%, var(--st-panel)); color: var(--ink); border-color: var(--rc); }
.ac-rail button.on .bi { color: var(--rc); }
.ac-rail button[data-ac-count]::before { top: -6px; right: -6px; }

/* ── the rails line up with the panels; a folded module is a widget in the rail ── */
.ac-rail { padding-top: 0; padding-bottom: 0; }
.ac-rail-w { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 9px; border: 1px solid var(--st-line-2); border-left: 3px solid var(--rc); background: var(--st-panel); color: var(--ink); font: 500 11.5px var(--sans); letter-spacing: .02em; cursor: pointer; box-shadow: 0 1px 2px rgba(var(--st-shade),.04); text-align: left; }
.ac-rail-w .bi { font-size: 14px; color: var(--rc); }
.ac-rail-w:hover { background: color-mix(in srgb, var(--rc) 8%, var(--st-panel)); border-color: color-mix(in srgb, var(--rc) 40%, var(--st-line-2)); border-left-color: var(--rc); }
.ac-rail-w.pop { animation: acPop .5s cubic-bezier(.16,1,.3,1) .22s both; }
@keyframes acPop { from { opacity: 0; } to { opacity: 1; } }
/* the fold: the panel's track closes while the panel fades toward its rail; the widget arrives as it lands */
#section-studio .ob-right { transition: grid-template-rows .42s cubic-bezier(.22,.8,.24,1); }
#section-studio .ob-ws.ac-still, #section-studio .ob-ws.ac-still .ob-right { transition: none; }
.ac-folding { animation: acShrink .38s cubic-bezier(.4,0,.2,1) both; transform-origin: var(--ac-to, center); pointer-events: none; }
@keyframes acShrink { to { opacity: 0; transform: scale(.9); } }
.ac-unfolding { animation: acGrow .42s cubic-bezier(.22,.8,.24,1) both; transform-origin: var(--ac-to, center); }
@keyframes acGrow { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* folded: the panel keeps its cell (so nothing shifts) but has no width and cannot be seen */
[data-ac-collapsed="1"] { visibility: hidden !important; overflow: hidden !important; min-width: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
[data-ac-collapsed="1"]::before { display: none; }
#section-studio .ob-ws.ac-q-folded { --qw: 0px !important; }
#section-studio .ob-ws.ac-q-folded > .ob-gut[data-g="q"], #section-studio .ob-ws.ac-r-folded > .ob-gut[data-g="r"] { visibility: hidden; }
body.studio-on #section-studio .ob-right.ac-top-folded { grid-template-rows: 0px 0px minmax(0, 1fr); }
body.studio-on #section-studio .ob-right.ac-bot-folded { grid-template-rows: minmax(0, 1fr) 0px 0px; }
#section-studio .ob-right.ac-top-folded > .ob-gut-row, #section-studio .ob-right.ac-bot-folded > .ob-gut-row { visibility: hidden; }
#section-studio .ob-ws > .ob-pane, #section-studio .ob-right > section { min-width: 0; overflow: hidden; }

/* Edit Layout: the rail widgets move, within a rail or across to the other */
.ac-editing ~ * .ac-rail > button, #section-studio .ob-ws.ac-editing .ac-rail > button { cursor: grab; outline: 1.5px dashed color-mix(in srgb, var(--purple) 55%, transparent); outline-offset: 2px; }
#section-studio .ob-ws.ac-editing .ac-rail > button.lifting { opacity: .35; }
#section-studio .ob-ws.ac-editing .ac-rail { outline: 1.5px dashed color-mix(in srgb, var(--purple) 35%, transparent); outline-offset: -2px; min-height: 120px; }
.ac-rail-slot { height: 34px; width: 100%; border: 1.5px dashed var(--purple); background: color-mix(in srgb, var(--purple) 8%, transparent); }
.ac-drawer.narrow { width: 320px; }


/* ═══ the frame as one grid: rail, left drawer, Questions, gap, journal, gap, right column, right drawer, rail ═══
   Every child has its column, so a hidden one never shifts the others. A drawer opens by taking its column. */
#section-studio .ob-ws { --dl: 0px; --dr: 0px; --gq: 12px; --gr: 12px; grid-template-columns: var(--ac-rail) var(--dl) var(--qw) var(--gq) minmax(0, 1fr) var(--gr) var(--rw) var(--dr) var(--ac-rail) !important; }
#section-studio .ob-ws[data-view="board"] { --qw: 0px !important; --gq: 0px; }
#section-studio .ob-ws.ac-q-folded { --qw: 0px !important; }
#section-studio .ob-ws.ac-r-folded { --rw: 0px !important; }
#section-studio .ob-ws > * { grid-row: 1; }   /* every child on the one row, whatever its order in the DOM */
#section-studio .ob-ws > .ac-rail.left { grid-column: 1; }
#section-studio .ob-ws > .ac-drawer.left { grid-column: 2; }
#section-studio .ob-ws > .ob-qpane { grid-column: 3; }
#section-studio .ob-ws > .ob-gut[data-g="q"] { grid-column: 4; }
#section-studio .ob-ws > .ob-center { grid-column: 5; }
#section-studio .ob-ws > .ob-gut[data-g="r"] { grid-column: 6; }
#section-studio .ob-ws > .ob-right { grid-column: 7; }
#section-studio .ob-ws > .ac-drawer.right { grid-column: 8; }
#section-studio .ob-ws > .ac-rail.right { grid-column: 9; }
#section-studio .ob-ws > .ac-drawer { position: static; top: auto; bottom: auto; left: auto; right: auto; transform: none; width: auto; min-width: 0; overflow: hidden; margin: 0; box-shadow: none; opacity: 0; transition: opacity .3s ease .1s; }
#section-studio .ob-ws > .ac-drawer.open { opacity: 1; }
#section-studio .ob-ws > .ac-drawer.left.open { margin-right: 12px; } #section-studio .ob-ws > .ac-drawer.right.open { margin-left: 12px; }
#section-studio .ob-ws > .ac-drawer > * { min-width: 308px; }
#section-studio .ob-ws > .ac-drawer.narrow > * { min-width: 296px; }
body.studio-on #section-studio .ac-drawer { background: var(--st-pane); border: 1px solid var(--st-line); border-top: 4px solid var(--dc, #5F8F96); box-shadow: 0 1px 2px rgba(var(--st-shade),.05), 0 10px 24px -16px rgba(var(--st-shade),.25); }
#section-studio .ob-ws > .ac-drawer.left.open, #section-studio .ob-ws > .ac-drawer.right.open { pointer-events: auto; }

/* the rail's editing outline wraps only its widgets; a dragged module previews where it will land */
#section-studio .ob-ws.ac-editing .ac-rail { outline: 0; }
.ac-rail-stack { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#section-studio .ob-ws.ac-editing .ac-rail-stack { outline: 1.5px dashed color-mix(in srgb, var(--purple) 35%, transparent); outline-offset: 6px; min-height: 34px; }
.ob-pane.ac-over, section.ac-over { outline: 2px solid var(--purple); outline-offset: -2px; position: relative; }
.ob-pane.ac-over::after, section.ac-over::after { content: attr(data-ac-incoming) ' here'; position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: color-mix(in srgb, var(--purple) 10%, var(--st-panel)); font: 500 18px var(--serif); color: var(--purple); backdrop-filter: blur(2px); }
.ob-gut.ac-over { background: color-mix(in srgb, var(--purple) 40%, transparent) !important; }

/* presets of your own in the Layout menu */
.ac-menu .ac-preset { display: flex; align-items: center; gap: 7px; }
.ac-menu .ac-preset .x { margin-left: auto; width: 20px; height: 20px; display: inline-grid; place-items: center; color: var(--muted); font-size: 10px; border: 0; background: none; cursor: pointer; }
.ac-menu .ac-preset .x:hover { color: var(--ink); }

/* a drawer takes the place of the panel on its side while it is open, so the journal keeps its width */
#section-studio .ob-ws.ac-dl-open { --qw: 0px !important; }
#section-studio .ob-ws.ac-dr-open { --rw: 0px !important; }
#section-studio .ob-ws.ac-dl-open > .ob-gut[data-g="q"], #section-studio .ob-ws.ac-dr-open > .ob-gut[data-g="r"] { visibility: hidden; }
#section-studio .ob-ws.ac-dl-open { --gq: 0px; } #section-studio .ob-ws.ac-dr-open { --gr: 0px; }
/* each drawer is its own: no tabs inside */
.ac-dtabs { display: none; }
.ac-dhead { padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }

/* the tool is called Analysis now */
#section-studio .ac-dbody .meta { font-style: italic; }


/* ═══ Astrasera's own surface. The header is bone; the Studio sits on bone one shade deeper, flat, with a hairline between.
   The mode row is a row of tabs on the page, not a card; one hairline runs under it the full width of the frame. ═══ */
body.studio-on[data-backdrop] .hub-main:has(#section-studio.active), body.studio-on .hub-main, body.studio-on #section-studio#section-studio:not(#x):not(#y) { background: var(--st-canvas) !important; background-image: none !important; }
body.studio-on header.topbar { border-bottom: 1px solid var(--st-line); }
body.studio-on #section-studio .ob-tabsrow { background: transparent; border: 0; border-bottom: 1px solid var(--st-line-2); box-shadow: none; height: 44px; margin: 18px 0 16px; padding: 0 0 0 2px; }
body.studio-on #section-studio .ob-tab, body.studio-on #section-studio .ob-sub-tab { height: 44px; padding: 10px 0 0; border-bottom-width: 2px; margin-bottom: -1px; }
body.studio-on .ac-layout { margin-right: 2px; }
body.studio-on .ac-layout > button { background: transparent; border-color: transparent; color: var(--ink-soft); padding: 0 6px; }
body.studio-on .ac-layout > button:hover { color: var(--ink); border-color: var(--border); }
body.studio-on #section-studio .ob-ws > .ob-pane, body.studio-on #section-studio .ob-right > section, body.studio-on #section-studio .ac-drawer { background: var(--st-pane); border-color: var(--st-line); box-shadow: 0 1px 2px rgba(var(--st-shade),.04); }
body.studio-on #section-studio .ob-center { background: var(--st-panel); box-shadow: 0 1px 2px rgba(var(--st-shade),.04), 0 18px 40px -30px rgba(var(--st-shade),.3); }
body.studio-on #obDock .ob-barrow { background: var(--st-panel); box-shadow: 0 1px 2px rgba(var(--st-shade),.04); }
body.studio-on .ac-rail button, body.studio-on .ac-rail-w { background: var(--st-pane); }


/* ═══ the question tree in full color: open questions lavender with a soft halo, settled ones gold, the trunk ink ═══ */
#section-studio .ob-tree .trunk { stroke: var(--ink); stroke-width: 2; }
#section-studio .ob-tree .root circle { fill: var(--ink); }
#section-studio .ob-tree .tip path { fill: var(--purple); }
#section-studio .ob-tree .onode .dot { fill: color-mix(in srgb, var(--purple) 18%, var(--bg)); stroke: var(--purple); stroke-width: 1.6; }
#section-studio .ob-tree .onode.float .hl { fill: var(--ink-soft); font-style: italic; }
#section-studio .ob-tree .onode.working .dot { fill: var(--purple); stroke: var(--bg); stroke-width: 2.5; }
#section-studio .ob-tree .onode .hit { fill: color-mix(in srgb, var(--purple) 7%, transparent); }
#section-studio .ob-tree .onode.working .hit, #section-studio .ob-tree .onode.sel .hit { fill: color-mix(in srgb, var(--purple) 14%, transparent); }
#section-studio .ob-tree .workarrow { stroke: var(--purple); }
#section-studio .ob-tree .mergearrow, #section-studio .ob-tree .ah { stroke: var(--gold); }
#section-studio .ob-tree .mnode .dot { fill: var(--gold); stroke: var(--bg); }
#section-studio .ob-tree .onode.settledq .dot { fill: color-mix(in srgb, var(--gold) 30%, var(--bg)); stroke: var(--gold); }
#section-studio .ob-tree .onode.settledq .hl .hsub { fill: var(--gold); }
#section-studio .ob-tree .onode.settledq .hit { fill: color-mix(in srgb, var(--gold) 10%, transparent); }
#section-studio .ob-tree .hl { font-size: 14.5px; fill: var(--ink); } #section-studio .ob-tree .hl .hsub { font-size: 13px; }
#section-studio .ob-tree .root .hl { font-size: 14.5px; }

/* ═══ larger type in the side panels, so they read as content, not margins ═══ */
#section-studio .ob-outlinebox .ob-lt { font-size: 19px; }
#section-studio .ob-outlinebox .ob-outline .go { font-size: 17px; padding: 7px 8px; }
#section-studio .ob-lday .lnode text { font-size: 15px; } #section-studio .ob-lday .lnode.date text { font-size: 15.5px; } #section-studio .ob-lday .lnode.main text { font-size: 17px; }
#section-studio .ob-lday .lnode.q text { font-size: 14.5px; }
#section-studio .ac-tl .lane { font-size: 14px; } #section-studio .ac-tl .tick { font-size: 12px; }
.ac-drawer .ob-item.ob-ecard .t { font-size: 16px; } .ac-drawer .ob-item.ob-ecard .d { font-size: 13px; }
.ac-drawer .ob-folder > .ob-fold { font-size: 18px; }
#section-studio .ob-qfoot .ob-qadd .ob-field { font-size: 15px; }

/* ═══ motion: one house curve, nothing appears from nowhere ═══
   --ac-ease is the site's own curve (asPageIn). Menus and popovers rise 6px and fade in over 220ms; drawers and
   panels slide; buttons and rows answer a hover in 160ms; the chat rises; nothing is instant but typing. */
:root { --ac-ease: cubic-bezier(.22,.8,.24,1); }
@keyframes acRise { from { opacity: 0; } to { opacity: 1; } }   /* a fade: nothing in the Studio rises into place */
@keyframes acRiseUp { from { opacity: 0; } to { opacity: 1; } }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }
/* the site's menus (Overview, My Care, Studio, Personal, Connect) and the account menu */
.tn-panel:not([hidden]) { animation: acRise .22s var(--ac-ease) both; }
.tn-panel .sidebar-item { transition: background .16s ease, color .16s ease; }
.tn-btn i { transition: transform .22s var(--ac-ease); }
.user-dropdown { transition: opacity .22s var(--ac-ease), transform .22s var(--ac-ease); }
/* the Layout menu, the Today's Page switch, the prompt's menu, A's tag panel and tooltips */
.ac-layout.open .ac-menu, .ac-switch.open .ac-menu, .ac-prompt.open .ac-pmenu { animation: acRise .22s var(--ac-ease) both; }
.ob-tagpanel { transition: opacity .22s var(--ac-ease), transform .22s var(--ac-ease); }
.ob-tip { transition: opacity .18s ease, transform .22s var(--ac-ease); }
/* the drawers slide in with their column */
#section-studio .ob-ws > .ac-drawer { transition: opacity .28s var(--ac-ease) .08s, transform .36s var(--ac-ease); transform: translateX(-12px); }
#section-studio .ob-ws > .ac-drawer.right { transform: translateX(12px); }
#section-studio .ob-ws > .ac-drawer.open { transform: none; }
#section-studio .ob-ws { transition: grid-template-columns .36s var(--ac-ease); }
/* the strip: a bar that opens lifts a little, its writing arrives */
.ac-bar.on { box-shadow: 0 2px 6px rgba(var(--st-shade),.08); }
#obBody > h2.ob-blk:not([data-ac-off]) { animation: acRise .3s var(--ac-ease) both; }
#obBody > :not(h2):not([data-ac-off]) { animation: acFade .32s ease both; }
.ac-conn:not(:empty) { animation: acRise .28s var(--ac-ease) both; }
.ac-conn .ac-chip { animation: acRise .3s var(--ac-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
/* the AI box: the chat rises, the circle's menu unfolds, the pill answers a hover */
#obDock .ob-chat { animation: acFade .3s ease both; }
#obDock .ob-orb-menu { transition: opacity .22s var(--ac-ease), transform .26s var(--ac-ease) !important; transform: none; }
#obDock.orb-open .ob-orb-menu { transform: none; }
#obDock .ob-orb-item { transition: opacity .2s ease, transform .26s var(--ac-ease), background .16s ease !important; transition-delay: calc(var(--i, 0) * 18ms) !important; }
#obDock .ob-pill { transition: border-color .2s ease, box-shadow .24s ease, transform .24s var(--ac-ease); }
#obDock .ob-pill:hover { box-shadow: 0 1px 2px rgba(var(--st-shade),.04), 0 10px 24px -14px rgba(var(--st-shade),.3); }
#obDock .ob-orb { transition: transform .24s var(--ac-ease), background .2s ease, color .2s ease; }
/* panels in the frame: a module arriving, the Outline and Links redrawing */
#obRT .ob-outline li, #obRT .ob-outlinebox .ob-lt { animation: acFade .28s ease both; }
#section-studio .ob-right > section .ob-scroll > *, #section-studio .ob-qpane .ob-qtree > * { animation: acFade .3s ease both; }
.ac-tl .dot circle:not(.hit) { transition: r .2s var(--ac-ease), stroke .2s ease; }
#section-studio .ob-ws > .ob-pane, #section-studio .ob-right > section { transition: box-shadow .24s ease, border-color .2s ease, opacity .3s ease; }
/* the format bar's buttons and the tags */

/* the mode tabs' underline glides between Write and Board */
#section-studio .ob-tab, #section-studio .ob-sub-tab { transition: color .2s ease, border-color .24s var(--ac-ease); }
/* A's own section hover offer and settle button */
.ob-secglow, .ob-split, .ob-settlebtn { transition: opacity .22s ease, transform .26s var(--ac-ease) !important; }

/* Open Beside belongs to Write */
#section-studio .ob-ws[data-view="board"] .ac-sgut, #section-studio .ob-ws[data-view="board"] .ac-beside { display: none !important; }

/* ═══ the Outline: entries first, full titles, the open one marked; its headings under it on the rule ═══ */
/* the day is the root: the page the entries sit on, its entries hung from it on the rule */
#section-studio .ob-outlinebox .ob-lt { display: block; padding: 2px 8px 8px 0; font: 500 19px/1.25 var(--serif); color: var(--ink); letter-spacing: -.01em; }
#section-studio .ob-outlinebox .ob-outline { margin: 2px 0 0 3px; padding-left: 14px; border-left: 1px solid var(--border); }
#section-studio .ob-outlinebox .ob-outline li.h2 { padding-left: 0; margin-top: 10px; }
#section-studio .ob-outlinebox .ob-outline li.h2:first-child { margin-top: 2px; }
#section-studio .ob-outlinebox .ob-outline li.h2 .go { font-size: 17px; line-height: 1.3; color: var(--ink); white-space: normal; padding: 5px 8px 5px 0; }
#section-studio .ob-outlinebox .ob-outline li.h2.ac-open .go { font-weight: 500; }
#section-studio .ob-outlinebox .ob-outline li.h2:not(.ac-open) .go { color: var(--ink-soft); }
#obRT .ob-outline li.ac-tc > .go::before { width: 8px; height: 8px; margin: 0 9px 2px 0; }
#section-studio .ob-outlinebox .ob-outline li.h3 { padding-left: 17px; margin-left: 3px; border-left: 1px solid var(--border); }
#section-studio .ob-outlinebox .ob-outline li.h3 .go { font-size: 15px; line-height: 1.35; color: var(--ink-soft); white-space: normal; padding: 4px 8px 4px 0; }
#section-studio .ob-outlinebox .ob-outline li.h3 .go:hover { color: var(--ink); }
#section-studio .ob-outlinebox .ob-outline li[hidden] { display: none; }

/* ═══ type: italic only beside something, never for a line that stands alone ═══ */
#section-studio .ob-tree .hl { font-style: normal; font-size: 15px; fill: var(--ink); }
#section-studio .ob-tree .onode.float .hl { font-style: normal; fill: var(--ink); }
#section-studio .ob-tree .hl .hsub { font-style: italic; font-size: 13px; }
#section-studio .ob-tree .root .hl { font-style: normal; font-size: 14.5px; fill: var(--ink-soft); }
.ac-prompt { font-style: normal; font-size: 18.5px; color: var(--ink); }
.ac-prompt .t:hover { color: var(--purple); }
.ac-pmenu button { font-style: normal; }
#section-studio .ob-lday .lnode.q text { font-style: normal; }
#section-studio .ac-tl .lane { font-style: normal; fill: var(--ink-soft); }
#section-studio .ob-body h2.ob-blk:empty::before { font-style: normal; }
#obDock .ob-pill-t { font-style: normal; color: var(--muted); }
#obDock #obAsk { font-style: normal; }
.ac-conn .k, .ac-conn { font-style: normal; }
.ac-start p { font-style: normal; }
/* the rail widgets, a little bigger and wider */
#section-studio { --ac-rail: 136px; }   /* room for the longest card name, Questions, with its padding */
.ac-rail button, .ac-rail-w { height: 38px; padding: 0 12px 0 11px; font-size: 12.5px; gap: 9px; }
.ac-rail button .bi, .ac-rail-w .bi { font-size: 15px; }
.ac-rail { padding-left: 10px; padding-right: 10px; }
.ac-rail.left { padding-right: 12px; } .ac-rail.right { padding-left: 12px; }

/* the tree's labels: upright but no wider than the italic was, so three questions still sit side by side */
#section-studio .ob-tree .hl { font-size: 13.5px; letter-spacing: -.012em; }
#section-studio .ob-tree .onode.float .hl { font-size: 13.5px; }
#section-studio .ob-ws { --qw: 248px; }

/* ═══ labels: the strip says what it is, the cluster says Feeling and Topic ═══ */
.ac-strip-l { flex: 0 0 auto; font: 400 14px var(--serif); color: var(--muted); margin-right: 2px; }
.ac-bar { height: 32px; background: var(--st-panel); border: 1px solid var(--st-line); color: var(--ink-soft); font-size: 15px; gap: 8px; padding: 0 11px 0 9px; }
.ac-bar .car { color: var(--whisper); }
.ac-bar .from { color: var(--purple); font-size: 12px; }
.ac-bar:hover { border-color: var(--st-line-3); color: var(--ink); }
#section-studio .ac-bar.on { border-color: var(--ink); background: var(--st-panel); color: var(--ink); transform: none; box-shadow: none; font-weight: 500; }
#section-studio .ac-bar.on .car { color: var(--ink); }
.ac-bar .lbl { font: 400 12.5px var(--serif); color: var(--muted); margin-left: 2px; }
#section-studio .ob-pcell.feel .k, #section-studio .ob-pcell.topics .k { display: inline-flex; font: 400 13.5px var(--serif); font-style: normal; color: var(--muted); margin-right: 2px; }
#section-studio .ob-pcell .k .bi { display: none; }
#section-studio .ob-pcell.topics { margin-left: 8px; }
#section-studio .ob-tag.add { height: 26px; padding: 0 9px; border: 1px solid var(--st-line-2); border-style: solid; background: var(--st-panel); color: var(--ink); font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
#section-studio .ob-tag.add .bi { font-size: 9px; color: var(--purple); }
#section-studio .ob-tag.add:hover { border-color: var(--ink); }
#section-studio .ob-tag.add::after { content: ''; }

/* ═══ the AI box, warm: paper and taupe, no slate ═══ */
#obDock { --taupe: #8A7760; --taupe-deep: #74634E; --warm-line: var(--st-line); --warm-fill: var(--st-pane); }
#obDock .ob-chat { background: var(--st-panel) !important; border-color: var(--warm-line) !important; box-shadow: 0 2px 4px rgba(var(--st-shade),.04), 0 30px 70px -30px rgba(var(--st-shade),.35) !important; }
#obDock .ob-chat-head { padding: 14px 14px 12px 22px; border-bottom-color: var(--warm-line); }
#obDock .ob-chat-head .ob-ph { font-size: 21px; }
#obDock .ob-doors .ob-btn { height: 30px; padding: 0 11px; border-color: var(--warm-line); background: transparent; color: var(--ink); font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
#obDock .ob-doors .ob-btn:hover { border-color: var(--ink); }
#obDock .ob-inner { margin: 0 12px 12px; padding: 12px 12px 10px; border: 1px solid var(--warm-line); background: var(--warm-fill); }
#obDock .ob-recipe { border-color: var(--warm-line); background: var(--st-panel); color: var(--ink); font: 400 15px var(--serif); padding: 6px 12px; gap: 8px; }
#obDock .ob-recipe .bi { color: var(--taupe); font-size: 13px; }
#obDock .ob-recipe:hover { border-color: var(--st-line-3); background: var(--st-panel); color: var(--ink); }
#obDock .ob-recipe.all { color: var(--muted); background: transparent; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
#obDock .ob-inputrow { align-items: center; gap: 8px; border: 1px solid var(--warm-line); background: var(--st-panel); padding: 2px 6px 2px 12px; transition: border-color .2s ease, box-shadow .2s ease; }
#obDock .ob-inputrow:focus-within { border-color: #B8A98F; box-shadow: 0 0 0 3px rgba(138,119,96,.1); }
#obDock #obAsk { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none; padding: 9px 0; }
#obDock .ob-mode { height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--warm-line); background: var(--st-panel); color: var(--ink); font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 5px 5px, 5px 5px; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-repeat: no-repeat; }
#obDock .ob-send { width: 32px; height: 32px; background: var(--taupe) !important; border-color: var(--taupe) !important; color: var(--st-panel) !important; transition: background .2s ease, transform .2s var(--ac-ease); }
#obDock .ob-send:hover { background: var(--taupe-deep) !important; }
#obDock .ob-msg.me { border-color: var(--warm-line); background: color-mix(in srgb, var(--taupe) 8%, var(--st-panel)); }
#obDock .ob-msg.result { border-color: var(--warm-line); border-left-color: var(--purple); background: var(--warm-fill); }
#obDock .ob-empty .bi { color: var(--taupe); opacity: 1; }
#obDock .ob-orb { background: var(--st-panel); border-color: var(--warm-line); color: var(--purple); }
#obDock .ob-pill { border-color: var(--warm-line); }
#obDock .ob-pill-chip { border-color: var(--warm-line); color: var(--ink); }
#obDock .ob-orb-menu { background: var(--st-panel); border-color: var(--warm-line); }
#obDock .ob-barrow { border-color: var(--warm-line); }

/* ═══ motion that cannot be switched off by the page's own rules ═══ */
#obDock.open .ob-chat { animation: acFade .3s ease both !important; }
#obDock .ob-orb-menu { transition: opacity .22s var(--ac-ease), transform .26s var(--ac-ease) !important; }
#obDock .ob-orb-item { transition: opacity .2s ease, transform .26s var(--ac-ease), background .16s ease !important; }
#obDock.open .ob-barrow { animation: acFade .3s ease both; }
.tn-panel:not([hidden]) { animation: acRise .22s var(--ac-ease) both !important; }
.ac-layout.open .ac-menu, .ac-switch.open .ac-menu, .ac-prompt.open .ac-pmenu { animation: acRise .22s var(--ac-ease) both !important; }

/* the chat's input row: one line, the mode as a small caps select, the send square */
#obDock #obAsk { font-size: 16.5px; min-height: 34px; padding: 7px 0; min-width: 0; }
#obDock .ob-mode { line-height: 28px; height: 30px; flex: 0 0 auto; }
#obDock .ob-inputrow { min-height: 46px; }
#obDock .ob-chat { height: min(560px, calc(100vh - 170px)) !important; }

/* the strip: a caption row (its name, its actions), then the bars on a row of their own */
.ac-strip { flex-direction: column; align-items: stretch; gap: 8px; }
.ac-strip-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-bars { overflow: visible; flex-wrap: wrap; gap: 6px 6px; }
.ac-bar { max-width: 320px; min-width: 0; }
/* the chat's mode select, legible */
#obDock .ob-mode { font: 500 12px var(--sans) !important; text-transform: none; letter-spacing: 0; line-height: normal; padding: 0 26px 0 10px; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }
/* the bars share the row: they shrink to fit together, and only wrap when none can shrink further */
.ac-bar { flex: 1 1 auto; min-width: 110px; max-width: 320px; }
#obDock .ob-mode { padding: 0 26px 0 10px !important; height: 30px !important; box-sizing: border-box !important; }

.ac-bar { flex: 1 1 0; }
/* a bar's full title on hover, as a card above it in the house style, not the browser's tooltip */
.ac-bar { overflow: visible; }
.ac-bar::after { content: attr(data-full); position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; max-width: 360px; padding: 8px 12px 9px; background: var(--st-panel); border: 1px solid var(--st-line); box-shadow: 0 1px 2px rgba(var(--st-shade),.05), 0 14px 32px -16px rgba(var(--st-shade),.35); font: 400 15px/1.4 var(--serif); color: var(--ink); white-space: normal; width: max-content; text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease .25s, transform .22s var(--ac-ease) .25s; }
.ac-bar:hover::after { opacity: 1; transform: none; }
.ac-bar.lifting::after, .ac-bars:has(.lifting) .ac-bar::after { display: none; }

/* ═══ Questions as a list (the default): the trunk down the left, a dot per question, follow-ups indented on a dashed guide; Map is the tree ═══ */
.ac-qlens { padding: 0 16px 8px; }
.ob-qpane.ac-qlist-on #obQTree { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0; pointer-events: none; overflow: hidden; }
.ac-qlist { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 14px 10px 16px; }
.ob-qpane.ac-qlist-on .ac-qlist { display: block; }
.ac-qrow { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; padding: 0 0 18px; cursor: pointer; }
.ac-qrow::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: -6px; width: 1.5px; background: color-mix(in srgb, var(--ink) 42%, transparent); }
.ac-qrow:last-child::before { bottom: 4px; }
.ac-qrow .dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 7px 0 0 4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px color-mix(in srgb, var(--purple) 14%, var(--bg)); box-sizing: border-box; }
.ac-qrow.later .dot { background: var(--bg); border: 2px solid var(--purple); }
.ac-qrow.settled .dot { background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, var(--bg)); }
.ac-qrow .t { margin: 0; font: 400 18px/1.3 var(--serif); color: var(--ink); transition: color .16s ease; }
.ac-qrow.settled .t { color: var(--muted); }
.ac-qrow:hover .t { color: var(--purple); }
.ac-qrow.sel .t { color: var(--purple); font-weight: 500; }
.ac-qrow .fu { margin: 8px 0 0 28px; padding-left: 14px; border-left: 1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.ac-qrow .fu p { margin: 0 0 6px; font: 400 16.5px/1.3 var(--serif); color: var(--ink-soft); }
.ac-qrow .fu p:last-child { margin-bottom: 0; }
.ac-qrow.settled .fu p { color: var(--muted); }
.ac-qrow { animation: acFade .3s ease both; }

/* ── The Studio's paper as tokens: the same six values light has always had, and a night set under the dark theme.
   Only colours live here; nothing about size or position. ── */
body.studio-on, #section-studio, #obDock { --st-canvas: #EFECE5; --st-pane: #F6F3EC; --st-panel: #FCFBF8; --st-line: #E3DDD1; --st-line-2: #DCD5C8; --st-line-3: #C9BFAE; --st-shade: 60,45,25; }
html[data-theme="dark"] body.studio-on, html[data-theme="dark"] #section-studio, html[data-theme="dark"] #obDock { --st-canvas: #0E0E0F; --st-pane: #151515; --st-panel: #1B1B1B; --st-line: rgba(255,255,255,.09); --st-line-2: rgba(255,255,255,.14); --st-line-3: rgba(255,255,255,.22); --st-shade: 0,0,0; }
html[data-theme="dark"] #obDock { --taupe: #B9A994; --taupe-deep: #CDBFAC; }
html[data-theme="dark"] #obDock .ob-send { color: #14120E !important; }

/* ═══ round one of the quiet page (2026-11-04) ═══ */
/* the strip shows only when the day holds more than one entry */
.ac-strip[hidden] { display: none !important; }
/* the open entry's line: its topics on the left, its menu on the right */
.ac-entryrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 4px; min-height: 32px; }
.ac-entryprops { min-width: 0; flex: 1 1 auto; }
#section-studio .ac-entryrow .ob-props .ob-propbox { justify-content: flex-start; }
.ac-emenu { position: relative; flex: 0 0 auto; }
.ac-emenu > button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ac-emenu > button .bi { font-size: 10px; color: var(--muted); transition: transform .2s ease; }
.ac-emenu.open > button .bi { transform: rotate(180deg); }
.ac-emenu.open .ac-menu { display: flex; right: 0; left: auto; top: 36px; min-width: 210px; }
.ac-emenu .ac-menu button:disabled { opacity: .45; cursor: default; }
/* the day row's way home, and the question New Entry asks on a past day */
.ac-today { margin-left: 6px; height: 30px; padding: 0 12px; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
.ac-today[hidden] { display: none; }
.ac-daychoice { left: 34px; right: auto; top: calc(100% + 8px); min-width: 250px; }
.ac-day.asking .ac-daychoice { display: flex; animation: asPageIn .22s ease both; }
/* calendar focus, drawn from the palette */
.ac-cal-g button:focus-visible, .ac-daystep:focus-visible, .ac-datetxt:focus-visible, .ac-emenu button:focus-visible { outline: 2px solid var(--action, var(--ink)); outline-offset: 2px; }
/* announcements for screen readers only */
.ac-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* entry text is always the serif: pasted text brings its own fonts, which the page sets aside */
#section-studio .ob-body :is(p, span, div, li, font, b, i, strong, em, a, h2, h3) { font-family: inherit !important; }
@media (prefers-reduced-motion: reduce) { .ac-day.asking .ac-daychoice { animation: none; } }
#section-studio .ac-entryprops .ob-props { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; }
#section-studio .ac-entryprops .ob-pcell.topics { margin-left: 0; }
#section-studio .ac-entryprops .ob-props .ob-propbox { margin: 0; }
/* the empty page says where writing goes */
#obBody[data-ac-empty] > p:first-of-type::before { float: left; height: 0; color: var(--whisper); pointer-events: none; font-style: italic; }
#obBody[data-ac-empty="today"] > p:first-of-type::before { content: 'Write about today.'; }
#obBody[data-ac-empty="day"] > p:first-of-type::before { content: 'Write about this day.'; }
.ac-prompt[hidden] { display: none !important; }

/* ═══ the day as cards, the entry pane, notes and questions (2026-11-04, round two) ═══ */
/* the canvas: the day's cards; an open card's entry takes the right half */
.ac-dayview { --e: var(--sage); --q: var(--purple); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; align-items: start; }
.ac-dayview.split { grid-template-columns: minmax(230px, 32%) minmax(0, 1fr); }
.ac-dayview:not(.split) .ac-pane { display: none; }
.ac-cgroup + .ac-cgroup { margin-top: 26px; }
.ac-ch { margin: 0 0 12px; font: 500 17px/1.2 var(--serif); color: var(--ink-soft); letter-spacing: -.01em; }
.ac-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ac-dayview.split .ac-cgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ac-card { --c: var(--e); position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 18px 18px 15px; text-align: left; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--c) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 32%, var(--border)); border-radius: 0;
  transition: box-shadow .28s ease, border-color .2s ease, background .2s ease; }
.ac-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.ac-card.q { --c: var(--q); }
.ac-card.q.settled { --c: var(--gold); }
.ac-card:hover { border-color: color-mix(in srgb, var(--c) 42%, var(--border)); box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--c) 55%, transparent); }
.ac-card.on { background: color-mix(in srgb, var(--c) 10%, var(--bg)); border-color: color-mix(in srgb, var(--c) 60%, var(--border)); }
.ac-card:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ac-card .t { font: 500 19px/1.25 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.ac-card.q .t { font-style: italic; font-weight: 500; }
.ac-card .x { font: 400 15.5px/1.45 var(--serif); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-card .w { margin-top: auto; padding-top: 6px; font: italic 400 14px/1.3 var(--serif); color: color-mix(in srgb, var(--c) 55%, var(--muted)); }
.ac-dayview.split .ac-card { min-height: 0; padding: 14px 16px 12px; }
.ac-dayview.split .ac-card .x { -webkit-line-clamp: 2; }
.ac-card.new { align-items: center; justify-content: center; gap: 8px; color: var(--muted); background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--e) 30%, var(--border)); }
.ac-card.new::before { display: none; }
.ac-card.new .bi { font-size: 16px; color: var(--e); }
.ac-card.new .t { font-size: 18px; color: var(--ink-soft); font-style: italic; font-weight: 400; }
.ac-card.new:hover .t { color: var(--ink); }
.ac-cards.arrive .ac-card { animation: asPageIn .42s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
/* the pane: the open entry, sliding in from the right */
.ac-pane { min-width: 0; padding: 8px 4px 0 28px; border-left: 1px solid var(--border-light); }
.ac-pane.in { animation: acPaneIn .46s cubic-bezier(.16,1,.3,1) both; }
@keyframes acPaneIn { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.ac-pane .ac-entryrow { margin: 0 0 6px; }
.ac-pane-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ac-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; background: none; color: var(--ink-soft); font-size: 18px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ac-iconbtn:hover, .ac-emenu.open > .ac-iconbtn { color: var(--ink); border-color: var(--border); }
.ac-iconbtn:focus-visible { outline: 2px solid var(--action, var(--ink)); outline-offset: 2px; }
.ac-emenu .ac-menu-rule { height: 1px; margin: 3px 6px; background: var(--border-light); }
/* the format bar belongs to an open entry, and so does the Outline */
.ob-ws[data-view="write"]:not(.ac-pane-on) .ob-fmt { display: none; }
.ob-ws.ac-noentry [data-ac-unfold="outline"] { display: none; }
/* notes: the tooltip over highlighted words and the box under them */
.ac-notetip { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 35%, transparent); animation: asPageIn .18s ease both; }
.ac-notetip[hidden], .ac-notebox[hidden] { display: none; }
.ac-notetip .bi { color: var(--purple); }
.ac-notetip:hover { border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); }
.ac-notebox { position: absolute; z-index: 31; width: 300px; padding: 12px 12px 10px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--ink) 40%, transparent); animation: asPageIn .22s cubic-bezier(.16,1,.3,1) both; }
.ac-notebox .q { margin: 0 0 8px; font: italic 400 15px/1.4 var(--serif); color: var(--ink-soft); }
.ac-notebox textarea { width: 100%; min-height: 70px; resize: vertical; font: 400 16px/1.45 var(--serif); padding: 8px 10px; box-sizing: border-box; }
.ac-notebox .a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#section-studio mark.ac-mark.pending { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.ac-note.just { animation: acNoteIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes acNoteIn { from { opacity: 0; background: color-mix(in srgb, var(--purple) 10%, var(--bg)); } to { opacity: 1; } }
.ac-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* questions: one field to search and ask; the ask row at the foot gives way to it */
#section-studio #obQFoot .ob-qadd.new { display: none; }
.ac-qfind { position: relative; margin: 2px 14px 10px 16px; }
.ac-qfind > .bi { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
#section-studio .ac-qfind input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px 0 32px !important; font: 400 16px var(--serif); }
.ac-qsug { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; width: auto; max-width: 100%; box-sizing: border-box; padding: 8px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--ink) 40%, transparent); animation: asPageIn .2s cubic-bezier(.16,1,.3,1) both; }
.ac-qsug[hidden] { display: none; }
.ac-qsug .k { margin: 2px 4px 6px; font: italic 400 14px var(--serif); color: var(--muted); }
.ac-qsug-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px 6px 6px; }
.ac-qsug-row .ob-btn { padding: 4px 9px; }
.ac-qsug-f .ob-btn { max-width: 100%; white-space: normal; text-align: left; }
.ac-qsug-row[aria-selected="true"], .ac-qsug-row:hover { background: color-mix(in srgb, var(--purple) 6%, var(--bg)); }
.ac-qsug-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.ac-qsug-row .dot.later { background: var(--bg); border: 1.5px solid var(--purple); box-sizing: border-box; }
.ac-qsug-row .dot.settled { background: var(--gold); }
.ac-qsug-row .t { font: 400 16px/1.3 var(--serif); color: var(--ink-soft); }
.ac-qsug-row .t b { color: var(--ink); font-weight: 600; }
.ac-qsug-f { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.ac-qsug-f:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ac-qnone { margin: 6px 0 0 32px; font: italic 400 15.5px var(--serif); color: var(--muted); }
.ac-qlist .ac-qrow { animation: none; }
.ac-qrow[hidden] { display: none; }
.ac-qrow .t .car { display: inline-block; margin: 0 6px 0 0; font-size: 9px; color: var(--purple); vertical-align: 2px; transition: transform .2s ease; }
.ac-qrow.folded .t .car { transform: rotate(-90deg); }
/* a question with follow-ups is the head of its strand: a larger dot in a ring */
.ac-qrow.head > .dot { width: 16px; height: 16px; margin: 5px 0 0 2px; background: var(--bg); border: 3px solid var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 16%, var(--bg)); }
.ac-qrow.head.settled > .dot { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, var(--bg)); }
/* the strand: two threads twisting down the follow-ups, crossing at each one */
.ac-qrow .fu.ac-helix { position: relative; margin: 12px 0 0 0; padding-left: 28px; border-left: 0; }
.ac-qrow .fu.ac-helix[hidden] { display: none; }
.ac-helix .hx { position: absolute; left: 0; top: 0; width: 20px; overflow: visible; }
.ac-helix .hx path { fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ac-helix .hx .s1 { opacity: .78; } .ac-helix .hx .s2 { opacity: .34; }
.ac-helix .hx .rung { stroke: var(--purple); stroke-width: 1.1; opacity: .3; }
.ac-qrow.settled .ac-helix .hx path, .ac-qrow.settled .ac-helix .hx .rung { stroke: var(--gold); }
.ac-helix .fn { position: relative; margin: 0 0 10px; }
.ac-helix .fn .node { position: absolute; left: -22px; z-index: 1; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--purple); box-sizing: border-box; }
.ac-qrow.settled .ac-helix .fn .node { border-color: var(--gold); }
.ac-helix.grow .fn:last-child { animation: acFuIn .7s cubic-bezier(.16,1,.3,1) .35s both; }
.ac-helix.grow .fn:last-child .node { animation: acNodePop .6s cubic-bezier(.16,1,.3,1) .7s both; }
@keyframes acFuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes acNodePop { 0% { transform: scale(0); } 70% { transform: scale(1.5); background: var(--purple); } 100% { transform: scale(1); } }
/* a question coming into focus: its dot rises and holds the space for a moment */
.ac-qrow.rise .t { animation: acRiseT 1.3s ease both; }

@keyframes acRiseT { 0% { color: var(--ink); } 40% { color: var(--purple); } 100% { color: var(--purple); } }
@media (prefers-reduced-motion: reduce) {
  .ac-pane.in, .ac-cards.arrive .ac-card, .ac-qrow.rise > .dot, .ac-qrow.rise .t, .ac-helix.grow .fn:last-child, .ac-helix.grow .fn:last-child .node, .ac-notetip, .ac-notebox, .ac-qsug, .ac-note.just { animation: none; }
  .ac-card { transition: none; }
}

.ac-iconbtn .bi-three-dots { font-size: 20px; }

/* ═══ round three (2026-11-04): the Questions map with follow-up chains, a panel-sized search box, layouts that fit ═══ */
/* follow-ups: a zigzag of small nodes hanging from their question; the newest draws in */
#section-studio .ob-tree .fuline { fill: none; stroke: var(--purple); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
#section-studio .ob-tree .funode .fdot { fill: var(--bg); stroke: var(--purple); stroke-width: 1.5; }
#section-studio .ob-tree .funode .hit { fill: transparent; }
#section-studio .ob-tree .funode:hover .fdot { fill: color-mix(in srgb, var(--purple) 25%, var(--bg)); }
#section-studio .ob-tree .ftl { font: italic 400 12px var(--serif); fill: var(--ink-soft); opacity: 0; transition: opacity .2s ease; paint-order: stroke; stroke: var(--st-panel, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
#section-studio .ob-tree .onode.sel .ftl, #section-studio .ob-tree .funode:hover .ftl { opacity: 1; }
#section-studio .ob-tree .fuline.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: acDrawIn .7s cubic-bezier(.16,1,.3,1) both; }
#section-studio .ob-tree .funode.fresh .fdot { animation: acFade .4s ease .45s both; }
@keyframes acDrawIn { to { stroke-dashoffset: 0; } }
/* the head of a chain wears a ring, so the question its follow-ups grew from is plain to see */
#section-studio .ob-tree .onode.head .ring { fill: none; stroke: var(--purple); stroke-width: 1.4; opacity: .55; }
#section-studio .ob-tree .onode.head.folded .ring { stroke-dasharray: 3 3; }
/* labels sit on a halo of the panel, so a chain behind them never crosses the words */
#section-studio .ob-tree .hl { paint-order: stroke; stroke: var(--st-panel, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
/* searching dims the questions that do not match */
#section-studio .ob-tree .onode.dim { opacity: .22; transition: opacity .2s ease; }
/* the canvas and the open entry fit whatever width the panels leave them */
#section-studio .ob-center { container: studio-center / inline-size; }
@container studio-center (max-width: 880px) {
  .ac-dayview.split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ac-dayview.split .ac-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .ac-dayview.split .ac-cgroup, .ac-dayview.split .ac-cgrid { display: contents; }
  .ac-dayview.split .ac-ch { display: none; }
  .ac-dayview.split .ac-card { flex: 0 0 190px; min-height: 0; }
  .ac-dayview.split .ac-card .x { display: none; }
  .ac-pane { padding-left: 0; border-left: 0; }
}
@container studio-center (max-width: 560px) {
  .ac-cgrid { grid-template-columns: minmax(0, 1fr); }
  .ac-entryrow { flex-wrap: wrap; }
}
#section-studio .ob-pane, #section-studio .ob-right > section { min-width: 0; }

/* the day as the questions' parent: a square in the questions' purple, and a line from each question tied to it */
#section-studio .ob-tree .dayq rect { fill: var(--purple); stroke: var(--bg); stroke-width: 2; }
#section-studio .ob-tree .dayq .hl { font: italic 400 14.5px var(--serif); fill: var(--ink-soft); }
#section-studio .ob-tree .daylink { fill: none; stroke: var(--purple); stroke-width: 1.4; stroke-linecap: round; opacity: .45; }
#section-studio .ob-tree .daylink.settled { stroke: var(--gold); opacity: .6; }
#section-studio .ob-tree .daylink.drawin { stroke-dasharray: 1; stroke-dashoffset: 1; animation: acDrawIn .7s cubic-bezier(.16,1,.3,1) both; }
/* rail cards keep their padding on both sides; a long name ends in an ellipsis rather than touching the edge */
.ac-rail button, .ac-rail-w { padding-right: 12px; overflow: hidden; }
.ac-rail button > span, .ac-rail-w > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board is just the board: no rails, no Questions, no Links; the board and its Library column share the width */
#section-studio .ob-ws[data-view="board"] { grid-template-columns: 0 0 0 0 minmax(0, 1fr) var(--gr) var(--rw) 0 0 !important; }
#section-studio .ob-ws[data-view="board"] > .ac-rail, #section-studio .ob-ws[data-view="board"] > .ac-drawer, #section-studio .ob-ws[data-view="board"] .ob-qpane, #section-studio .ob-ws[data-view="board"] .ob-gut[data-g="q"] { display: none !important; }
#section-studio .ob-ws[data-view="board"] .ob-right > section[data-ac-panel="links"], #section-studio .ob-ws[data-view="board"] .ob-right > .ob-gut-row { display: none !important; }
#section-studio .ob-ws[data-view="board"] .ob-right > section[data-ac-panel="outline"] { flex: 1 1 auto !important; height: auto !important; max-height: none !important; }

/* linked entries, in place of Topics on the open entry's line */
#section-studio .ac-entryprops #obProps { display: none; }
.ac-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; }
.ac-links .k { font: 400 14px var(--serif); color: var(--muted); margin-right: 2px; }
.ac-link { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--sage) 35%, var(--border)); background: color-mix(in srgb, var(--sage) 7%, var(--bg)); }
.ac-link .go { border: 0; background: none; padding: 3px 4px 3px 10px; font: 400 15px var(--serif); color: var(--ink); cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-link .go:hover { text-decoration: underline; text-underline-offset: 3px; }
.ac-link .x { border: 0; background: none; padding: 0 8px; color: var(--muted); font-size: 10px; cursor: pointer; }
.ac-link .x:hover { color: var(--ink); }
.ac-lwrap { position: relative; }
.ac-ladd { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.ac-ladd:hover { border-color: color-mix(in srgb, var(--sage) 55%, var(--border)); }
.ac-ladd .bi { color: var(--sage-d); font-size: 14px; }
.ac-lpick { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 320px; max-width: 80vw; padding: 8px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--ink) 40%, transparent); display: flex; flex-direction: column; gap: 6px; animation: acFade .2s ease both; }
.ac-lpick[hidden] { display: none; }
.ac-lpick input { width: 100%; box-sizing: border-box; height: 34px; font: 400 15.5px var(--serif); }
.ac-lpick .list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.ac-lpick .list button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.ac-lpick .list button:hover, .ac-lpick .list button:focus-visible { background: color-mix(in srgb, var(--sage) 9%, var(--bg)); outline: none; }
.ac-lpick .list .t { font: 400 16px/1.3 var(--serif); color: var(--ink); }
.ac-lpick .list .w { font: italic 400 13.5px var(--serif); color: var(--muted); }
.ac-lpick .none { padding: 6px 8px; font: italic 400 15px var(--serif); color: var(--muted); }
#section-studio .ob-subtabs:empty { display: none !important; }
/* in Board the Write page's wrapper steps out of the way, so the whole canvas takes clicks */
#section-studio .ob-ws[data-view="board"] .ac-split { display: none !important; }
/* the Selected card's title: room under the tabs, the serif's own spacing (never tracked out), a steady line height */
#section-studio #obRT .ob-sel { padding-top: 18px; }
#section-studio #obRT .ob-sel h4 { margin: 0 0 4px; font: 500 24px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
#section-studio #obRT .ob-sel .when { margin-bottom: 14px; }
/* Chat, in the Studio's box: Recent conversations, and the notice a new conversation opens with */
#obDock .ob-recent { position: relative; }
#obDock #obChatRecent { display: inline-flex; align-items: center; gap: 6px; }
#obDock #obChatRecent .bi { font-size: 10px; color: var(--muted); }
#obDock .ob-recent-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 60; width: 280px; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--ink) 40%, transparent); display: flex; flex-direction: column; }
#obDock .ob-recent-menu[hidden] { display: none; }
#obDock .ob-recent-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; background: none; text-align: left; cursor: pointer; }
#obDock .ob-recent-menu button:hover, #obDock .ob-recent-menu button.on { background: var(--surface); }
#obDock .ob-recent-menu .t { font: 400 16px/1.3 var(--serif); color: var(--ink); }
#obDock .ob-recent-menu .w { font: italic 400 13.5px var(--serif); color: var(--muted); }
#obDock .ob-recent-menu .none { margin: 6px 8px; font: italic 400 15px var(--serif); color: var(--muted); }
#obDock .ob-notice { max-width: 56ch; margin: 14px auto 0; padding-top: 12px; border-top: 1px solid var(--border-light); font: italic 400 14.5px/1.5 var(--serif); color: var(--muted); }
/* the box at the foot is the coach: no analysis picker, suggestions or analysis button; the analyses the Analysis drawer
   runs still happen here, out of sight, so the drawer can show them */
#obDock .ob-orb-wrap, #obDock .ob-recipes, #obDock .ob-pill-chip, #obDock #obMode { display: none !important; }
#obThread .ob-msg.result, #obThread .ob-msg.ai:has(> p.meta) { display: none !important; }
#obDock .ob-coachmodes { padding: 2px 2px 8px; }
#obDock .ob-cm-row { display: flex; flex-wrap: wrap; gap: 6px; }
#obDock .ob-cm { height: 30px; padding: 0 12px; border: 1px solid var(--warm-line, var(--border)); background: transparent; color: var(--ink-soft); font: 500 12.5px var(--sans); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
#obDock .ob-cm:hover { color: var(--ink); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); }
#obDock .ob-cm.on { color: var(--ink); border-color: var(--purple); background: color-mix(in srgb, var(--purple) 8%, transparent); }
#obDock .ob-cm:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
#obDock .ob-cm-d { margin: 6px 2px 0; font: italic 400 14.5px var(--serif); color: var(--muted); }

/* ═══ Entries as a directory (2026-11-04): folders and files, the way Obsidian or VS Code list them ═══ */
#section-studio .ob-left .ob-phrow { justify-content: space-between; align-items: center; }
#section-studio #obNewFolder { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; background: none; color: var(--ink-soft); font-size: 16px; cursor: pointer; }
#section-studio #obNewFolder:hover { color: var(--ink); border-color: var(--border); }
#section-studio #obTree { padding: 4px 4px 12px; }
#section-studio #obTree .ob-folder.dir { margin: 0 0 2px; }
#section-studio #obTree .ob-frow { position: relative; display: flex; align-items: center; min-height: 32px; padding: 0 4px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
#section-studio #obTree .ob-frow:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#section-studio #obTree .ob-frow.drop, #section-studio #obTree .ob-root.drop { border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); background: color-mix(in srgb, var(--purple) 7%, transparent); }
#section-studio #obTree .ob-fold { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 2px; border: 0; background: none; text-align: left; cursor: pointer; font: 500 16px var(--serif); color: var(--ink); }
#section-studio #obTree .ob-fold .car { font-size: 10px; color: var(--muted); transition: transform .2s ease; }
#section-studio #obTree .ob-folder.open > .ob-frow .car { transform: rotate(90deg); }
#section-studio #obTree .fo { font-size: 15px; color: var(--tc, color-mix(in srgb, var(--gold) 70%, var(--muted))); }
#section-studio #obTree .ob-folder.ac-tc .fo { color: var(--tc); }
#section-studio #obTree .fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#section-studio #obTree .ob-fact { display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
#section-studio #obTree .ob-frow:hover .ob-fact, #section-studio #obTree .ob-frow:focus-within .ob-fact { opacity: 1; }
#section-studio #obTree .ob-fact button { width: 26px; height: 26px; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
#section-studio #obTree .ob-fact button:hover { color: var(--ink); }
#section-studio #obTree .ob-fname { flex: 1 1 auto; height: 28px; margin-left: 8px; font: 400 15.5px var(--serif); padding: 0 8px !important; }
#section-studio #obTree .ob-folder.dir > .ob-fbody { display: none; margin: 0 0 4px 13px; padding-left: 10px; border-left: 1px solid var(--border-light); }
#section-studio #obTree .ob-fbody > .ob-folder.dir { margin: 0; }
#section-studio #obTree .ob-fbody > .ob-ecards:empty { display: none; }
#section-studio #obTree .ob-frow[draggable="true"] { cursor: grab; }
#section-studio #obTree .ob-folder.dir.open > .ob-fbody { display: block; }
#section-studio #obTree .ob-ecards { list-style: none; margin: 0; padding: 0; }
#section-studio #obTree .ob-root { min-height: 40px; margin-top: 4px; padding: 2px 0 8px; border: 1px solid transparent; }
#section-studio #obTree .ob-ecard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 30px; margin: 0; padding: 4px 8px; border: 0; border-left: 0; background: none; cursor: pointer; transition: background .15s ease; }
#section-studio #obTree .ob-ecard::before, #section-studio #obTree .ob-ecard::after { display: none; }
#section-studio #obTree .ob-ecard:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#section-studio #obTree .ob-ecard.on { background: color-mix(in srgb, var(--purple) 9%, transparent); }
#section-studio #obTree .ob-ecard .fi { font-size: 13px; color: var(--muted); }
#section-studio #obTree .ob-ecard .t { font: 400 15.5px/1.3 var(--serif); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#section-studio #obTree .ob-ecard .d { font: italic 400 13px var(--serif); color: var(--muted); white-space: nowrap; }
#section-studio #obTree .ob-fempty { padding: 4px 8px 6px; font: italic 400 14px var(--serif); color: var(--muted); }
/* topics are gone: no topic from a heading, no topic chips or topic and feeling filters in the Library */
#section-studio #obRT .ob-outline .mk, #section-studio .ob-ltags, #section-studio #obLibTopic, #section-studio #obLibFeel { display: none !important; }
/* sections no longer offer to open on their own */
#section-studio #obSplit, #section-studio #obSecGlow { display: none !important; }
/* the coach sits in the middle of the window at one size, whatever the panels around it do */
#obDock { left: 50% !important; width: min(760px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; }
#section-studio #obNew[hidden] { display: none !important; }