@font-face{font-family:"Outfit";src:url("assets/fonts/Outfit-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{
  --bg:#ECEAE4;--ink:#2A2925;--ink-2:#5B5952;--ink-3:#8C897F;--ink-4:#B4B0A6;
  --line:#D9D5CC;--line-2:#C9C4B9;--chip:#E2DFD8;--accent:#B5482C;
  --paper-letter:#DEDAD1;--paper-white:#FFFFFF;--paper-warm:#EDE6D6;--paper-dark:#23221F;
  --shadow-paper:0 1px 1px rgba(42,41,37,.05),0 10px 18px -10px rgba(42,41,37,.18),0 30px 46px -30px rgba(42,41,37,.26);
  --shadow-lift:0 1px 1px rgba(42,41,37,.06),0 20px 32px -14px rgba(42,41,37,.24),0 50px 72px -36px rgba(42,41,37,.32);
  --shadow-pop:0 2px 4px rgba(42,41,37,.05),0 24px 50px -20px rgba(42,41,37,.3),0 0 0 .5px rgba(42,41,37,.08);
  --latin:"Outfit","Avenir Next",sans-serif;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain-soft:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain-faint:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .15 0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}
/* Skin only: the six stored palette keys and record coordinates stay unchanged. */
:root{--paper-gray:var(--paper-letter);--paper-dark-text:#EEEBE3;--paper-dark-sub:#9C998F;--paper-dark-body:#C6C2B8;--paper-dark-rule:rgba(238,235,227,.14);--surface:var(--paper-white);--desk:var(--bg);--muted:var(--ink-3);--ink-soft:var(--ink-2);--ink-faint:var(--ink-3);--rule:var(--line);--line-2: #C9C4B9;--green:var(--ink);--float-bg:var(--bg);--chip-active:var(--paper-white);--serif:var(--sans);--mono:var(--latin);--paper-edge:rgba(42,41,37,.05);--paper-light:rgba(255,255,255,.22);--paper-shade:rgba(42,41,37,.025);--focus-ink:rgba(42,41,37,.12);--surface-soft:#FAF9F6;--veil:rgba(236,234,228,.62)}
html,body{background:var(--bg);color:var(--ink)}body{font-family:var(--sans);font-weight:400;font-feature-settings:"kern";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,textarea,select{font-family:var(--sans)}
body::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:multiply;pointer-events:none;z-index:90}
body.ac-entering::after{opacity:.16}.workspace-preparing>*,.workspace-error>:not(.workspace-failure){visibility:hidden}.workspace-failure{position:fixed;inset:0;background:var(--bg);z-index:1000;padding:20vh max(25px,calc((100vw - 620px)/2));font-family:var(--sans)}.workspace-failure h1{font-size:25px;font-weight:500}.workspace-failure p{font-size:14px;line-height:1.9;color:var(--ink-2);margin:25px 0}.workspace-failure button{background:var(--ink);color:var(--paper-white);border:0;border-radius:18px;padding:14px 24px;font:inherit}.workspace-failure a{display:inline-block;color:var(--ink-2);margin:20px}
.topbar{max-width:none;padding:0 48px;height:76px}.board{background-image:none}.board::after{background:none}.afterclip-brand{display:flex;align-items:center;font-family:var(--latin);font-size:20px;font-weight:400;line-height:1;color:var(--ink)}.afterclip-brand svg{width:1.3em!important;height:1.3em!important;flex:none;overflow:visible}.afterclip-brand .page{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}.afterclip-brand .flap{fill:currentColor;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}.afterclip-brand .fword{margin-left:.36em;letter-spacing:-.02em;white-space:nowrap}.afterclip-brand .fword b{font-weight:500}.afterclip-brand .fword span{font-weight:300}.brand .afterclip-brand{pointer-events:none}
.note,.archive-note,.search-result,.stack-row,.mini-note{background:var(--grain-faint),linear-gradient(168deg,var(--paper-light),transparent 45%,var(--paper-shade)),var(--paper,var(--paper-white));background-blend-mode:multiply,normal,normal;box-shadow:var(--shadow-paper),inset 0 0 0 .5px var(--paper-edge)}
.note:hover,.archive-pinboard.is-open .archive-note:hover{box-shadow:var(--shadow-lift),inset 0 0 0 .5px var(--paper-edge)}
:is(.note,.archive-note,.mini-note,.search-result,.stack-row)[style*="#e5dff0"]{background-image:var(--grain-faint);background-blend-mode:screen}
:is(.note,.archive-note,.mini-note,.search-result,.stack-row)[style*="#efdad2"],:is(.note,.archive-note,.mini-note,.search-result,.stack-row)[style*="#eee8d9"]{background-image:var(--grain-soft),linear-gradient(168deg,var(--paper-light),transparent 45%,var(--paper-shade))}
.note .open-note,.archive-pinboard h3{font-family:var(--sans);font-weight:500}.note .open-note{font-size:16px;line-height:1.55;letter-spacing:.01em}.note .thought-button,.note .journal-body{font-weight:400}.source,.meta-time,.date-label,.day-number,.note-author{font-family:var(--sans)}
.note-art,.archive-note .archive-media{border-radius:8px;overflow:hidden}
/* Keep the calendar pile's crop aligned with its expanded reading cards. */
.sidebar-pile .pile-sheet:not(.is-miniapp) .note-art img{object-position:center}
.calendar-caption.calendar-writing{display:block;line-height:1.7;font-size:11px;padding-top:17px}
.calendar-writing-totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;color:var(--ink-3)}
.calendar-writing-stat{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.calendar-writing-stat strong{font-family:var(--sans);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.calendar-writing-brand{margin:6px 0 0;color:var(--ink-3);font-size:11px}
@media(max-width:700px){.calendar-writing-totals{column-gap:18px}.calendar-caption.calendar-writing{padding-top:14px}}
/* 2026-11-11 Claude: totals, a one-line daily writing rhythm and the brand line share a single row. */
.calendar-caption.calendar-writing{display:flex;align-items:flex-end;gap:14px 30px;padding-top:14px}
.calendar-writing-totals{flex:none}
.calendar-rhythm{display:flex;flex:1 1 auto;align-items:flex-end;gap:3px;min-width:140px;max-width:440px;height:24px;margin-bottom:3px}
.calendar-rhythm i{flex:1 1 0;max-width:8px;height:max(2px,var(--h,0%));border-radius:2px;background:rgba(42,41,37,.09);transition:background-color .18s ease}
.calendar-rhythm i.has-words{background:rgba(42,41,37,.24)}
.calendar-rhythm i.is-today:not(.is-selected){background:rgba(42,41,37,.42)}
.calendar-rhythm i.is-selected{background:var(--ink,#2a2925)}
.calendar-writing .calendar-writing-brand{flex:none;margin:0 0 0 auto;white-space:nowrap}
@media(max-width:1100px){.calendar-writing .calendar-writing-brand{display:none}}
@media(max-width:700px){.calendar-caption.calendar-writing{flex-wrap:wrap}.calendar-rhythm{flex-basis:100%;max-width:none}}
/* Sidebar: subtitle removed, daily heading kept for screen readers; stats and the paper pile sit higher. */
.day-sidebar .day-summary-head h2{margin-bottom:4px}
.day-sidebar .day-stats{margin-top:8px}
.day-sidebar .daily-panel{margin-top:10px}
/* The whole month, its writing row and the day pile fit one desktop screen without scrolling. */
@media(min-width:701px){.calendar-layout{padding-bottom:12px}}
.note-art{position:relative}.note-art img,.archive-note img,.archive-media img{filter:saturate(.82) contrast(.97)}.note-art::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
#noteDialog.is-note-detail{background:var(--grain-faint),linear-gradient(168deg,var(--paper-light),transparent 45%,var(--paper-shade)),var(--paper,var(--paper-white))}#noteDialog .detail-title,.detail-leave h2,.modal-content h2{font-family:var(--sans);font-weight:500}dialog::backdrop{background:var(--veil)}
#noteDialog.is-note-detail.detail-dark{background-image:var(--grain-faint);background-blend-mode:screen}
#noteShareDialog{background:var(--bg);color:var(--ink);font-family:var(--sans)}#noteShareDialog .ns-card{background:var(--paper-white);color:var(--ink)}#noteShareDialog .ns-card.ns-dark{background:var(--paper-dark);color:var(--paper-dark-text)}#noteShareDialog .ns-quote{font-family:var(--sans);font-weight:400}#noteShareDialog h2{font-family:var(--sans);font-weight:500}#noteShareDialog .ns-brand{font-family:var(--latin);font-size:16px;font-weight:400}#noteShareDialog .ns-brand i{display:none}#noteShareDialog .ns-swatches button{background:var(--paper-white);border-color:var(--bg);outline-color:var(--line-2)}#noteShareDialog .ns-swatches button:last-child{background:var(--paper-dark)}
#captureForm{background:rgba(248,247,243,.92);backdrop-filter:blur(8px);box-shadow:var(--shadow-pop)}.primary{background:var(--ink)}.date-label{letter-spacing:.05em}.main-nav,.filters{background:var(--chip)}.main-nav .active,.filter.active{background:var(--surface-soft)}
body.ac-entering{overflow:hidden}.ac-desk-brand-hidden .topbar>.brand{visibility:hidden}body.ac-onboard-inert>.topbar,body.ac-onboard-inert>main,body.ac-onboard-inert>#captureForm,body.ac-onboard-inert>.floating-search,body.ac-onboard-inert>.floating-trash,body.ac-onboard-inert>.floating-help{visibility:hidden}
.note.is-onboarding-sample{width:286px!important;transform:rotate(var(--ac-rotation,0deg))}.note.is-onboarding-sample::before{animation:ac-pin-in 1s var(--ease-out) both}.ac-ritual-pending .note{opacity:0}.ac-ritual-pending #captureForm,.ac-ritual-pending .floating-help,.ac-ritual-pending .floating-trash,.ac-ritual-pending .floating-search{opacity:0;pointer-events:none}.ac-ritual-controls-in #captureForm{animation:ac-capture-in 1s var(--ease-out) both}.ac-ritual-controls-in .floating-help,.ac-ritual-controls-in .floating-trash,.ac-ritual-controls-in .floating-search{transition:opacity .8s var(--ease);opacity:1;pointer-events:auto}
@keyframes ac-capture-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}@keyframes ac-pin-in{0%,50%{opacity:0;translate:0 -12px}100%{opacity:1;translate:0 0}}
@media(max-width:700px){:root{--page-gutter:18px}.topbar{height:64px;padding:0 18px}.afterclip-brand{font-size:18px}.topbar .main-nav .nav-btn{font-size:12px}.topbar .main-nav{max-width:190px}.date-label{display:none}.board-toolbar{top:64px}.source,.note-author,.meta-time,.date-label,.day-number,.note-status,.journal-edit-hint,.detail-date,.detail-edit-hint,.detail-section-label,.ns-top,.ns-signature,.ns-eyebrow,.ns-name-hint{font-size:11px!important}.ns-brand{font-weight:400!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.note.has-art .open-note{font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.55}
.note.is-onboarding-sample{padding:24px 20px 14px;height:auto!important;min-height:0}
.note.is-onboarding-sample .open-note{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;max-height:none;line-height:1.55}
.note.is-onboarding-sample .mini-cover-add{display:none}
.note.is-onboarding-sample .note-art{height:138px!important;aspect-ratio:auto;margin-bottom:16px}
.note.is-onboarding-sample .note-art img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.note.is-onboarding-sample .note-author{font-size:11px;margin-top:8px}
.note.is-onboarding-sample .journal-body{font-size:13px;line-height:1.85}
.note.is-onboarding-sample .journal-list-tools{opacity:0;transition:opacity .2s}
.note.is-onboarding-sample:hover .journal-list-tools,.note.is-onboarding-sample:focus-within .journal-list-tools{opacity:1}
.note.is-onboarding-sample::before{animation:none}
.ac-ritual-pending .note.is-onboarding-sample::before{opacity:0}
.ac-ritual-pending .note.is-onboarding-sample.ac-dropped::before{animation:ac-pin-in 1s var(--ease-out) both}
/* The sample desk keeps the same visible system category toolbar as every other desk. */
.ac-example-desk #captureForm{width:min(720px,calc(100vw - 200px))}
.ac-example-desk .main-nav{padding:3px}.ac-example-desk .nav-btn{height:34px;padding:0 18px;font-size:13px}.ac-example-desk .nav-btn>svg{display:none}
@media(max-width:700px){.ac-example-desk #captureForm{width:calc(100vw - 32px)}}
/* The introductory papers grow with their original text; the regular board
   retains its bounded internal reading areas. */
.note.is-onboarding-sample:not(.writing-mode) .thought-area{flex:0 0 auto;overflow:visible;min-height:0;padding-top:14px}
.note.is-onboarding-sample:not(.writing-mode) .thought-button{flex:0 0 auto;height:auto;max-height:none;overflow:visible}
.note.is-onboarding-sample:not(.inline-editing) .journal-writing-scroll{flex:0 0 auto;min-height:0;overflow:visible}
.note.is-onboarding-sample:not(.inline-editing) .journal-body{flex:0 0 auto;height:auto;max-height:none;overflow:visible}
.note.is-onboarding-sample .note-bottom{margin-top:16px;flex:0 0 auto}
.note.is-onboarding-sample.writing-mode,.note.is-onboarding-sample.inline-editing{height:var(--note-height)!important}
@media(max-width:700px){.filter span,.board-footer,.capture-extras button,.day-count,.calendar-grid .mini-note,.day-more{font-size:11px!important}}

/* Today identifies a date; the broad, borderless wash identifies selection. */
.calendar-grid .day{transition:background-color .18s var(--ease);border:0;box-shadow:none}
.calendar-grid .day:hover{background:rgba(42,41,37,.045)}
.calendar-grid .day.selected,.calendar-grid .day.selected:hover{background:var(--surface-soft);border:0;box-shadow:none}
.calendar-grid .day-number{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;width:auto;height:24px;margin:-2px 0 0;padding:0;border-radius:7px;line-height:24px;text-align:center}
.calendar-grid .day.selected .day-number{color:var(--ink);font-weight:500}
.calendar-grid .day.today .day-number{width:28px;justify-content:center;margin-left:-5px;background:var(--ink);color:var(--paper-white);font-weight:500}
.calendar-grid .day.today .day-number::after{content:none}
.calendar-grid .day:focus-visible{outline:none}
.calendar-grid .day:focus-visible .day-number{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.calendar-grid .day-number{height:22px;margin-top:-1px;border-radius:6px;line-height:22px}.calendar-grid .day.today .day-number{width:24px;margin-left:-3px}}
/* Bookmarklet installation, following the approved browser card. */
#helpDialog{width:min(610px,calc(100vw - 32px))}
.bookmarklet-install{width:min(520px,100%);background:#fff;border-radius:4px;box-shadow:0 1px 1px #2a29250d,0 10px 18px -10px #2a29252e,0 30px 46px -30px #2a292542;padding:40px 44px 36px;margin:28px auto;color:#2a2925;font-family:Outfit,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.bookmarklet-install h3{font-size:24px;font-weight:500;margin:0}.bookmarklet-install p{font-size:14px;line-height:1.8;color:#5b5952;margin:12px 0 0}
.bookmarklet-drag{display:inline-flex;align-items:center;gap:9px;margin:28px 0 8px;padding:12px 20px 12px 16px;border-radius:18px;background:#2a2925;color:#f6f5f1;text-decoration:none;font-size:14px;font-weight:500;box-shadow:0 14px 28px -14px #2a292599;transform:rotate(-2deg);cursor:grab}.bookmarklet-drag svg{width:16px;height:16px}.bookmarklet-drag:active{cursor:grabbing}
.bookmarklet-steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:bookmarklet-step}.bookmarklet-steps li{counter-increment:bookmarklet-step;display:grid;grid-template-columns:30px 1fr;font-size:13px;line-height:1.8;color:#5b5952;padding:9px 0;border-top:1px solid #eeece6}.bookmarklet-steps li::before{content:"0" counter(bookmarklet-step);font-size:10px;letter-spacing:.14em;color:#8c897f;padding-top:4px}@media(max-width:520px){.bookmarklet-install{padding:26px 22px}}

/* One 16:9 content-photo viewport across desk, calendar, search and detail.
   Source logos and real video elements never enter this wrapper. */
:is(.note,.pile-sheet,.archive-note,.search-result) :is(.note-art,.archive-media,.journal-photo,.search-result-media):has(.note-image-frame),
.note.is-onboarding-sample .note-art:has(.note-image-frame){height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;flex:0 0 auto!important;overflow:hidden;border-radius:8px}
.note-image-frame{display:block;position:relative;width:100%;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#16161509;isolation:isolate}
:is(.note,.pile-sheet,.archive-note,.search-result,#noteDialog.is-note-detail) .note-image-frame>img{position:absolute;display:block;width:100%;height:100%;min-height:0;max-height:none!important;max-width:none!important;inset:0;margin:0!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;aspect-ratio:auto!important;background:transparent!important}
:is(.note,.pile-sheet,.archive-note,.search-result,#noteDialog.is-note-detail) .note-image-frame.is-reframed>img{inset:auto;object-fit:fill!important}
/* Rule (2026-11-10 Claude): a reframed image renders the same way in every surface (desk, calendar, 匣子/all view,
   search, detail): absolute placement from LaterImageEditor.style() inside a 16:9 frame, never re-cropped by object-fit. */
.note-image-frame.is-reframed>img{position:absolute!important;right:auto!important;bottom:auto!important;margin:0!important;max-width:none!important;max-height:none!important;min-height:0!important;object-fit:fill!important;object-position:0 0!important}
.all-card-cover .note-image-frame.is-reframed{aspect-ratio:16/9!important;height:auto!important}
.gallery-image.gallery-cropped img{max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;margin:0!important}

/* Keep playable video in the same 16:9 viewport as content photos. */
:is(.note,.pile-sheet,.archive-note,.search-result) :is(.note-art,.archive-media,.search-result-media):has(> video){height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;flex:0 0 auto!important;overflow:hidden;border-radius:8px}
:is(.note,.pile-sheet,.archive-note,.search-result) :is(.note-art,.archive-media,.search-result-media)>video{display:block;width:100%;height:100%;max-height:none!important;aspect-ratio:16/9;object-fit:contain;background:#161615}
#noteDialog.is-note-detail #detailPreview video{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;border-radius:8px}

/* Retry stays at the right edge; the usual edit and trash actions unfold to its left. */
.note .note-head:has(.note-preview-retry) .note-preview-retry{order:2}
.note .note-head:has(.note-preview-retry) .note-actions{order:1;width:0;max-width:0;gap:4px;opacity:0;visibility:hidden;overflow:hidden;transform:translateX(12px);pointer-events:none;transition:width .2s ease,max-width .2s ease,opacity .16s ease,transform .2s ease,visibility 0s linear .2s}
.note:is(:hover,:has(:focus-visible))>.note-head:has(.note-preview-retry) .note-actions{width:52px;max-width:52px;opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;transition:width .2s ease,max-width .2s ease,opacity .16s ease,transform .2s ease,visibility 0s}
.note:is(:hover,:has(:focus-visible))>.note-head:has(.note-preview-retry) .note-actions .note-action{pointer-events:auto}
@media(hover:none){.note .note-head:has(.note-preview-retry) .note-actions{width:60px;max-width:60px;opacity:1;visibility:visible;overflow:visible;transform:none;pointer-events:auto;transition:none}.note .note-head:has(.note-preview-retry) .note-actions .note-action{pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.note .note-head:has(.note-preview-retry) .note-actions{transition:none}}
.note .note-preview-retry,.note .note-preview-loading{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;padding:4px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--sub,var(--ink-3));text-decoration:none;position:relative;z-index:3}
.note .note-preview-retry{cursor:pointer}
.note .note-preview-retry:hover,.note .note-preview-retry:focus-visible{background:#88888814;color:var(--text,var(--ink));outline:none}
.note :is(.note-preview-retry,.note-preview-loading) svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.note .note-preview-loading svg{animation:note-preview-spin 1.2s linear infinite}
@keyframes note-preview-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.note .note-preview-loading svg{animation:none}}

.note .welcome-video{pointer-events:auto;cursor:auto}.note .welcome-video video{pointer-events:auto;touch-action:auto}
.board-empty .wa-waiting{max-width:360px;margin:0 auto;text-align:left}

.board-empty .wa-waiting button{margin:0;align-self:center}

/* Desktop title navigation belongs to the shared note presentation. */
.note a.open-note{color:inherit;text-decoration:none;cursor:pointer}
.note a.open-note:hover,.note a.open-note:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* B is activated only by its isolated preview artifact. */
.ac-video-preview .video-origin-cover{display:block;position:relative;text-decoration:none;color:inherit;cursor:pointer}
.ac-video-preview .video-origin-corner{left:auto;top:8px;right:8px;transform:none;width:24px;height:24px;font-size:15px}
.ac-video-preview .note-art .media-placeholder{display:flex;height:100%;align-items:center;justify-content:center;gap:7px}
.ac-video-preview .detail-video-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:8px;overflow:hidden;background:#161615;color:#eee;cursor:pointer}
.ac-video-preview .detail-video-cover .note-image-frame,.ac-video-preview .detail-video-cover img{display:block;width:100%;height:100%;object-fit:contain}
.ac-video-preview .detail-video-cover .media-placeholder{display:grid;place-items:center;width:100%;height:100%}
.ac-video-preview button.archive-media,.ac-video-preview a.archive-media{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer}

.ac-video-preview .note-art:has(.media-placeholder) .video-play{display:grid}
.ac-video-preview :is(.note-art,.archive-media):has(.video-no-cover){height:auto!important;min-height:0!important;aspect-ratio:16/9;flex:0 0 auto;background:#8f9f7c1c}
.ac-video-preview [data-play-video] .video-no-cover{display:flex;width:100%;height:100%;align-items:center;justify-content:center;box-sizing:border-box;padding-top:48px;line-height:1.2}

/* Selection toolbar (2026-11-10 Claude): category-menu paper surface and hover grey, one line-icon set,
   bamboo-green active state, category chevron. ID scope overrides the older swatch rules in index.html/visual-theme.css. */
#textFormatBar{--format-active:#789E6B;align-items:center;gap:2px;padding:5px;border:0;border-radius:16px;background:var(--surface-soft,#f7f6f2);color:var(--ink-2,#5b5952);box-shadow:0 3px 6px #2a29250c,0 24px 50px -20px #2a292559;font:400 13px var(--sans)}
#textFormatBar.is-in{animation:format-bar-in .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes format-bar-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#textFormatBar button{display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer;transform:none;transition:background .14s ease,color .14s ease,box-shadow .14s ease}
#textFormatBar button:hover{background:var(--chip,#e2dfd8);color:var(--ink,#2a2925);transform:none}
#textFormatBar button:focus-visible{outline:2px solid var(--format-active);outline-offset:1px}
#textFormatBar button.is-active,#textFormatBar button.is-active:hover{color:var(--format-active)}
#textFormatBar button svg{display:block;pointer-events:none}
#textFormatBar .format-divider{display:block;flex:none;width:1px;height:18px;margin:0 3px;padding:0;background:var(--line,#dedad1);font-size:0}
#textFormatBar .format-highlight-split{display:flex;align-items:center}
#textFormatBar .format-highlight{position:relative;border-radius:10px 4px 4px 10px}
#textFormatBar .format-highlight svg{transform:translateY(-2px)}
#textFormatBar .format-current-color{position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:2px;background:var(--swatch);box-shadow:inset 0 0 0 .5px #2a292522}
#textFormatBar .format-menu-trigger{width:20px;border-radius:4px 10px 10px 4px;color:var(--ink-3,#8c897f)}
#textFormatBar .format-menu-trigger svg{transition:transform .2s ease}
#textFormatBar .format-menu-trigger[aria-expanded="true"]{background:var(--chip,#e2dfd8)}
#textFormatBar .format-menu-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
#textFormatBar .format-highlight-menu,#textFormatBar .format-link-pop{position:absolute;top:calc(100% + 7px);right:0;z-index:1;border-radius:14px;background:var(--surface-soft,#f7f6f2);box-shadow:0 3px 6px #2a29250c,0 24px 50px -20px #2a292559;color:var(--ink,#2a2925);transform-origin:top right}
#textFormatBar .opens-up{top:auto;bottom:calc(100% + 7px);transform-origin:bottom right}
#textFormatBar .format-highlight-menu[hidden],#textFormatBar .format-link-pop[hidden]{display:none}
#textFormatBar .format-highlight-menu{display:flex;gap:7px;padding:9px}
#textFormatBar .format-highlight-menu.is-entering{animation:cat-menu-in .2s cubic-bezier(.2,.8,.2,1) both}
#textFormatBar .format-swatch,#textFormatBar .format-swatch:hover{width:26px;height:26px;border-radius:8px;background:var(--swatch);box-shadow:inset 0 0 0 1px #2a29251a}
#textFormatBar .format-swatch:hover{box-shadow:inset 0 0 0 1px #2a292540;transform:translateY(-1px)}
#textFormatBar .format-swatch-none,#textFormatBar .format-swatch-none:hover{background:#fff linear-gradient(to top right,transparent calc(50% - .75px),#c4bfb4 calc(50% - .75px),#c4bfb4 calc(50% + .75px),transparent calc(50% + .75px))}
#textFormatBar .format-swatch.is-active,#textFormatBar .format-swatch.is-active:hover{box-shadow:0 0 0 2px var(--surface-soft,#f7f6f2),0 0 0 3.5px var(--format-active)}
#textFormatBar .format-link-pop{display:flex;align-items:center;gap:4px;min-width:292px;padding:6px}
#textFormatBar .format-link-pop input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--line-2,#c9c4b9);border-radius:9px;background:#fff;color:var(--ink,#2a2925);font:400 12px var(--sans)}
#textFormatBar .format-link-pop input:focus{outline:none;border-color:var(--format-active)}
#textFormatBar .format-link-pop button{width:auto;height:32px;padding:0 10px;color:var(--ink-2,#5b5952);font:400 12px var(--sans);white-space:nowrap}
/* Selected text keeps contrast on every paper: soft ink wash on light papers, inverted on the dark paper. */
:where(.note,.archive-note,.all-note,.reflection-preview,#noteDialog) ::selection{background:rgba(42,41,37,.17);color:#2a2925}
:is(.note,.archive-note,.all-note,.mini-note,.search-result,.stack-row)[style*="#e5dff0"] ::selection,#noteDialog.detail-dark ::selection{background:#EEEBE3;color:#23221F}
[data-rich-editor] a{color:inherit;text-decoration:underline;text-underline-offset:2px}
[data-rich-editor] [style*="background-color"],.thought-button [style*="background-color"],.journal-row-text [style*="background-color"]{color:#2a2925!important}

/* Continuity (2026-11-11): a desk note that leaves the layout fades where it was and never takes clicks. */
.note.note-ghost{pointer-events:none!important;z-index:0!important}

/* Claude 2026-11-11: the ✓ reads as a real button — ink pill, white check + 看完 — so new users see how to fold a note into
   the calendar. var(--text)/var(--paper) swap on dark paper, so it inverts there automatically. */
.note .done-button{width:auto;min-width:0;height:30px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;border:0;border-radius:15px;background:var(--text,#2A2925);color:var(--paper,#FFFFFF);font:500 12px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;transform:none;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}
.note .done-button:hover{background:var(--text,#2A2925);color:var(--paper,#FFFFFF);opacity:.88;transform:translateY(-1px);box-shadow:0 3px 8px -4px rgba(42,41,37,.45)}
.note .done-button:active{transform:translateY(0) scale(.97)}
.note .done-button svg{flex:none}
.note .done-button .done-label{display:inline-block}
@media (prefers-reduced-motion:reduce){.note .done-button,.note .done-button:hover{transition:none;transform:none}}

/* Claude 2026-11-11: one-time help bubble after the new-user tour — ink bubble over the ? button, about 5 seconds. */
.help-hint{position:fixed;z-index:60;max-width:240px;padding:10px 14px;border:0;border-radius:14px;background:#2A2925;color:#FAF9F6;font:400 13px/1.5 var(--sans);text-align:left;box-shadow:0 12px 26px -14px rgba(42,41,37,.55);cursor:pointer;transform-origin:calc(100% - 17px) 100%;animation:help-hint-in .46s cubic-bezier(.2,.9,.25,1.15) both}
.help-hint::after{content:"";position:absolute;right:12px;bottom:-5px;width:10px;height:10px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.help-hint.out{animation:help-hint-out .26s ease forwards}
.help-hint-target{animation:help-hint-pulse 1.5s ease-in-out 3}
@keyframes help-hint-in{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes help-hint-out{to{opacity:0;transform:translateY(4px) scale(.96)}}
@keyframes help-hint-pulse{0%{box-shadow:0 0 0 0 rgba(42,41,37,.28)}70%{box-shadow:0 0 0 9px rgba(42,41,37,0)}100%{box-shadow:0 0 0 0 rgba(42,41,37,0)}}
@media (prefers-reduced-motion:reduce){.help-hint,.help-hint.out,.help-hint-target{animation:none}.help-hint.out{opacity:0}}