/* Fonts ship with the site, so it looks the same with no connection and nothing is fetched from Google */
@font-face { font-family: Newsreader; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader.woff2) format('woff2'); }
@font-face { font-family: Newsreader; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-italic.woff2) format('woff2'); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans.woff2) format('woff2'); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-italic.woff2) format('woff2'); }
:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #eceef1;
  --line:      #e3e6ea;
  --ink:       #74767a;
  --ink-soft:  #8c8f94;
  --ink-faint: #abaeb3;
  --violet:    #b05c48;
  --violet-s:  #f7ece5;
  --coral:     #6c8a76;
  --coral-s:   #eef2ed;
  --teal:      #0f9e92;
  --amber:     #3f86cc;
  --field:     #ffffff;
  --clay:      #5c7d90;
  --c-sage:    #8ba48f;
  --c-green:   #4f7059;
  --c-blue:    #5c7d90;
  --c-red:     #b05c48;
  --c-gold:    #c4901f;
  --c-sand:    #c4901f;
  --clay-s:    #f8ece6;
  --violet-deep: #9c4664;
  --shadow:    0 1px 2px rgba(20,32,44,.05), 0 8px 24px rgba(20,32,44,.07);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #191713;
    --surface:   #221f19;
    --surface-2: #2b2720;
    --line:      #383228;
    --ink:       #ebe5d9;
    --ink-soft:  #aea595;
    --ink-faint: #817a6c;
    --violet:    #d9765c;
    --violet-s:  #2c211b;
    --clay:      #8fb0c4;
    --clay-s:    #1f2730;
    --c-sage:    #9dbba8;
    --c-green:   #7fae8c;
    --c-blue:    #8fb0c4;
    --c-red:     #d9765c;
    --c-gold:    #e0b551;
    --c-sand:    #e0b551;
    --violet-deep: #f4aec1;
    --coral:     #9dbba8;
    --coral-s:   #1f2620;
    --teal:      #3fc9bb;
    --amber:     #74b3ee;
    --field:     #191512;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --bg:#101218; --surface:#171a22; --surface-2:#1f232d; --line:#2a2f3a;
  --ink:#eceef2; --ink-soft:#a0a8b6; --ink-faint:#6e7684;
  --violet:#d9765c; --violet-s:#2c211b; --clay:#e0916f; --clay-s:#2f231d; --violet-deep:#f4aec1; --coral:#9dbba8; --coral-s:#1f2620;
  --teal:#3fc9bb; --amber:#74b3ee; --field:#131620;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 34px 20px 72px; }
.spines { color: var(--violet); }

header { position: relative; margin: 0 0 40px; padding: 24px 0 0; text-align: center; }

header .stack {
  display: block; width: 100%; height: 128px; margin: 0 0 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
header .inner { position: relative; max-width: 34ch; margin: 0 auto; }
.wordmark {
  font-family: Newsreader, Georgia, serif;
  margin: 0 0 16px; font-size: clamp(50px, 8.6vw, 84px); font-weight: 500; line-height: .98;
  white-space: nowrap; font-variant-ligatures: none;
  letter-spacing: -0.01em; color: var(--clay);
}

h1 {
  font-weight: 800; color: var(--ink);
  font-size: clamp(23px, 3.3vw, 31px); line-height: 1.25;
  letter-spacing: -0.015em; margin: 0; font-weight: 400; color: var(--ink);
  text-wrap: balance;
}
header p { margin: 0; color: var(--ink-soft); max-width: 38ch; font-size: 18.5px; }


.cols { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .cols { grid-template-columns: 1.05fr 1fr; gap: 36px; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; margin-bottom: 18px;
}
.card h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: 24px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 16px;
}
.card:nth-of-type(1) h2 { color: var(--c-blue); }
.card:nth-of-type(2) h2 { color: var(--c-gold); }
.card:nth-of-type(3) h2 { color: var(--c-red); }

.card:nth-of-type(1) .tabs button[aria-selected="true"] { color: var(--c-sage); }
.card:nth-of-type(1) .primary { background: var(--c-sage); }
.card:nth-of-type(1) .secondary { color: var(--c-sage); }
.card:nth-of-type(1) .totalbox b { color: var(--c-sage); }

.card:nth-of-type(2) .primary { background: var(--c-gold); }
.card:nth-of-type(2) .secondary { color: var(--c-gold); }
.card:nth-of-type(2) .timer.running { color: var(--c-gold); }
.card:nth-of-type(3) .day button.on { background: var(--c-blue); border-color: var(--c-blue); }
.card:nth-of-type(3) .weekly b { color: var(--c-blue); }
.card:nth-of-type(3) .stepper button { color: var(--c-blue); }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.tabs button {
  flex: 1 1 40%; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.tabs button[aria-selected="true"] { background: var(--field); color: var(--violet); box-shadow: var(--shadow); font-weight: 600; }

.row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 11px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row label { color: var(--ink); font-weight: 500; font-size: 16px; }
.row .hint { display: block; font-size: 15px; font-weight: 400; color: var(--c-blue); line-height: 1.4; margin-top: 3px; }
input[type="number"] {
  font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; width: 138px; text-align: right;
}
select {
  font: inherit; font-size: 16px; font-weight: 500; width: 100%;
  background: var(--field); color: var(--ink); line-height: 1.3;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; text-align: left;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 38px;
}
.full { grid-template-columns: 1fr; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px;
}

.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.day input {
  font: inherit; font-size: 13px; font-weight: 600; width: 100%;
  margin-top: 5px; padding: 5px 2px; text-align: center;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.day input::-webkit-outer-spin-button, .day input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.day span { display: block; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-bottom: 6px; }
.day button {
  font: inherit; font-size: 16px; width: 100%; aspect-ratio: 1 / 1; cursor: pointer;
  background: var(--field); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 12px;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.day button.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.day button:active { transform: scale(.94); }

.stepper { display: flex; gap: 6px; align-items: center; }
.stepper button {
  font: inherit; font-size: 17px; width: 34px; height: 36px; cursor: pointer; line-height: 1;
  background: var(--field); color: var(--ink-faint); border: 1px solid var(--line); border-radius: 10px;
}
.stepper input { width: 84px; }
.weekly { margin: 18px 0 0; font-size: 16px; color: var(--ink); line-height: 1.3; }
.weekly b { display: block; font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-top: 2px; }

.results { position: sticky; top: calc(20px + env(safe-area-inset-top, 0px)); }
.headline {
  border-radius: 20px; padding: 26px 24px 22px; margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.headline .lead { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.finish {
  font-weight: 800;
  font-size: clamp(40px, 7.4vw, 58px); line-height: 1.0; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0; color: var(--c-red);
}
.finish-sub { margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); margin: 20px 0 8px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--c-red); transition: width .3s ease; }
.ticks { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.stats { list-style: none; margin: 0 0 4px; padding: 0; }
.stats li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
  font-size: 16.5px; color: var(--ink-soft);
}
.stats li b {
  font-size: 32px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  min-width: 2.4ch;
}
.stats li:nth-child(1) b { color: var(--c-sage); }
.stats li:nth-child(2) b { color: var(--c-gold); }
.stats li:nth-child(3) b { color: var(--c-blue); }
.stats li:nth-child(4) b { color: var(--c-red); }
.stats li.quiet b { color: var(--c-green); }
.stats li.quiet { border-bottom: 0; }
.stats li.quiet b { color: var(--coral); }
.stats-head {
  font-family: Newsreader, Georgia, serif; font-size: 23px; font-weight: 500;
  letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink);
}
.note { font-size: 14px; color: var(--ink-faint); line-height: 1.55; margin: 16px 0 0; max-width: 56ch; }
.note.warn { color: var(--violet); }
.reset {
  position: fixed; z-index: 30;
  top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--field); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  box-shadow: var(--shadow);
}
.reset:hover { color: var(--ink); }
.testbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.testbar .primary { margin-top: 0; }
.timer {
  margin: 0; min-width: 76px; text-align: right;
  font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-faint); letter-spacing: -0.02em;
}
.timer.running { color: var(--violet); }
.passage {
  max-height: 320px; overflow-y: auto; margin: 4px 0 12px;
  padding: 16px 18px; background: var(--field);
  border: 1px solid var(--line); border-radius: 14px;
  font-size: 16.5px; line-height: 1.62; color: var(--ink);
}
.passage p { margin: 0 0 14px; }
.passage p:last-child { margin-bottom: 0; }
.derived { margin: 10px 0 0; font-size: 15px; color: var(--c-blue); }
.derived b { font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; }
.pane-note { margin: 0 0 12px; font-size: 15px; color: var(--c-blue); line-height: 1.4; }
textarea {
  font: inherit; font-size: 15.5px; width: 100%; resize: vertical;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px;
}
textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
button.primary {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  margin-top: 10px; width: 100%; padding: 12px;
  background: var(--violet); color: #fff; border: 0; border-radius: 12px;
}
button.primary:disabled { opacity: .55; cursor: default; }
button.secondary {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  margin-top: 8px; width: 100%; padding: 11px;
  background: var(--field); color: var(--violet);
  border: 1px solid var(--line); border-radius: 12px;
}
button.secondary:disabled { opacity: .5; cursor: default; }
.total-label { margin: 14px 0 6px; font-size: 15px; color: var(--ink); font-weight: 600; }
.totalbox {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 0; padding: 14px 12px;
  background: var(--surface-2); border-radius: 14px; text-align: center;
}
.totalbox b {
  display: block; font-size: 25px; font-weight: 800; color: var(--c-sand);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.totalbox span { font-size: 15px; color: var(--c-blue); }
.status { margin: 10px 0 0; font-size: 15px; color: var(--c-blue); min-height: 1px; line-height: 1.4; }
.tabs.small button { font-size: 14.5px; padding: 9px 6px; flex: 1 1 45%; }
.booklist { margin-bottom: 10px; }

.brow input {
  font: inherit; font-size: 14.5px; font-weight: 500; padding: 7px 9px; width: 100%;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; text-align: left;
}
.brow input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.brow input.title { text-align: left; font-weight: 500; }
.brow button {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink-faint);
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
}
.brow button:hover { color: var(--violet); }
.savepill {
  position: fixed; z-index: 30;
  top: calc(16px + env(safe-area-inset-top, 0px)); right: 104px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--c-blue); color: #fff;
  border: 1px solid var(--c-blue); border-radius: 999px; padding: 8px 18px;
  box-shadow: var(--shadow);
}
.savepill.dirty { background: var(--c-gold); border-color: var(--c-gold); }
.savepill.clean { background: var(--c-sage); border-color: var(--c-sage); }
.tutorpill {
  position: fixed; z-index: 30; top: calc(16px + env(safe-area-inset-top, 0px)); right: 232px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow);
}
body.tutor .tutorpill { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
@media (max-width: 560px) {
  .tutorpill { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  body.tutor .tutorpill { display: none; }
}
.savedtoast {
  position: fixed; z-index: 29; top: calc(58px + env(safe-area-inset-top, 0px)); right: 16px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--field); color: var(--c-sage); border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.savedtoast.show { opacity: 1; transform: none; }
.savedtoast::before { content: '\2713  '; }

.lcard { position: relative; overflow: hidden; padding-left: 28px; }
.lcard .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--c-sage); }
.lcard .spine.right { left: auto; right: 0; }
.lcard { padding-right: 26px !important; }

.noteBtn {
  font: inherit; font-size: 13px; cursor: pointer; padding: 0;
  background: var(--field); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 8px;
}
.noteBtn.has { color: var(--c-gold); border-color: var(--c-gold); }
.brow {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 80px 76px 22px;
  grid-template-areas: "tick title author pg nb kill";
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.brow .tick { grid-area: tick; }
.brow .title { grid-area: title; }
.brow .author { grid-area: author; }
.brow .pg { grid-area: pg; }
.brow .nb { grid-area: nb; }
.brow .go { grid-area: go; }
.brow .kill { grid-area: kill; }
.brow input { border-color: transparent !important; background: transparent !important; width: 100%; min-width: 0; }
.brow input.title, .brow input.author {
  font-size: 15px; padding: 7px 9px; text-align: left;
  background: var(--surface-2) !important; border-radius: 10px !important;
}
.brow input.title { font-weight: 600; }
.brow input.author { color: var(--ink-soft); }
.brow input.pg {
  background: var(--surface-2) !important; border-radius: 10px !important; text-align: left;
  font-size: 14px; padding: 7px 4px;
}
.brow .tick { border-radius: 50%; height: 28px; width: 28px; }
.brow .noteBtn { height: 34px; border-radius: 10px; font-size: 13.5px; font-weight: 700; padding: 0 8px; }
.brow .noteBtn.go { font-size: 20px; font-weight: 500; color: var(--c-blue); }
.brow .kill {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint);
}
.brow .kill:hover { background: var(--surface-2); color: var(--c-red); }
.brow.empty .tick, .brow.empty .nb { visibility: hidden; }
@media (max-width: 640px) {
  .brow {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 34px;
    grid-template-areas: "tick title author kill" ". pg nb nb";
  }
  .brow .kill { justify-self: center; }
  .brow .pg { justify-self: start; width: 96px; }
  .brow .nb { justify-self: end; width: 70px; }
  .brow .go { width: 34px; }
}
.notepanel {
  margin: 0 0 10px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 12px;
}
.notepanel textarea { font-size: 15px; min-height: 70px; }
.notepanel .entry { font-size: 14.5px; color: var(--ink); margin: 0 0 10px; }
.notepanel .entry span { display: block; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 2px; }
.notepanel button { margin-top: 8px; }

.syncrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.syncrow input { width: 150px; text-align: left; }
@media (max-width: 720px) { #sidebyside { grid-template-columns: 1fr !important; } }

.toolhead {
  margin: 18px 0 6px; font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
}
.notepanel .noterow { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-bottom: 8px; }
.notepanel .noterow input { text-align: left; }
.entry { border-left: 3px solid var(--c-sand); padding-left: 12px; }
.entry.highlight { border-left-color: var(--c-gold); }
.entry .where { font-weight: 600; color: var(--ink-soft); }
.cardstack { margin: 12px 0 0; }
.fcard {
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
}
.fcard .q { font-weight: 600; color: var(--ink); }
.fcard .a { margin: 8px 0 0; color: var(--c-blue); }
.aibox {
  background: var(--surface-2); border-radius: 14px; padding: 16px 18px; margin: 12px 0;
  font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.aibox h4 {
  margin: 0 0 8px; font-family: Newsreader, Georgia, serif; font-weight: 500;
  font-size: 20px; color: var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line); }
.listhead { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 22px 0 10px; }
.rowsort { width: auto; margin-left: auto; font-size: 14px; padding: 7px 30px 7px 10px; }
.listhead h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 24px; color: var(--ink); }
.round {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 24px; line-height: 1; font-weight: 500;
  background: var(--c-sage); color: #fff; border: 0; box-shadow: var(--shadow);
}
.sheet {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.sheet.hidden { display: none; }
.sheet button, .sheet label {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line);
}
.listfoot { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.listfoot.top { margin: 0 0 14px; padding: 0; border: 0; }
.listfoot button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line);
}
.listfoot #delBtn { color: var(--c-red); }

.writer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px; margin: 6px 0 16px; box-shadow: var(--shadow);
}
.writer-where {
  font: inherit; font-size: 15px; font-weight: 600; width: 100%;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  padding: 4px 0 10px; margin-bottom: 12px; text-align: left;
}
.writer-body {
  font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.6;
  width: 100%; min-height: 280px; border: 0; background: transparent; color: var(--ink);
  resize: vertical; padding: 0;
}
.writer-body:focus-visible, .writer-where:focus-visible { outline: none; }
.writer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.counter { font-size: 13.5px; color: var(--ink-faint); }
.entry .body { font-family: Newsreader, Georgia, serif; font-size: 17px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; display: block; }

.pick-open {
  align-self: flex-start; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; background: var(--field); color: var(--c-blue);
  border: 1px solid var(--line);
}
input[type="text"], input[type="number"], textarea, select { border-radius: 12px; }
.titlestack { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.authorline {
  font: inherit; font-size: 15px; color: var(--ink-soft); background: transparent;
  border: 0; border-bottom: 1px dashed var(--line); padding: 2px 2px 6px; text-align: left; border-radius: 0 !important;
}
.bookcell { display: flex; flex-direction: column; min-width: 0; }
.bookcell input.title { font-size: 15.5px; font-weight: 600; padding: 4px 8px; }
.bookcell input.author { font-size: 13.5px; color: var(--ink-soft); padding: 2px 8px; font-weight: 400; }
.modal {
  position: fixed; inset: 0; z-index: 88; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 44, 52, .35); padding: 20px;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--field); border-radius: 18px; padding: 22px; max-width: 380px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.modal-box p { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.modal-box .row2 { display: flex; gap: 8px; justify-content: flex-end; }
.modal-box button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink-soft);
}
.modal-box button.yes { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.modal-box button.ok { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

.resetwrap { position: fixed; z-index: 30; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; display: flex; }
.resetwrap .reset { position: static; border-radius: 999px 0 0 999px; border-right: 0; }
.resetmore {
  font: inherit; font-size: 12px; cursor: pointer; padding: 8px 10px;
  background: var(--field); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 0 999px 999px 0; box-shadow: var(--shadow);
}
.resetmenu {
  position: absolute; top: 44px; right: 0; min-width: 190px;
  background: var(--field); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column;
}
.resetmenu.hidden { display: none; }
.resetmenu button {
  font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
}
.resetmenu button:hover { background: var(--surface-2); }
.resetmenu #clearAll { color: var(--c-red); }
.savepill { right: 128px; }

.speedbox { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.speedbox .unit { padding: 2px; }
.speedbox .unit button { font-size: 12.5px; padding: 4px 9px; }

.sum.small { gap: 8px; margin-bottom: 12px; }
.sum.small div { padding: 10px 12px; border-radius: 12px; }
.sum.small b { font-size: 20px; }
.sum.small span { font-size: 13px; }

.pacechip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft);
}
.pacechip b { color: var(--ink); font-weight: 600; }
.pacechip button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line);
}

.shelfbtns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.shelfbtns button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 13px 10px;
  border-radius: 14px; background: var(--surface); color: var(--c-sage);
  border: 1px dashed var(--line);
}
.shelfbtns #allBooksBtn { color: var(--c-blue); border-style: solid; }

.addbtn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 0;
  background: var(--c-sage); color: #fff; box-shadow: var(--shadow);
}

.sugg {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  background: var(--field); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-top: 8px; cursor: pointer;
}
.sugg input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--c-sage); }
.sugg h5 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.sugg .by { font-size: 14px; color: var(--ink-soft); margin: 2px 0 6px; }
.sugg p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.sugg .rec { color: var(--c-blue); }

.wherebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wherebar select { width: auto; padding: 8px 32px 8px 12px; font-size: 14.5px; }
.wherebar input { width: 80px; text-align: left; font-size: 15px; padding: 8px 10px; }
.wherebar input#whereA.wide { width: 240px; }
.wherebar span { color: var(--ink-soft); font-size: 14.5px; }
.savebtn { background: var(--c-sage) !important; color: #fff !important; border-color: var(--c-sage) !important; }

.allrow {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 8px;
}
.allrow .t { font-weight: 600; color: var(--ink); }
.allrow .a { font-size: 13.5px; color: var(--ink-soft); }
.allrow select { width: auto; font-size: 14px; padding: 7px 30px 7px 10px; }
.featurelist { margin: 0 0 14px; padding-left: 20px; color: var(--ink); font-size: 15.5px; line-height: 1.7; }
.aistate { margin: 0 0 12px; font-size: 15px; color: var(--c-blue); font-weight: 600; }
#page-settings .card { max-width: 640px; margin: 0 auto 16px; }
body.ai-off .ai { display: none !important; }
.pacebox {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; margin: 0 0 12px;
}
.pacebox summary { font-size: 16px !important; }
.pacebox summary { cursor: pointer; font-weight: 600; color: var(--c-gold); font-size: 15px; list-style: none; }
.pacebox summary::-webkit-details-marker { display: none; }
.pacebox summary::after { content: '  \25BE'; color: var(--ink-faint); }
.pacegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.pacegrid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.pacegrid input, .pacegrid select { width: 100%; text-align: left; font-size: 15.5px; padding: 9px 11px; }
*, *::before, *::after { box-sizing: border-box; }
.notestart { margin-bottom: 16px; }
.pickrow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: 10px; align-items: end; }
.pickrow label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); min-width: 0; }
.pickrow select { width: 100%; }
.pickrow .primary { margin: 0; width: auto; padding: 12px 18px; }
@media (max-width: 640px) { .pickrow { grid-template-columns: 1fr; } .pickrow .primary { width: 100%; } }

.recentrow {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 12px 2px;
}
.recentrow:last-child { border-bottom: 0; }
.recentrow .rt { font-weight: 600; color: var(--ink); font-size: 15px; }
.recentrow .rm { font-size: 13px; color: var(--ink-faint); margin: 2px 0 4px; }
.recentrow .rx { font-family: Newsreader, Georgia, serif; font-size: 16px; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tray {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  min-height: 96px; padding: 12px; margin-bottom: 12px;
  border: 2px dashed var(--line); border-radius: 16px; background: var(--surface-2);
  transition: border-color .15s ease, background .15s ease;
}
.tray.over { border-color: var(--c-blue); background: var(--field); }
.traytip { grid-column: 1 / -1; margin: 0; align-self: center; text-align: center; color: var(--ink-faint); font-size: 14.5px; }
.traychip {
  position: relative; background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 30px 10px 12px; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0;
}
.traychip span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.traychip button {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 14px; line-height: 1;
}
.lcard[draggable="true"] { cursor: grab; }
.linkbtn { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; color: var(--c-blue); cursor: pointer; padding: 0; }

.tutorbar {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center;
  max-width: calc(100% - 24px); padding: 10px 12px 10px 16px; border-radius: 999px;
  background: var(--c-blue); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
}
.tutorbar.hidden { display: none; }
@media (max-width: 560px) {
  .tutorbar { left: 12px; right: 12px; transform: none; max-width: none; border-radius: 16px;
    padding: 8px 8px 8px 12px; font-size: 12.5px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; }
  .tutorbar span { line-height: 1.3; }
  .tutorbar button { font-size: 12.5px; padding: 6px 10px; white-space: nowrap; flex: 0 0 auto; }
}
.tutorbar button {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 7px 14px;
  border-radius: 999px; border: 0; background: #fff; color: var(--c-blue);
}
.shelfbtns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelfbtns .tutorlink { color: var(--c-blue); border-style: solid; }
@media (max-width: 640px) { .shelfbtns { grid-template-columns: 1fr 1fr; } }
.card { position: relative; }
.infobtn {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
  font: inherit; font-size: 14px; font-weight: 700; font-style: italic; cursor: pointer;
  background: var(--surface-2); color: var(--c-blue); border: 1px solid var(--line);
}
.aibtn { background: var(--c-sage) !important; color: #fff !important; border-color: var(--c-sage) !important; }
.aibtn.on { background: var(--surface-2) !important; color: var(--c-sage) !important; border-color: var(--c-sage) !important; cursor: default; }
.aibtn.on::before { content: '\25CF  '; }
.modal-box { max-width: 520px; max-height: 80vh; overflow-y: auto; }
.modal-box p { white-space: pre-line; }

.tray { display: flex !important; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 8px; min-height: 150px; }
.cmpdocs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.cmpdocs.hidden { display: none; }
.cmpdoc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 200px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid var(--dk); background: var(--field); font: inherit; text-align: left; cursor: grab; }
.cmpdoc small { font-size: 11.5px; color: var(--ink-faint); }
.cmpdoc b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.cmpdoc.on { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue) inset; }
.traychip { flex: 0 0 auto; max-width: 260px; cursor: pointer; }
.traychip.focus { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue) inset; }
.traychip.dim { opacity: .45; }

#sidebyside { display: flex !important; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
#sidebyside .card { flex: 1 0 300px; max-width: 100%; max-height: 70vh; overflow-y: auto; margin: 0; }
#sidebyside.one .card { flex-basis: 100%; }
#sidebyside.two .card { flex-basis: calc(50% - 6px); }
#sidebyside.three .card { flex-basis: calc(33.333% - 8px); }
@media (max-width: 720px) { #sidebyside .card { flex-basis: 86% !important; } }
.chapterhead {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 14px 0 6px;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.chapterhead::before { content: '\2713'; display: inline-flex; width: 18px; height: 18px; border-radius: 5px;
  align-items: center; justify-content: center; font-size: 11px; background: var(--c-sage); color: #fff; }
.chapterhead.off { color: var(--ink-faint); }
.chapterhead.off::before { content: ''; background: var(--surface-2); border: 1px solid var(--line); }
.entries.off { opacity: .4; }

.searchbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
.searchbar input, .searchbar select { width: 100%; text-align: left; }
@media (max-width: 640px) { .searchbar { grid-template-columns: 1fr 1fr; } .searchbar input { grid-column: 1 / -1; } }

.setrow {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--line); padding: 10px 0;
}
.setrow:last-child { border-bottom: 0; }
.setrow button.open { font: inherit; text-align: left; background: none; border: 0; cursor: pointer; padding: 0; }
.setrow .st { font-weight: 600; color: var(--ink); font-size: 15px; }
.setrow .sm { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.setrow .kill { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 16px; }
.uptag { position: absolute; top: -9px; left: 50px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--c-sage); color: #fff; padding: 2px 8px; border-radius: 999px; }
.brow { position: relative; }
.rowhelp { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
.grouphead { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.brow .badge { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.brow .badge.reading { background: var(--c-gold); border-color: var(--c-gold); color: #fff; font-size: 11px; }
.brow.now { border-color: var(--c-gold); }
.brow[draggable="true"] { cursor: grab; }
.menulist { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.menulist button {
  font: inherit; font-size: 15px; text-align: left; cursor: pointer; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.nowcard { margin-bottom: 14px; }
.nowcard.hidden { display: none; }
.nowrow { display: flex; flex-wrap: wrap; gap: 8px; }
.nowchip {
  font: inherit; text-align: left; cursor: pointer; padding: 10px 14px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--c-gold); color: var(--ink); max-width: 100%;
}
.nowchip b { display: block; font-size: 15px; }
.nowchip span { font-size: 13px; color: var(--ink-soft); }
.sortbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.sortbar select { width: auto; font-size: 14px; padding: 7px 30px 7px 10px; }
.coverlook { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: transparent; }
.coverlook > span { padding: 0 8px 0 10px; font-size: 13px; color: var(--ink-soft); }
.coverlook button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; min-height: 0; }
.coverlook button[aria-pressed="true"] { background: color-mix(in srgb, var(--c-blue) 22%, transparent); color: var(--ink); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars button {
  position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 23px; line-height: 26px; color: var(--line);
}
.stars button .fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--c-gold); pointer-events: none; }
.cardstars { color: var(--c-gold); font-size: 15px; letter-spacing: 1px; }
.lcard.dragover { border-color: var(--c-blue); }
.syncgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.syncgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.syncgrid input { width: 100%; text-align: left; font-size: 15px; letter-spacing: .02em; }
@media (max-width: 560px) { .syncgrid { grid-template-columns: 1fr; } }
.nav { max-width: 1060px !important; width: max-content; }
.nav button { padding-left: 12px; padding-right: 12px; }
.focusbtn { flex: 0 0 40px !important; font-size: 16px !important; }
body.focus header { display: none; }
body.focus .wrap { padding-top: 64px; max-width: 1400px; }
body.focus .nav { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 20; }
body.focus .focusbtn { color: var(--c-blue) !important; background: var(--field) !important; }
#page-cal { max-width: 1400px; margin: 0 auto; }

.dayset-wrap { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); grid-column: 1 / -1; }
.dayset { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.dayset button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 9px 0;
  border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft);
}
.dayset button.on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

.schedule { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--c-blue); letter-spacing: -0.01em; }
.streak { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); }
.lcard .when { font-size: 14.5px; font-weight: 800; color: var(--c-blue); }

.calhead { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; margin: 0 0 14px; text-align: center; }
.calhead h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 28px; color: var(--ink); }
.calnav {
  width: 44px; height: 44px; border-radius: 50%; font: inherit; font-size: 26px; line-height: 1; cursor: pointer;
  background: var(--field); border: 1px solid var(--line); color: var(--ink-soft);
}
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; min-height: 180px; display: flex; flex-direction: column; gap: 8px;
}
.day-col.today { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue) inset; }
.day-col h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-col h4 span { font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.session {
  border-radius: 12px; padding: 10px; background: var(--field); border: 1px solid var(--line);
  border-left: 4px solid var(--c-sage); font-size: 13.5px; color: var(--ink);
}
.session .time { font-weight: 800; color: var(--c-blue); font-size: 14px; }
.session .lname { font-weight: 700; margin-top: 2px; }
.session .book { color: var(--ink-soft); margin-top: 2px; }
.session .mark {
  margin-top: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
}
.session.done { border-left-color: var(--c-sage); background: var(--surface-2); }
.session.done .mark { background: var(--c-sage); border-color: var(--c-sage); color: #fff; }
.session.missed { border-left-color: var(--c-red); }
.session.missed .mark { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.day-col .none { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 900px) {
  .week { grid-template-columns: 1fr; }
  .day-col { min-height: 0; }
}
.tutorhead { margin-top: 12px; font-size: 15px; }
.welcome { margin: 0 0 2px; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.navmark { display: none; }
.focusbtn { display: inline-flex !important; align-items: center; justify-content: center; }
.focusbtn .ico-shrink { display: none; }
body.focus .focusbtn .ico-expand { display: none; }
body.focus .focusbtn .ico-shrink { display: inline; }

body.focus .wrap { padding-top: 22px; }
body.focus .nav {
  position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 25;
  max-width: 980px; padding: 6px; gap: 4px; align-items: center;
  background: var(--field); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(40, 44, 52, .10);
}
body.focus .navmark {
  display: block; flex: 0 0 auto; padding: 0 14px 0 16px;
  font-family: Newsreader, Georgia, serif; font-size: 21px; font-weight: 500; color: var(--c-blue); white-space: nowrap;
}
body.focus .nav button { border-radius: 999px; padding: 9px 12px; }
body.focus #nav-calc[aria-current="true"] { background: var(--c-blue); color: #fff; box-shadow: none; }
body.focus #nav-lists[aria-current="true"] { background: var(--c-sage); color: #fff; box-shadow: none; }
body.focus #nav-study[aria-current="true"] { background: var(--c-gold); color: #fff; box-shadow: none; }
body.focus #nav-cal[aria-current="true"] { background: var(--c-red); color: #fff; box-shadow: none; }
body.focus #nav-speed[aria-current="true"] { background: var(--c-sage); color: #fff; box-shadow: none; }
body.focus #nav-club[aria-current="true"] { background: var(--action); color: #fff; box-shadow: none; }
body.focus #nav-settings[aria-current="true"] { background: var(--ink-soft); color: #fff; box-shadow: none; }
body.focus .nav::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: -5px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-sage) 0 20%, var(--c-gold) 20% 40%, var(--c-blue) 40% 60%, var(--c-red) 60% 80%, var(--c-sand) 80% 100%);
  opacity: .7;
}
@media (max-width: 720px) {
  body.focus .navmark { display: none; }
  body.focus .nav { border-radius: 18px; flex-wrap: wrap; }
}
#study-home > .card { margin: 0 0 16px; }
.searchbar input, .searchbar select { padding: 11px 14px; font-size: 15px; border-radius: 12px; }
.syncgrid input { border-radius: 10px !important; padding: 11px 14px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
input[type="text"], input[type="number"], input[type="password"], input[type="time"], select, textarea {
  border: 1px solid var(--line); border-radius: 10px;
}
.tutorhead { margin-top: 12px; font-size: 15px; }
.welcome { margin: 0 0 8px !important; }
.wordmark { margin: 0 0 10px !important; }
body.focus .navmark { display: none !important; }
body.focus .nav::after { height: 6px !important; bottom: -9px !important; border-radius: 6px; opacity: .85 !important; }
 #page-club:not(.hidden), #page-speed:not(.hidden), #page-calc:not(.hidden), #page-lists:not(.hidden), #page-study:not(.hidden), #page-cal:not(.hidden), #page-settings:not(.hidden) {
  animation: pagein .28s ease both;
}
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #page-calc, #page-lists, #page-study, #page-cal, #page-settings { animation: none !important; } }
.magic {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(245, 246, 248, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.magic.hidden { display: none; }
.magic-inner { text-align: center; }
.magic p { margin: 18px 0 0; font-family: Newsreader, Georgia, serif; font-size: 22px; color: var(--ink); }
.orbs { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.orbs i {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  animation: orbit 2.4s linear infinite; box-shadow: 0 0 18px currentColor;
}
.orbs i:nth-child(1) { background: var(--c-sage); color: var(--c-sage); animation-delay: 0s; }
.orbs i:nth-child(2) { background: var(--c-gold); color: var(--c-gold); animation-delay: -.48s; }
.orbs i:nth-child(3) { background: var(--c-blue); color: var(--c-blue); animation-delay: -.96s; }
.orbs i:nth-child(4) { background: var(--c-red); color: var(--c-red); animation-delay: -1.44s; }
.orbs i:nth-child(5) { background: var(--c-sand); color: var(--c-sand); animation-delay: -1.92s; }
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(46px) scale(.7); opacity: .6; }
  50% { transform: rotate(180deg) translateX(46px) scale(1.15); opacity: 1; }
  100% { transform: rotate(360deg) translateX(46px) scale(.7); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .orbs i { animation-duration: 6s; } }
.listframe {
  position: relative; background: var(--field); border: 1px solid var(--line); border-radius: 22px;
  padding: 22px 30px; box-shadow: 0 14px 40px rgba(40, 44, 52, .07);
  border-left: 10px solid var(--c-sage); border-right: 10px solid var(--c-sage);
}
@media (max-width: 560px) { .listframe { padding: 16px 16px; border-left-width: 6px; border-right-width: 6px; } }
.passpreview { margin: 12px 0 0; }
.passpreview img { display: block; width: 100%; max-width: 420px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.booktitle {
  width: 100%; font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 500;
  background: transparent; color: var(--ink); padding: 2px 0 4px;
  border: 0 !important; border-bottom: 1px dashed var(--line) !important; border-radius: 0 !important;
}
.writer-body { min-height: 52vh !important; font-size: 19px !important; overflow-y: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; padding: 6px; background: var(--surface-2); border-radius: 12px; }
.toolbar button {
  font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 10px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-soft);
}
.toolbar button:hover { background: var(--field); color: var(--ink); }
.toolbar .expand { margin-left: auto; color: var(--c-blue); font-weight: 600; }
.writer.full {
  position: fixed; z-index: 45; inset: 4vh 4vw; margin: 0; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.writer.full .writer-body { flex: 1; min-height: 0 !important; }
.notesort { display: flex; justify-content: flex-end; margin: 8px 0 0; }
.notesort select { width: auto; font-size: 14px; padding: 7px 30px 7px 10px; }
.entry .body b, .recentrow .rx b { font-weight: 700; }
.entry .body h5 { margin: 6px 0 2px; font-size: 18px; }
.entry .body ul, .entry .body ol { margin: 4px 0 4px 20px; padding: 0; }
.entry .body blockquote { margin: 4px 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-soft); }
.entry .body a { color: var(--c-blue); }
.nowchip .nwhen { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-blue); margin-top: 3px; }
.ticker { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; }
.ticker svg .flip { transform-origin: 24px 18px; }
.ticker svg .flip.turn { animation: turnpage 1.1s ease-in-out 1; }
@keyframes turnpage { 0% { transform: scaleX(1); opacity: .95; } 50% { transform: scaleX(0); } 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.tick-num {
  display: inline-block; min-width: 1.4ch; font-size: 30px; font-weight: 800; color: var(--c-blue);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tick-num.pop { animation: pop .35s ease; }
.tick-num.zero { color: var(--c-red); }
@keyframes pop { 0% { transform: translateY(-6px) scale(1.2); opacity: .2; } 100% { transform: none; opacity: 1; } }
#dots { display: inline-block; min-width: 2.2ch; text-align: left; }
@media (prefers-reduced-motion: reduce) { .ticker svg .flip, .tick-num.pop { animation: none; } }

.swatches { display: inline-flex; gap: 6px; align-items: center; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--field); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatches button.on { box-shadow: 0 0 0 2px var(--ink-soft); }

.replyto { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--c-gold); }
.replyto.hidden { display: none; }
.replyto small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.replyto p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 17px; color: var(--ink); }
.replyto button { margin-top: 8px; font: inherit; font-size: 13px; border: 0; background: none; color: var(--c-blue); cursor: pointer; padding: 0; }

.listframe { border-width: 8px !important; border-style: solid !important; }
.lcard .spine.top { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 8px; }
.lcard .spine.bottom { bottom: 0; left: 0; right: 0; top: auto; width: auto; height: 8px; }
.lcard { padding-top: 24px !important; padding-bottom: 24px !important; }

.detail-head .listname.big { font-size: 26px !important; padding: 2px 0 6px !important; }
.titlefield span { font-size: 11.5px !important; }
.listframe .schedule { font-size: 16px; }
.listframe .sum.small b { font-size: 18px; }
.listframe .sum.small div { padding: 8px 10px; }

.tutorbar { font-size: 12.5px !important; padding: 6px 6px 6px 14px !important; gap: 8px !important; }
.tutorbar button { font-size: 12.5px !important; padding: 5px 11px !important; }
@media (max-width: 560px) {
  .viewmenu { bottom: 150px; }
  .floatbar { flex-direction: column; align-items: center; gap: 8px; }
  .floatbar > * { align-self: center !important; margin: 0 auto !important; justify-content: center; }
  .contread { width: min(280px, 100%) !important; padding: 10px 16px !important; font-size: 13px !important; white-space: normal; }
  .floatbar #tutorbar { max-width: none !important; }
  .tutorwrap { width: min(280px, 100%) !important; }
  .contread { max-width: none; font-size: 13px; padding: 10px 14px; justify-content: center; }
  .tutorwrap { align-self: stretch; }
  .tutorwrap .tutorfloat { flex: 1; justify-content: center; font-size: 13.5px !important; padding: 11px 12px !important; }
  .tutorbar { bottom: 120px !important; }
  .tutorbar { left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    width: max-content; max-width: calc(100% - 32px) !important; border-radius: 999px !important;
    padding: 6px 6px 6px 14px !important; font-size: 11px !important; text-align: center; }
  .tutorbar span { white-space: normal; }
  .tutorbar button { font-size: 11px !important; padding: 5px 10px !important; }
}
/* compact top of an open list */
.listframe .detail-head { gap: 10px 14px; margin-bottom: 10px; align-items: center; }
.titlefield { gap: 2px !important; }
.titlefield .listname { flex: 0 0 auto !important; }
.titlestack .booktitle, .titlestack .authorline { flex: 0 0 auto !important; }
.detail-head .listname.big { height: auto !important; min-height: 0 !important; line-height: 1.2 !important; font-size: 24px !important; padding: 0 0 4px !important; }
.listframe .listfoot.top { margin: 0 0 10px; gap: 6px; }
.listframe .listfoot.top button { padding: 5px 11px; font-size: 13px; }
.listframe .pacebox { padding: 8px 14px; margin: 0 0 8px; }
.listframe .pacebox summary { font-size: 14px !important; }
.listframe .schedule { font-size: 14.5px !important; margin: 0 0 2px; }
.listframe .streak { margin: 0 0 6px; font-size: 13px; }
.statline { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 6px; font-size: 13.5px; color: var(--ink-soft); }
.statline b { color: var(--ink); font-weight: 800; font-size: 15px; }
.listframe .prog { height: 6px; margin: 4px 0 4px; }
.listframe .progtext, .listframe #listfinish { font-size: 13px; margin: 0; display: inline; }
.listframe #listfinish::before { content: ''; }
.listframe #listfinish:empty::before { content: ''; }
.listframe .listhead { margin: 14px 0 8px; }
.listframe .booklist { min-height: 58vh; }
.colorpick { display: inline-flex; align-items: center; gap: 6px; }
.colorpick i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.colorpick select { width: auto; font-size: 13.5px; padding: 6px 28px 6px 8px; }
#genre { font-size: 13.5px; padding: 6px 10px; }
.prilabel { min-width: 118px; display: inline-block; }

/* list cards carry the same soft, even, rounded edge */
.lcard { border-width: 8px !important; border-style: solid !important; border-radius: 22px !important; padding: 18px !important; }
.lcard:hover { filter: brightness(.99); }
.lcard .spine { display: none; }
.lcard.new { border-style: dashed !important; border-width: 2px !important; }

/* inner pages get a smaller header */
body.inner header .stack { height: 128px; margin-bottom: 22px; }
body.inner .welcome { display: none; }
body.inner .wordmark { font-size: clamp(46px, 5.4vw, 60px) !important; }

body.inner header { margin-bottom: 40px; }
body.inner .nav { margin-bottom: 18px; }

/* phones */
@media (max-width: 560px) {
  .nav { overflow-x: auto; flex-wrap: nowrap; }
  .nav button { font-size: 12.5px; padding: 8px 6px; white-space: nowrap; flex: 1 0 auto; }
  #allsum { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
  #allsum div { padding: 8px; }
  #allsum b { font-size: 17px; }
  #allsum span { font-size: 11px; }
  .tutorbar { font-size: 10.5px !important; padding: 5px 5px 5px 12px !important; max-width: calc(100% - 48px) !important; }
  .tutorbar span { line-height: 1.25; }
  .tutorbar button { font-size: 10.5px !important; padding: 4px 9px !important; }
}
.nav button { white-space: nowrap; }
.addbtn { white-space: nowrap; }
@media (max-width: 560px) {
  .back { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .savepill, .reset, .resetmore, .tutorpill { font-size: 12.5px !important; padding: 7px 12px !important; }
  .savepill { right: 104px !important; }
  .brow {
    grid-template-columns: 28px minmax(0, 1fr) 46px 78px !important; column-gap: 7px !important;
    grid-template-areas: "tick title title kill" ". author pg nb" !important;
  }
  .brow .nb { width: 100%; max-width: 78px; justify-self: end; font-size: 12px; padding: 6px 4px; }
  .brow .pg, .brow .pages { font-size: 12.5px; }
  .brow .kill { justify-self: end; }
  .listframe .listhead { flex-wrap: wrap; }
}
#calSum b { font-size: 18px; }
#calSum div { padding: 8px 12px; }
#allsum b { font-size: 19px; }
#allsum div { padding: 9px 12px; }
.calactions { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.day-col h4 { cursor: pointer; }
.day-col .addhere { margin-top: auto; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px; border-radius: 9px; border: 1px dashed var(--line); background: transparent; color: var(--ink-faint); }
.day-col .addhere:hover { color: var(--c-blue); border-color: var(--c-blue); }
.daypanel { position: fixed; inset: 0; z-index: 48; display: flex; align-items: center; justify-content: center;
  background: rgba(24, 26, 30, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; }
@media (max-width: 700px) {
  .daypanel { padding: 14px; align-items: center; }
  .daybox { max-width: none; width: 100%; max-height: 86vh; border-radius: 22px; padding: 18px 16px 24px; }
  .daybox h3 { position: sticky; top: -18px; background: var(--field); padding: 10px 0; margin: -10px 0 10px; z-index: 2; }
  .dayclose { position: absolute; top: 12px; right: 12px; z-index: 3; }
  .schedgrid { grid-template-columns: 1fr; }
}
.daypanel.hidden { display: none; }
.daybox { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; scroll-behavior: smooth;
  background: var(--field); border-radius: 22px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.daybox h3 { margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 28px; color: var(--ink); }
.dayclose { position: absolute; top: 14px; right: 14px; width: 36px !important; height: 36px !important; min-width: 36px; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important;
  border: 1px solid var(--line) !important; background: var(--field) !important; font-size: 19px !important; line-height: 1 !important;
  cursor: pointer; color: var(--ink-soft) !important; box-shadow: none !important; }
.dayclose:hover { color: var(--action) !important; border-color: var(--action) !important; }
.dsess { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.dsess b { display: block; color: var(--c-blue); font-size: 14px; }
.dsess span { font-size: 14px; color: var(--ink); }
.dsess small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.dsess button { font: inherit; font-size: 12.5px; cursor: pointer; border: 0; background: none; color: var(--c-red); }
.schedform { margin-top: 12px; }
.schedgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.schedgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.schedgrid select { width: 100%; font-size: 14.5px; }
@media (max-width: 560px) { .schedgrid { grid-template-columns: 1fr; } }
.schedbook { margin: 10px 0; font-size: 14.5px; color: var(--ink); }
.repeat { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); margin: 0 0 12px; }
.repeat input { width: 18px; height: 18px; accent-color: var(--c-sage); }
.session.oneoff { border-left-style: dashed; }
@media (max-width: 560px) {
  .listframe .detail-head { gap: 8px; }
  .listframe #genre { flex: 1 1 45% !important; }
  .listframe .colorpick { flex: 0 0 auto; }
  .listframe .stars { flex: 1 1 100%; }
  .listframe .prilabel { min-width: 0; font-size: 12px; }
  .listframe .yy svg { width: 24px; height: 24px; }
  .listframe .pacebox summary { font-size: 13px !important; }
  .statline { font-size: 12.5px; gap: 4px 12px; }
  .listframe .titlefield { order: 0; }
  .listframe #genre { order: 1; flex: 1 1 50% !important; width: auto !important; }
  .listframe .colorpick { order: 2; }
  .listframe .stars { order: 3; }
  .listframe .listfoot.top button { padding: 4px 9px; font-size: 12px; }
  .listframe .progtext { display: none; }
  .listframe #listfinish::before { content: ''; }
  .listframe .pacebox { padding: 6px 12px; }
  .listframe .schedule { font-size: 13.5px !important; }
  .listframe { padding: 14px 14px !important; }
}
.speedintro { max-width: 640px; margin: 0 auto 16px; text-align: center; font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; }
.speedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.speedcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px; }
.speedcard h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); }
.speedcard .k { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.speedcard .src { font-size: 12.5px; color: var(--ink-faint); margin: 0; font-style: italic; }
.speedcard .wpm { font-size: 30px; font-weight: 800; color: var(--c-blue); margin: 8px 0 0; letter-spacing: -0.02em; }
.speedcard .wpm small { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }
.speedcard .when { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
.speedcard button { margin-top: auto; }
.speedcard.avg { background: var(--field); border: 8px solid rgba(92,125,144,.25); }
.speedrun { position: fixed; inset: 0; z-index: 47; background: rgba(40,44,52,.35); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.speedrun.hidden { display: none; }
.speedbox2 { width: 100%; max-width: 820px; max-height: 94vh; display: flex; flex-direction: column; gap: 10px;
  background: var(--field); border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.speedtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.speedkind { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 24px; color: var(--ink); }
.speedsrc { margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); font-style: italic; }
.passage.big { max-height: none; flex: 1; overflow-y: auto; font-size: 18px; line-height: 1.7; }
#page-calc .cols > div > .card { position: relative; }
#page-calc .cols > div > .card:not(:last-child) { margin-bottom: 34px; }
#page-calc .cols > div > .card:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; top: calc(100% + 11px); width: 22px; height: 12px; margin-left: -11px;
  background: no-repeat center / 22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M2 2l9 8 9-8' fill='none' stroke='%235f9e7c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .75;
}
.savelist { margin-top: 18px; width: 100%; padding: 14px; font-size: 16px; }
.brow2 { display: grid; grid-template-columns: minmax(0, 1fr) 70px 22px; gap: 6px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; font-size: 14.5px; background: var(--field); }
.brow2 .t { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow2 .a { font-weight: 400; color: var(--ink-soft); }
.brow2 input { width: 100%; font-size: 13.5px; padding: 5px 6px; }
.brow2 button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; }
.listfoot.inrow { margin: 0 0 0 auto !important; flex: 0 1 auto; }
@media (max-width: 900px) { .listfoot.inrow { margin: 0 !important; flex: 1 1 100%; } }
.tutorbar { border-radius: 18px !important; padding: 8px 8px 8px 18px !important; line-height: 1.3; bottom: 84px !important; }
.tutorbar span { padding-right: 4px; }
@media (max-width: 560px) {
  .tutorbar { width: calc(100% - 40px) !important; max-width: 340px !important; padding: 9px 9px 9px 16px !important;
    border-radius: 16px !important; font-size: 11px !important; justify-content: space-between !important; }
  .tutorbar span { text-align: left; }
}
.topbtns {
  position: fixed; z-index: 30; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  display: flex; align-items: center; gap: 8px;
}
.topbtns .tutorpill, .topbtns .savepill, .topbtns .resetwrap { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; }
.topbtns .resetwrap .reset { position: static !important; }
.resetmenu { top: 44px; right: 0; }
@media (max-width: 560px) {
  .topbtns { gap: 6px; right: 8px; }
  .topbtns .tutorpill, .topbtns .savepill, .topbtns .reset { font-size: 12px !important; padding: 7px 11px !important; }
  .topbtns .resetmore { padding: 7px 8px !important; }
  body.tutor .topbtns .tutorpill { display: inline-block; }
  .tutorpill { position: static !important; }
  .nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible !important; gap: 4px; }
  .nav button { font-size: 12px !important; padding: 8px 4px !important; white-space: normal !important; line-height: 1.2; }
  .nav .focusbtn { flex: none !important; }
}
.tools .danger { color: var(--c-red) !important; }
#pane-build .addbtn { margin: 4px 0 10px; }
.brow3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 76px 22px; gap: 6px; align-items: center; margin-top: 6px; }
.brow3 input { width: 100%; font-size: 14px; padding: 7px 9px; text-align: left; }
.brow3 input.t { font-weight: 600; }
.brow3 button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; }
@media (max-width: 560px) { .brow3 { grid-template-columns: minmax(0, 1fr) 70px 22px; } .brow3 input.a { grid-column: 1 / 2; grid-row: 2; } }
.brow3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px 22px; gap: 0 10px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.brow3 input { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 8px !important; padding: 5px 6px !important; }
.brow3 input:focus { background: var(--surface-2) !important; outline: none !important; }
.brow3 input.t { font-family: Newsreader, Georgia, serif; font-size: 17px; font-weight: 500; color: var(--ink); }
.brow3 input.a { font-size: 14px; color: var(--ink-soft); }
.brow3 input.p { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .brow3 { grid-template-columns: minmax(0, 1fr) 62px 22px; }
  .brow3 input.t { grid-column: 1; grid-row: 1; } .brow3 input.a { grid-column: 1; grid-row: 2; padding-top: 0 !important; }
  .brow3 input.p { grid-column: 2; grid-row: 1 / span 2; } .brow3 button { grid-column: 3; grid-row: 1 / span 2; }
}
body.focus .topbtns { top: calc(8px + env(safe-area-inset-top, 0px)); }
body.focus .wrap { padding-top: 64px !important; }
body.focus .nav { top: calc(58px + env(safe-area-inset-top, 0px)) !important; }
.pri { display: inline-flex; gap: 4px; align-items: center; }
.pri button { width: 15px; height: 15px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #c9d2d8; background: var(--field); transition: transform .1s ease; }
.pri button:hover { transform: scale(1.15); }
.pri button.half { background: linear-gradient(90deg, #aebcc6 50%, var(--field) 50%); }
.pri button.full { background: #aebcc6; border-color: #aebcc6; }
.pri.small button { width: 9px; height: 9px; border-radius: 50%; cursor: default; }
@media (max-width: 1100px) {
  .nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px !important; width: auto !important; gap: 4px; }
  .nav button { white-space: nowrap; font-size: 13.5px; padding: 8px 4px; }
  .nav .navmark { display: none !important; }
}
.brow .nb { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 72px 84px 22px !important; }
@media (max-width: 560px) {
  .brow { grid-template-columns: 28px minmax(0, 1fr) 46px 78px !important; column-gap: 7px !important; }
  .brow .nb { width: 100% !important; max-width: 78px; justify-self: end; font-size: 12px !important; padding: 6px 4px !important; }
  .brow .pg { font-size: 12.5px !important; }
  .brow .kill { justify-self: end; }
}
/* the tutorial button lives at the bottom right on every screen */
.topbtns .tutorpill { display: none !important; }
.tutorfloat {
  position: fixed; z-index: 30; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 9px 16px;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
body.tutor .tutorfloat { display: none; }
.ui-hide-tutor .tutorwrap, .ui-hide-tutor .tutorfloat, .ui-hide-backup .topbtns .savepill, .ui-hide-reset .topbtns .resetwrap { display: none !important; }
.togglelist { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.togglelist label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.togglelist input { width: 18px; height: 18px; accent-color: var(--c-sage); }
.addmode { font: inherit; font-size: 13px; border: 0; background: none; color: var(--c-blue); cursor: pointer; padding: 0 4px; white-space: nowrap; }
/* list cards: a thin edge, a little shelf, one line of text */
.lcard {
  border-width: 3px !important; border-style: solid !important; border-color: var(--lcf, #e3e6ea) !important;
  border-radius: 20px !important; padding: 18px 18px 16px !important; gap: 12px !important;
  background: var(--field) !important; box-shadow: 0 6px 20px rgba(40,44,52,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lcard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40,44,52,.09); filter: none; }
.lhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lhead h3 { font-size: 22px !important; line-height: 1.2; margin: 0; }
.lhead .pri { flex: 0 0 auto; margin-top: 7px; }
.minishelf {
  position: relative; display: flex; align-items: flex-end; gap: 3px; height: 70px;
  padding: 0 8px; border-bottom: 7px solid var(--lcf, #e3e6ea); border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 6px -6px rgba(40,44,52,.18);
}
.minishelf i { display: block; border-radius: 3px 3px 1px 1px; opacity: .5; flex: 0 0 auto; transform-origin: bottom left; }
.minishelf i::after { content: ''; display: block; margin: 22% 3px 0; height: 2px; border-radius: 1px; background: rgba(255,255,255,.55); }
.minishelf i.done { opacity: .95; }
.minishelf i.now { opacity: .95; box-shadow: 0 -4px 0 0 var(--lc, #8ba48f) inset; outline: 2px solid var(--field); }
.emptyshelf, .moreshelf { align-self: center; font-size: 13px; color: var(--ink-faint); }
.moreshelf { margin-left: 4px; }
.lline { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.notestart .pickrow { margin-bottom: 12px; }
.notestart .writer { margin: 0; box-shadow: none; }
.notestart .writer-body { min-height: 34vh !important; }
body.writing #study-home > .card:not(.notestart) { display: none; }
.calactions { justify-content: space-between !important; align-items: center; gap: 10px; flex-wrap: wrap; }
.schedbookpick { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); margin: 10px 0; }
.schedbookpick select { width: 100%; font-size: 14.5px; }
.glance { display: flex; flex-direction: column; gap: 6px; }
.glancerow { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.glancerow.today { border-color: var(--c-blue); }
.glancerow .gd { font-weight: 700; color: var(--ink); font-size: 14px; }
.glancerow .gd span { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12.5px; }
.glancerow .gs { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); color: var(--ink); }
.gchip b { color: var(--c-blue); margin-right: 4px; }
.gchip.done { background: var(--surface-2); text-decoration: line-through; color: var(--ink-faint); }
.gfree { font-size: 13px; color: var(--ink-faint); }
.newbookrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; margin: 0 0 12px; }
.newbookrow.hidden { display: none; }
.newbookrow input { width: 100%; text-align: left; }
@media (max-width: 560px) { .newbookrow { grid-template-columns: 1fr; } }
.schedwhat { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 10px; }
.schedwhat.hidden { display: none; }
.schedwhat select, .schedwhat input { width: 100%; font-size: 14.5px; text-align: left; }
.session.act { background: transparent; border: 0 !important; border-left: 0 !important; padding: 8px 12px !important; font-size: 12.5px;
  display: block; color: var(--ink-soft); }
.session.act .time { font-weight: 600; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.session.act .lname { font-weight: 500 !important; font-size: 12.5px; color: var(--ink-soft); margin: 0; display: flex; align-items: center; }

.session.act .book, .session.act .mark { display: none !important; }
.session.act .kicon { width: 20px; height: 20px; border-radius: 6px; margin-right: 6px; }
.session.act .kicon svg { width: 13px; height: 13px; }
.session .mark { display: none; }
.session { position: relative; padding: 10px 32px 10px 11px !important; }
.session.act { padding: 8px 30px 8px 9px !important; }
.session .time, .session .lname, .session .book { max-width: 100%; }
.session .time { white-space: nowrap; }
@media (max-width: 1150px) { .session .time { font-size: 11.5px !important; } }
.session .tick2, .session.act .tick2 { position: absolute !important; top: 9px !important; right: 8px !important;
  width: 16px !important; height: 16px !important; }
.session .tick2 { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--field); cursor: pointer; padding: 0; font-size: 11px; color: #fff; line-height: 1; }
.session.done .tick2 { background: var(--c-sage); border-color: var(--c-sage); }
.session.missed .tick2 { background: var(--c-red); border-color: var(--c-red); }
.session.act .tick2 { width: 16px !important; height: 16px !important; }
.session.act.done { opacity: .55; }
.session .book { font-size: 12px; }
.session:not(.act) .time { font-size: 12.5px; white-space: nowrap; }
.session:not(.act) .lname { font-size: 13px; line-height: 1.25; }
.session:not(.act) .kicon { width: 22px; height: 22px; }
.day-col { gap: 6px !important; min-width: 0; overflow: hidden; }
.week { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.day-col h4 { font-size: 13px !important; }
.day-col h4 span { display: block; margin: 1px 0 0 !important; font-size: 12px; }
.session { min-width: 0; overflow: hidden; }
.session .scov { display: none; box-shadow: 0 4px 10px rgba(30,30,30,.15); }
.session:not(.act) { padding: 9px 9px !important; }
.session:not(.act) .tick2 { width: 15px !important; height: 15px !important; align-self: center !important; }
.session .time, .session .lname, .session .book { max-width: 100%; }
.session:not(.act) .lname { word-break: normal; overflow-wrap: normal; hyphens: auto; }
.session:not(.act) .lname { font-size: 12px !important; }
.session:not(.act) .kicon { display: none; }
.session:not(.act) .book { display: none; }
.session:not(.act) .lname { -webkit-line-clamp: 2; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
.session.act .time { margin-left: 0 !important; }
.session.act .kicon { display: none; }
.session.act .lname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr !important; } .session:not(.act) .book { display: block; } }
.session.act .time { font-size: 12.5px; color: var(--ink-soft); }
.session.act .mark { margin-top: 6px; padding: 4px 6px; font-size: 12px; background: transparent; border-style: dashed; }
.session.act.done { opacity: .6; }
.session.act .lname { font-weight: 600; }
.session.act.stress { border-left-color: #c98a7c !important; }
.gchip.act { background: var(--surface); color: var(--ink-soft); }
.dsess.act b { color: var(--ink-soft); }
.kicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  margin-right: 7px; vertical-align: middle; flex: 0 0 auto; }
.kicon svg { display: block; }
.session .lname { display: flex; align-items: center; }
.gchip { display: inline-flex; align-items: center; }
.gchip .kicon { width: 20px; height: 20px; border-radius: 6px; margin-right: 5px; }
.gchip .kicon svg { width: 14px; height: 14px; }
.dsess span .kicon { width: 22px; height: 22px; }
.nowchip { display: flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; cursor: grab; }
.nownum { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nowbody { font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.nowbody b { display: block; font-size: 15px; }
.nowbody span { display: block; font-size: 13px; color: var(--ink-soft); }
.nowarrows { display: inline-flex; gap: 2px; margin-left: 4px; }
.nowarrows button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--field);
  color: var(--ink-soft); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.nowsync { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.nowsync input { width: 16px; height: 16px; accent-color: var(--c-sage); }
.pickrow.simple { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pickrow.simple select { font-size: 16px; padding: 12px 36px 12px 14px; }
.pickrow.simple .primary { padding: 12px 20px; }
@media (max-width: 560px) { .pickrow.simple { grid-template-columns: minmax(0, 1fr) auto; } .pickrow.simple .primary { padding: 11px 12px; font-size: 14px; white-space: nowrap; } .pickrow.simple select { font-size: 15px; padding: 11px 30px 11px 12px; } }
.notestart { padding-top: 16px !important; }
.notestart .writer-body { min-height: 52vh !important; }
.notestart .writer { padding: 14px 16px; }

/* writing mode: everything else steps back */
body.immersed .topbtns, body.immersed .tutorfloat, body.immersed .tutorbar, body.immersed .savedtoast { display: none !important; }
body.immersed { overflow: hidden; }
body.immersed::before {
  content: ''; position: fixed; inset: 0; z-index: 59;
  background: rgba(245, 246, 248, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.writer.full {
  position: fixed !important; inset: 2vh max(2vw, calc((100vw - 1400px) / 2)) !important; z-index: 60 !important; margin: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 22px !important; box-shadow: 0 30px 90px rgba(40,44,52,.18) !important;
  background: var(--field) !important; padding: 28px clamp(20px, 5vw, 64px) 22px !important;
  display: flex; flex-direction: column; animation: immerse .3s ease both;
}
@media (max-width: 560px) {
  .writer.full { inset: 0 !important; border-radius: 0 !important; border: 0 !important; padding: 18px 16px !important; }
}
.writer.full .writer-body { font-size: 21px !important; line-height: 1.75 !important; min-height: 0 !important; flex: 1; }
.writer.full .toolbar { background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 8px; }
.writer.full .wherebar { border-bottom: 0; }
@keyframes immerse { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .notestart { padding: 12px !important; }
  .notestart .writer { padding: 10px 12px !important; border: 0; background: transparent; }
  .notestart .wherebar { gap: 6px; margin-bottom: 8px; padding-bottom: 8px; flex-wrap: nowrap; }
  .notestart .wherebar select { min-width: 0; flex: 1 1 auto; width: auto; }
  .notestart .wherebar input { flex: 0 0 52px; }
  .notestart .wherebar select, .notestart .wherebar input { font-size: 13px; padding: 6px 26px 6px 8px; }
  .notestart .wherebar input { width: 56px; padding: 6px 8px; }
  .toolbar button[data-md="heading"], .toolbar button[data-md="number"], .toolbar button[data-md="quote"],
  .toolbar button[data-md="link"], .toolbar button[data-md="copy"] { display: none; }
  .writer.full .toolbar button { display: inline-block !important; }
  .toolbar { padding: 4px; margin-bottom: 6px; }
  .toolbar button { padding: 5px 8px; font-size: 13px; }
  .notestart .writer-body { min-height: 44vh !important; font-size: 17px !important; }
  #pickPage { font-size: 13px; }
}
.picktint { background: var(--pt, var(--field)) !important; }
.writingabout { display: none; margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-size: 26px; color: var(--ink); }
.writer.full .writingabout { display: block; }
#picker .lcard { padding: 14px 16px !important; gap: 4px !important; }
#picker .lcard h3 { font-size: 19px !important; }
:root {
  --c-sage: #6f9a82; --c-green: #3f6f5b; --c-blue: #3f6f7a; --c-gold: #d0983a; --c-red: #c8765a; --c-sand: #c9a57a;
  --action: #c8664b; --action-ink: #ffffff; --action-soft: #fdebe6;
  --shadow: 0 1px 2px rgba(30,40,50,.05), 0 10px 28px rgba(30,40,50,.08);
}
/* buttons: bold, rounded, a little lift */
button.primary, .primary.savebtn, .savebtn, .addbtn, #pickGo, #saveList, .aibtn:not(.on) {
  background: var(--action) !important; border-color: var(--action) !important; color: var(--action-ink) !important;
  border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(200,102,75,.25) !important; transition: transform .15s ease, box-shadow .15s ease;
}
button.primary:hover, .savebtn:hover, .addbtn:hover, #pickGo:hover, #saveList:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(200,102,75,.32) !important; }
button.secondary, .tools button, .tools label, .sheet button, .sheet label, .listfoot button {
  border-radius: 999px !important; font-weight: 600;
}
.card { border-radius: 22px !important; }
.card h2 { font-weight: 600 !important; letter-spacing: -0.015em; }
.nav button[aria-current="true"] { color: var(--action) !important; }
.savepill.dirty { background: var(--action) !important; border-color: var(--action) !important; }

/* the header sits on a soft band with an angled edge */
header { position: relative; }


body.inner header::after { display: none; }
.wordmark { font-weight: 600 !important; }

/* book covers */
.row input[type="text"] { padding: 10px 12px; min-height: 42px; width: 138px; text-align: right; font-size: 16px; }
.cover {
  position: relative; flex: 0 0 auto; width: var(--cw, 48px); height: calc(var(--cw, 48px) * 1.5); border-radius: 4px 8px 8px 4px;
  overflow: hidden; background: var(--cc, #5f9e7c); color: #fff; box-shadow: 0 6px 14px rgba(30,40,50,.18), inset 3px 0 0 rgba(0,0,0,.12);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--cw, 48px) * .1);
}
.cover .ct { font-family: Newsreader, Georgia, serif; font-size: calc(var(--cw, 48px) * .17); line-height: 1.12; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cover .ca { font-size: calc(var(--cw, 48px) * .11); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover .cm { position: absolute; right: -18%; bottom: -12%; width: 70%; height: 45%; border-radius: 50%; background: rgba(255,255,255,.16); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nowchip .cover { --cw: 40px; }
#picker .lcard { flex-direction: row !important; align-items: flex-start; gap: 14px !important; }
#picker .lcard .pickbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wordmark { display: inline-flex !important; align-items: center; justify-content: center; gap: 14px; }
.wordmark .logo { width: clamp(46px, 7vw, 76px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(61,120,160,.22)); }
body.inner .wordmark .logo { width: 34px; }
@media (max-width: 560px) { header .stack { height: 84px !important; } }
.spot { display: block; width: 116px; height: auto; margin: -4px 0 6px; }
@media (max-width: 560px) { .spot { width: 92px; } .wordmark { gap: 10px; } }
.passgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.passgrid select, .passgrid textarea { width: 100%; margin: 0 0 10px; text-align: left; font-size: 15px; }
.rvstars { display: flex; gap: 4px; margin: 0 0 10px; }
.rvstars button { font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: #d8d2c6; padding: 0 2px; }
.rvstars button.on { color: var(--c-gold); }
.rvitem, .qitem { border-top: 1px solid var(--line); padding: 12px 0; }
.rvitem b { display: block; color: var(--ink); }
.rvitem .st { color: var(--c-gold); letter-spacing: 2px; }
.rvitem p, .qitem p { margin: 6px 0; font-family: Newsreader, Georgia, serif; font-size: 16px; color: var(--ink); line-height: 1.5; }
.qitem small, .rvitem small { color: var(--ink-faint); font-size: 12.5px; }
.qitem .tools, .rvitem .tools { margin: 6px 0 0; }
.together { background: #fbf6f2 !important; }
#passOut { margin-top: 16px; }
.clubhome, .clubview { margin-bottom: 18px; }
.clublist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 12px; }
.clubcard { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; cursor: pointer; padding: 12px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--field); }
.clubcard b { display: block; color: var(--ink); font-size: 16px; }
.clubcard span { display: block; color: var(--ink-soft); font-size: 13px; }
.clubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.clubgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.clubgrid input, .clubgrid select { width: 100%; text-align: left; font-size: 15px; }
.clubhead { display: flex; gap: 18px; align-items: center; margin: 4px 0 12px; }
.clubhead h2 { margin: 0 !important; font-size: 28px; }
.clubkick { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.clubbook { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.clubmeet { margin: 2px 0 0; color: var(--c-blue); font-weight: 700; font-size: 14px; }
.member { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.member .mn { font-size: 14px; color: var(--ink); font-weight: 600; }
.member .mbar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.member .mbar i { display: block; height: 100%; border-radius: 99px; }
.member .mp { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.mypage { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 6px 0 16px; }
.mypage label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.mypage input { width: 110px; text-align: left; padding: 9px 11px; }
.mypage .primary { width: auto; margin: 0; padding: 10px 18px; }
.clubnotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.clubnotes .card { max-height: none; margin: 0; border-radius: 22px !important; padding: 20px !important; }
.passhead { margin: 8px 0 12px; }
.dayview { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.daydate { margin: 0 0 4px; font-family: Newsreader, Georgia, serif; font-size: 22px; color: var(--ink); }
.dayitem { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr) 24px; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); border-left: 5px solid var(--c-sage); }
.dayitem.act { background: transparent; border-left-color: var(--line); }
.dayitem.done { opacity: .6; }
.dayitem .dt { font-weight: 800; color: var(--c-blue); font-size: 15px; }
.dayitem .dt small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 12.5px; }
.dayitem .db b { display: flex; align-items: center; font-size: 16px; color: var(--ink); }
.dayitem .db span { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.dayitem .tick2 { position: static; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--field);
  cursor: pointer; padding: 0; font-size: 12px; color: #fff; line-height: 1; }
.dayitem.done .tick2 { background: var(--c-sage); border-color: var(--c-sage); }
.dayitem.missed .tick2 { background: var(--c-red); border-color: var(--c-red); }
.dayview .addhere { align-self: flex-start; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-soft); }
.dayview .addhere:hover { color: var(--action); border-color: var(--action); }
.problem { background: #fbeee9 !important; color: #8a3f2c; border-color: #efc9bd !important; font-size: 14px; }
#errorNote { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 90; padding: 12px 14px; border-radius: 14px;
  background: #fbeee9; color: #8a3f2c; border: 1px solid #efc9bd; font-size: 14px; box-shadow: var(--shadow); cursor: pointer; }
header .wordmark { font-size: clamp(46px, 5.4vw, 60px) !important; height: 68px; line-height: 68px !important; display: flex !important; align-items: center; justify-content: center; }
body.inner .wordmark { font-size: clamp(46px, 5.4vw, 60px) !important; }
header h1 { font-size: clamp(20px, 2.2vw, 24px) !important; line-height: 1.3 !important; height: 1.3em; margin-top: 0 !important; }
@media (max-width: 560px) { header .wordmark { font-size: 44px !important; } body.inner .wordmark { font-size: 44px !important; } .tagrow h1 { font-size: 14.5px !important; } }
.clubtools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }
.clubtools button { width: 100%; margin: 0; padding: 10px 8px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--c-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clubtools button.primary { color: #fff; }
@media (max-width: 560px) { .clubtools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clubtabs { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 14px; }
.clubtabs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
@media (max-width: 700px) { .clubtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ctpane.hidden { display: none; }
.notefilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
#clubNotebook { width: 100%; min-height: 260px !important; }
.dictstate { font-size: 13px; color: var(--action); margin-left: 8px; align-self: center; }
#nav-club { color: var(--action) !important; background: var(--action-soft); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding-left: 18px !important; padding-right: 18px !important; font-weight: 700 !important; }

#nav-club[aria-current="true"] { background: var(--action) !important; color: #fff !important; }
header .inner { position: relative; }
header .welcome { position: absolute; left: 0; right: 0; top: -20px; margin: 0 !important; }
.tagrow { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; }
.tagrow h1 { margin: 0 !important; }
.tagrow .ticker { margin: 0 !important; }
.tagrow .ticker svg { width: 34px; height: 26px; }
.tagrow .tick-num { font-size: 24px; }
.passgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.passgrid > .card { margin: 0; display: flex; flex-direction: column; min-height: 360px; }
.passgrid select, .passgrid textarea { width: 100%; margin: 0 0 10px; text-align: left; font-size: 15px; }
#rvList, #qList, #shPreview { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-top: 8px; }
.passgrid > .card { height: 560px; min-height: 0 !important; }
@media (max-width: 760px) { .passgrid > .card { height: auto; } #rvList, #qList, #shPreview { flex: none; max-height: 320px; } }
.passgrid { grid-auto-rows: 1fr; }
#rvText { min-height: 90px; }
#qList { flex: 1; }
.passgrid .tools { margin-top: auto; }
@media (max-width: 760px) { .passgrid { grid-template-columns: 1fr; } .passgrid > .card { min-height: 0; } }
.shpreview .minishelf { margin: 4px 0 12px; }
.shpreview ol { margin: 0; padding-left: 20px; }
.shpreview li { font-size: 14.5px; color: var(--ink); margin: 0 0 6px; }
.shpreview li span { color: var(--ink-soft); font-size: 13px; }
.shpreview li.done { color: var(--ink-faint); text-decoration: line-through; }
#clubNotebook { min-height: 68vh !important; font-size: 18px !important; line-height: 1.7 !important; }
.nbfoot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.nbsaved { font-size: 13px; color: var(--ink-faint); }
.nbwrap.full { position: fixed; inset: 2vh max(2vw, calc((100vw - 1400px) / 2)); z-index: 60; background: var(--field);
  border-radius: 22px; padding: 26px clamp(18px, 5vw, 60px); box-shadow: 0 30px 90px rgba(40,44,52,.2); display: flex; flex-direction: column; }
.nbwrap.full #clubNotebook { flex: 1; min-height: 0 !important; font-size: 19px !important; }
@media (max-width: 560px) { .nbwrap.full { inset: 0; border-radius: 0; padding: 16px; } }
.talkbox { display: flex; flex-direction: column; gap: 14px; height: 62vh; min-height: 360px; overflow-y: auto; padding: 8px 4px 12px; }
.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.msg .bub { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 10px 12px; }
.msg.mine .bub { background: var(--action-soft); border-color: #f1d3c9; }
.msg b { font-size: 13.5px; color: var(--ink); }
.msg small { font-size: 12px; color: var(--ink-faint); margin-left: 6px; }
.msg p { margin: 4px 0 0; font-size: 16px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.msg .bub { padding: 12px 16px !important; border-radius: 6px 20px 20px 20px !important; max-width: 760px; }
.msg .avatar { width: 38px; height: 38px; }
.msg { grid-template-columns: 38px minmax(0, 1fr) !important; }
.talkin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 10px; }
.talkin textarea { border-radius: 20px !important; padding: 12px 16px; font-size: 16px; }
.talkin textarea { width: 100%; text-align: left; }
.digest { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.digest label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.digest select, .digest input { font-size: 14px; text-align: left; min-width: 200px; }
.clubview.showcase .clubtabs { display: none !important; }
.clubview.showcase .ctpane { display: block !important; margin-bottom: 22px; }
.clubview.showcase .ctpane::before { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 10px; }
.clubview.showcase #ct-people::before { content: 'Where everyone is'; }
.clubview.showcase #ct-notes::before { content: 'Notes and highlights'; }
.clubview.showcase #ct-book::before { content: 'Club notebook'; }
.clubview.showcase #ct-talk::before { content: 'Messages'; }
.clubview.showcase #ct-meet::before { content: 'Meetings'; }
.clubview.showcase #clubNotebook { min-height: 220px !important; }
body.focus .nav { align-items: center !important; padding: 6px !important; }
body.focus .nav button { margin: 0 !important; line-height: 1.2 !important; }
body.focus .nav button[aria-current="true"] { color: #fff !important; }
@media (max-width: 1100px) {
  body.focus .nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: calc(100vw - 24px) !important;
    max-width: 640px !important; border-radius: 20px !important; padding: 5px !important; gap: 3px !important; overflow: visible !important; }
  body.focus .nav button { font-size: 12.5px !important; padding: 7px 4px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; border-radius: 14px !important; }
  #nav-club { padding-left: 6px !important; padding-right: 6px !important; gap: 5px !important; }
}
.ovgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ovcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; min-height: 150px; }
.ovmeet { background: var(--action-soft); border-color: #f1d3c9; }
.ovbook { grid-column: span 2; }
.ovhead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.ovhead h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ovhead .linkbtn { font-size: 13px; }
.ovbig { margin: 6px 0 8px; font-family: Newsreader, Georgia, serif; font-size: 22px; color: var(--ink); line-height: 1.25; }
.ovlink { font-size: 14px; font-weight: 700; color: var(--action); }
.race { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 2px; }
.rrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.rname { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow.me .rname { color: var(--ink); font-weight: 700; }
.rtrack { position: relative; height: 12px; margin: 0 16px 0 14px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 10px, transparent 10px 14px); }
.rtrail { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; opacity: .55; transition: width .6s ease; }
.rav { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; border: 2.5px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: left .6s ease; }
.rrow.me .rav { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 15px; }
.rrow.done .rav { border-color: #e2b23c; box-shadow: 0 0 0 3px rgba(226,178,60,.35), 0 2px 6px rgba(0,0,0,.18); }
@media (max-width: 600px) { .rrow { grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 6px; } .rname { font-size: 12.5px; } }
.rpct { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-align: right; }
.rrow.done .rpct { color: #b8862a; }
.ovp { display: grid; grid-template-columns: 24px minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin: 0 0 7px; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.ovp .mbar { margin: 0; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ovp .mbar i { display: block; height: 100%; border-radius: 99px; }
.ovp small { font-size: 12px; color: var(--ink-soft); text-align: right; }
.ovmsg { margin: 0 0 8px; font-size: 14px; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ovmsg b { color: var(--ink); }
.ovnb { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 16px; color: var(--ink); white-space: pre-wrap; line-height: 1.5; max-height: 150px; overflow: hidden; }
@media (max-width: 900px) { .ovgrid { grid-template-columns: 1fr 1fr; } .ovbook { grid-column: span 2; } }
@media (max-width: 560px) { .ovgrid { grid-template-columns: 1fr; } .ovbook { grid-column: auto; } .clubtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ovcal { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.caltile { width: 64px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(200,102,75,.18); text-align: center; flex: 0 0 auto; }
.caltile span { display: block; background: var(--action); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; padding: 4px 0; }
.caltile b { display: block; font-size: 28px; font-weight: 800; color: var(--ink); padding: 6px 0 8px; }
.ovcal .ovbig { margin: 0; font-size: 21px; }
.ovtime { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--c-blue); }
.ovlink { display: inline-block; margin-top: 4px; padding: 7px 14px; border-radius: 999px; background: var(--action); color: #fff !important; text-decoration: none; font-size: 13.5px; }
.ovchat { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 8px; }
.ovbub { margin: 0; padding: 7px 11px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; color: var(--ink); line-height: 1.35;
  max-height: calc(2.7em + 14px); overflow: hidden; }
.ovquote { border-left: 4px solid var(--c-sage); padding: 4px 0 4px 10px; margin: 0 0 10px; }
.ovquote p { margin: 0; font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 15px; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ovquote small { font-size: 12px; font-weight: 700; }
.ovbook .ovnb { background: repeating-linear-gradient(180deg, transparent 0 23px, #e9edf0 23px 24px); line-height: 24px !important; padding: 0 4px; }
.ovbook { background: #fffdf8; border-color: #efe6d6; }
.wordmark .wm-a { color: var(--c-blue); }
.wordmark .wm-b { color: var(--action); font-style: normal; margin-left: 0; }
header .wordmark { letter-spacing: -0.02em; font-weight: 600 !important; }
.wm-o { width: .56em; height: .56em; margin: 0 .02em; vertical-align: -.02em; display: inline-block; }
.wordmark { gap: 0 !important; }
header .stack { margin-bottom: 14px !important; }
header .wordmark { height: auto !important; line-height: 1.05 !important; margin: 0 0 8px !important; }
.tagrow { gap: 10px !important; min-height: 38px; }
.tagrow .ticker { gap: 6px !important; padding: 0 0 0 12px; border-left: 1px solid var(--tint-2); background: none; }
.tagrow .ticker svg { width: 26px !important; height: 20px !important; }
.tagrow .tick-num { font-size: 18px !important; min-width: 2ch; }
#dots { min-width: 1.6ch !important; }
.session:not(.act) { border: 1px solid var(--line) !important; border-left-width: 1px !important; border-radius: 14px !important; }
.dayitem { border-left-width: 1px !important; }
h2.sec { display: inline-flex; align-items: center; gap: 10px; }
h2.sec::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
h2.sec-gold { color: var(--c-gold) !important; } h2.sec-red { color: var(--c-red) !important; }
h2.sec-blue { color: var(--c-blue) !important; } h2.sec-sage { color: var(--c-sage) !important; }
#recent { max-height: 560px; overflow-y: auto; padding-right: 4px; }
#picker { max-height: 640px; overflow-y: auto; padding: 2px 4px 2px 2px; }
#sets { max-height: 520px; overflow-y: auto; }
.recentrow .rx.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rbar { display: flex; gap: 14px; }
#recent .recentrow { cursor: default; }
#recent { max-height: 600px; }
.recentrow .more { font: inherit; font-size: 13px; font-weight: 600; color: var(--c-blue); background: none; border: 0; padding: 4px 0 0; cursor: pointer; }
.listfoot.inrow { position: relative; }
.moremenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; background: var(--field); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.moremenu.hidden { display: none; }
.listframe #listfinish, .listframe #listSchedule, .listframe #listStreak { display: none !important; }
.moremenu button { text-align: left; border: 0 !important; background: none !important; border-radius: 10px !important; padding: 9px 12px !important; width: 100%; }
.moremenu button:hover { background: var(--surface-2) !important; }
.moremenu #delBtn { color: var(--c-red) !important; }
.listframe .pacebox summary { font-size: 13.5px !important; color: var(--ink-soft) !important; }
.listframe .statline b { font-size: 17px; }
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sechead h2 { margin: 0 !important; }
.popbtn { font: inherit; font-size: 13px; font-weight: 600; color: var(--c-blue); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.card.popped { position: fixed !important; inset: 2vh max(2vw, calc((100vw - 1400px) / 2)); z-index: 60; margin: 0 !important; overflow-y: auto;
  box-shadow: 0 30px 90px rgba(40,44,52,.22); animation: immerse .25s ease both; }
.card.popped #recent, .card.popped #picker, .card.popped #sets { max-height: none; }
@media (max-width: 560px) { .card.popped { inset: 0; border-radius: 0 !important; } }
.card.dropping { outline: 3px dashed var(--c-red); outline-offset: -6px; }
.calbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.calbtns .secondary { width: auto; margin: 0; }
.clubsched { margin: 0 0 14px; }
body.inclub header { display: none; }
body.inclub .wrap { max-width: 1240px !important; padding-top: 70px; }
body.inclub .clubview { padding: 28px clamp(18px, 3vw, 40px) !important; border-radius: 28px !important; }
body.inclub .clubhead h2 { font-size: clamp(30px, 4vw, 42px); }
.clubview .clubhead { padding: 18px; margin: 6px -6px 16px; border-radius: 22px;
  background: linear-gradient(120deg, #e7f0f1, #f4f1ea 55%, #eef3ec); }
.ovgrid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ovside { display: flex; flex-direction: column; gap: 16px; }
.ovtalk { display: flex; flex-direction: column; min-height: 340px; }
.ovtalk #ovTalk { flex: 1; overflow-y: auto; max-height: 460px; }
.ovcompose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.ovcompose input { width: 100%; text-align: left; border-radius: 999px !important; padding: 11px 16px; font-size: 15px; }
.ovcompose .primary { width: auto; margin: 0; padding: 10px 20px; }
.ovnotes { grid-column: 1 / -1; min-height: 0; }
.ovnotes .ovquote { display: inline-block; vertical-align: top; width: calc(50% - 8px); margin: 0 12px 12px 0 !important; box-sizing: border-box; }
.ovnotes .ovquote:nth-of-type(2n) { margin-right: 0 !important; }
@media (max-width: 700px) { .ovnotes .ovquote { width: 100%; margin-right: 0 !important; } }
.ovbook { grid-column: 1 / -1; min-height: 380px; }
.ovbook .ovnb { max-height: 360px !important; font-size: 16px !important; line-height: 28px !important; background: repeating-linear-gradient(180deg, transparent 0 27px, #e7eef0 27px 28px) !important; }
.ovcard { border-radius: 22px !important; padding: 18px 20px !important; background: var(--field) !important; box-shadow: 0 6px 22px rgba(40,44,52,.05); }
.ovmeet { background: linear-gradient(135deg, #fbeee9, #fdf6ef) !important; border-color: #f3dcd3 !important; }
.ovbook { background: #ffffff !important; }
.ovhead h3 { font-size: 13px !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ink) !important; font-weight: 700 !important; }
.daynum { width: 52px; height: 52px; border-radius: 50%; background: var(--action); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; flex: 0 0 auto; box-shadow: 0 6px 16px rgba(200,102,75,.25); }
.ovcal .ovbig { font-family: inherit !important; font-size: 17px !important; font-weight: 700; color: var(--ink); }
.ovtime { font-size: 14px !important; }
.ovchat { grid-template-columns: 30px minmax(0, 1fr) !important; margin: 0 0 12px !important; }
.ovchat .avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.ovbub { max-height: none !important; padding: 9px 14px !important; border-radius: 6px 18px 18px 18px !important; }
.ovbub b { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 2px; }
.ovbub p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.4; }
.ovquote { border-left: 0 !important; background: var(--surface); border-radius: 14px; padding: 10px 14px !important; }
.ovquote p { font-family: inherit !important; font-style: normal !important; font-size: 14.5px !important; }
.ovnb { font-family: inherit !important; font-size: 14.5px !important; }
@media (max-width: 900px) { .ovgrid2 { grid-template-columns: 1fr; } .ovtalk { min-height: 0; } }
.meetplan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: center; margin: 4px 0 18px; }
.meetpreview { display: flex; align-items: center; gap: 22px; padding: 28px; border-radius: 26px;
  background: linear-gradient(135deg, #fbeee9, #fdf6ef 55%, #f1f5f2); min-height: 200px; }
.meetbadge { width: 104px; height: 104px; border-radius: 30px; background: #fff; box-shadow: 0 12px 28px rgba(200,102,75,.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.meetbadge span { font-size: 14px; font-weight: 700; color: var(--action); letter-spacing: .06em; text-transform: uppercase; }
.meetbadge b { font-size: 40px; font-weight: 600; color: var(--c-blue); line-height: 1.1; }
.meeth { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 26px; color: var(--ink); line-height: 1.2; }
.meetsub { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.meetform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.meetform label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.meetform label.wide { grid-column: span 2; }
.meetform input { width: 100%; text-align: left; border-radius: 16px !important; padding: 13px 16px; font-size: 16px; background: #f4f5f7 !important; border: 1px solid #eceef1 !important; }
@media (max-width: 800px) { .meetplan { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .meetform { grid-template-columns: 1fr; } .meetform label.wide { grid-column: auto; } .meetpreview { padding: 20px; gap: 14px; } .meetbadge { width: 80px; height: 80px; } .meeth { font-size: 21px; } }
.tutorfloat { background: var(--action) !important; color: #fff !important; border: 0 !important; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: 0 10px 26px rgba(200,102,75,.35) !important;
  animation: nudge 3.2s ease-in-out 2s 2; }
.tutorfloat:hover { transform: translateY(-2px); }
@keyframes nudge { 0%, 100% { transform: none; } 45% { transform: translateY(-4px); } 55% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tutorfloat { animation: none; } }
.tutorbar #tutorExit { font-weight: 700; }
.day-col { background: var(--field) !important; border: 0 !important; border-radius: 22px !important; padding: 12px 10px 10px !important;
  box-shadow: 0 6px 20px rgba(40,44,52,.05); }
.day-col.today { box-shadow: 0 0 0 2px var(--action-soft), 0 10px 26px rgba(200,102,75,.12) !important; outline: 0 !important; border: 0 !important; }
.dayhead { display: flex !important; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 10px !important; cursor: pointer; }
.dayhead small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.dayhead b { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--ink); }
.day-col.today .dayhead b { background: var(--action); color: #fff; }
.session:not(.act) { border: 0 !important; border-radius: 16px !important; }
.session.act { background: var(--surface) !important; border-radius: 12px !important; padding: 6px 26px 6px 10px !important; }
.session.act .kicon { display: inline-flex !important; width: 18px; height: 18px; margin-right: 6px; }
.day-col .addhere { border: 0 !important; background: transparent !important; color: var(--ink-faint) !important; font-size: 20px !important; font-weight: 400 !important;
  width: 34px; height: 34px; border-radius: 50% !important; align-self: center; padding: 0 !important; }
.day-col .addhere:hover { background: var(--action-soft) !important; color: var(--action) !important; }
#calSum { display: flex !important; gap: 10px; flex-wrap: wrap; }
#calSum > div { flex: 1 1 120px; border: 0 !important; border-radius: 18px !important; background: var(--field) !important; box-shadow: 0 4px 16px rgba(40,44,52,.04); }
:root { --tint: #f6f1ea; --tint-2: #efe7dc; }
.nav { background: var(--field) !important; box-shadow: 0 6px 24px rgba(40,44,52,.07) !important; border: 1px solid #eee8df !important; }
.nav button[aria-current="true"] { background: var(--tint) !important; box-shadow: none !important; }
.unit, .clubtabs, .tabs { background: var(--tint) !important; border: 1px solid var(--tint-2); }
.tabs button[aria-selected="true"] { color: var(--action) !important; }
.unit button[aria-selected="true"], .clubtabs button[aria-selected="true"] { background: var(--field) !important; color: var(--action) !important; box-shadow: 0 2px 8px rgba(40,44,52,.08) !important; }
.tagrow { display: inline-flex !important; align-items: center; margin: 0 auto; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--field);
  box-shadow: 0 6px 22px rgba(40,44,52,.06); border: 1px solid #eee8df; }
header .inner { display: flex; flex-direction: column; align-items: center; }
.tagrow h1 { font-family: Newsreader, Georgia, serif !important; font-size: 15px !important; color: var(--ink) !important; font-weight: 500 !important; }
.tagrow .tick-num { color: var(--action) !important; }
.shelfsum { display: flex !important; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 0 0 14px !important; }
.shelfsum > div { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: flex; align-items: baseline; gap: 6px; }
.shelfsum b { font-size: 22px !important; }
.shelfsum span { font-size: 14px !important; color: var(--ink-soft); }
.shelfbtns { display: flex !important; justify-content: center; gap: 8px; margin: 0 0 18px !important; }
.shelfbtns button { width: auto !important; flex: 0 0 auto; padding: 9px 18px !important; border-radius: 999px !important; border: 1px solid var(--tint-2) !important;
  background: var(--field) !important; font-size: 14px !important; font-weight: 600; color: var(--c-blue) !important; }
.shelfbtns #newList { background: var(--action) !important; color: #fff !important; border-color: var(--action) !important; }
.nowcard { background: #ffffff !important; border: 1px solid var(--line) !important; }
.nowchip { background: var(--field) !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(40,44,52,.06); }
.nowdeep { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.nowdeep.hidden { display: none; }
.deepbook { display: flex; gap: 20px; background: var(--field); border-radius: 22px; padding: 20px; box-shadow: 0 6px 22px rgba(40,44,52,.06); }
.deepbody { min-width: 0; flex: 1; }
.deepbody h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 24px; font-weight: 500; color: var(--ink); }
.deepa { margin: 4px 0 12px; font-size: 14px; color: var(--ink-soft); }
.deepfacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.deepfacts span { background: var(--tint); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--ink-soft); }
.deepfacts b { color: var(--ink); margin-right: 5px; font-size: 14px; }
.deepwhen { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--c-blue); }
.deepbook .tools { display: flex; gap: 8px; flex-wrap: wrap; }
.deepbook .tools button { width: auto !important; margin: 0 !important; padding: 10px 18px !important; }
.deepnote { margin: 0 0 10px; font-size: 14.5px; color: var(--ink); line-height: 1.45; background: var(--surface-2); border-radius: 14px; padding: 10px 14px; }
@media (max-width: 560px) { .nowdeep { grid-template-columns: 1fr; } .deepbook { flex-direction: column; } }
.glancerow { border: 0 !important; border-radius: 20px !important; background: var(--field) !important; box-shadow: 0 4px 16px rgba(40,44,52,.05); padding: 14px 16px !important; align-items: center !important; }
.glancerow.today { box-shadow: 0 0 0 2px var(--action-soft), 0 8px 22px rgba(200,102,75,.12) !important; }
.glancerow .gd { display: flex; align-items: center; gap: 10px; }
.glancerow .gd span { font-size: 13px; }
.gchip { border: 0 !important; background: var(--tint) !important; padding: 6px 12px !important; }
.dayview { gap: 12px !important; }
.dayitem { border: 0 !important; border-radius: 20px !important; box-shadow: 0 4px 16px rgba(40,44,52,.05); padding: 16px 18px !important; }
.dayitem.act { background: var(--field) !important; }
.dayitem .dt { color: var(--ink) !important; }
.gnum { width: 34px; height: 34px; border-radius: 50%; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink); }
.glancerow.today .gnum { background: var(--action); color: #fff; }
.glancerow { grid-template-columns: 92px 1fr !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tint: #2b2720; --tint-2: #383228; --action-soft: #3a2620; --field: #221f19; --surface: #1c1a15; }
  :root:not([data-theme="light"]) .ovmeet, :root:not([data-theme="light"]) .meetpreview, :root:not([data-theme="light"]) .clubview .clubhead,
  :root:not([data-theme="light"]) .nowcard, :root:not([data-theme="light"]) .ovbook, :root:not([data-theme="light"]) .deepnote,
  :root:not([data-theme="light"]) .together, :root:not([data-theme="light"]) .problem { background: var(--surface-2) !important; border-color: var(--line) !important; }
  :root:not([data-theme="light"]) .meetbadge, :root:not([data-theme="light"]) .caltile, :root:not([data-theme="light"]) .tagrow,
  :root:not([data-theme="light"]) .nav, :root:not([data-theme="light"]) .shelfbtns button:not(#newList) { background: var(--field) !important; border-color: var(--line) !important; }
  :root:not([data-theme="light"]) .ovbook .ovnb { background: repeating-linear-gradient(180deg, transparent 0 27px, #3a342a 27px 28px) !important; }
  :root:not([data-theme="light"]) .msg.mine .bub { background: #3a2620 !important; border-color: #4a3027 !important; }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  :root:not([data-theme="light"]) .meetform input { background: var(--surface-2) !important; }
  :root:not([data-theme="light"]) .cover { color: #fff; }
}
.importbig { background: var(--c-blue) !important; color: #fff !important; border-color: var(--c-blue) !important; display: inline-flex !important; align-items: center; gap: 8px; font-weight: 700 !important; }
.pickwrap { margin: 10px 0 12px; }
.cmppanel { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--tint); }
.cmppanel.hidden { display: none; }
.cmppanel select { width: 100%; margin: 0 0 8px; text-align: left; }
.cmpbooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.cmpbook { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
#notePrompt { color: var(--action) !important; font-weight: 700; }
.votein { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin: 0 0 14px; }
.votein select, .votein input { width: 100%; text-align: left; }
@media (max-width: 700px) { .votein { grid-template-columns: 1fr; } }
.votelist { display: flex; flex-direction: column; gap: 10px; }
.voterow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--field); box-shadow: 0 4px 14px rgba(40,44,52,.05); }
.voterow.lead { box-shadow: 0 0 0 2px var(--action-soft), 0 6px 18px rgba(200,102,75,.14); }
.votebody b { display: block; font-size: 16px; color: var(--ink); }
.votebody span { display: block; font-size: 13px; color: var(--ink-soft); margin: 2px 0 6px; }
.votebody .mbar { height: 8px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.votebody .mbar i { display: block; height: 100%; border-radius: 99px; }
.votebtn { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--tint-2); background: var(--field); color: var(--action); cursor: pointer; white-space: nowrap; }
.votebtn.primary { color: #fff !important; }
.readtabs { display: flex !important; width: max-content; max-width: 100%; margin: 0 auto 16px; }
.uplabel { cursor: pointer; display: inline-block; padding: 9px 16px !important; font-size: 14px !important; }
.ebookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin-top: 12px; }
.ebook { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; background: none; border: 0; font: inherit; padding: 8px; border-radius: 18px; }
.ebook:hover { background: var(--tint); }
.ebookwrap { position: relative; }
.ebookwrap .ebook { width: 100%; }
.ebookwrap.picking .ebookx { display: none; }
.ebookwrap.picking .ebook { opacity: .6; }
.ebookwrap.picked .ebook { opacity: 1; background: var(--tint); box-shadow: inset 0 0 0 2px var(--c-blue); }
.ebookwrap.picked::after { content: '\2713'; position: absolute; top: 6px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-blue); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.ebookwrap.away .cover { filter: grayscale(.6); opacity: .7; }
.libselbar { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 6px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 999px; background: #2c2e31; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 24px); }
.libselbar > b { font-size: 18px; font-weight: 800; }
.libselbar > span { font-size: 13.5px; color: rgba(255,255,255,.75); margin-right: 6px; }
.libselbar button { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 0 !important; }
.libselbar button.go { background: var(--action) !important; }
.libselbar button.x { width: 34px !important; height: 34px; padding: 0 !important; font-size: 20px !important; }
@media (max-width: 600px) { .libselbar { right: 12px; left: 12px; justify-content: space-between; } }
.ebookgrid.byshelf { display: block !important; }
.covertile.picked .cover { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.covertile.picked::after { content: '\2713'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-blue); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; z-index: 4; }
.covertile { position: relative; }
.libshelf { margin: 0 0 26px; padding: 18px 18px 8px; border-radius: 26px; background: color-mix(in srgb, var(--sc) 7%, var(--field)); border: 1px solid color-mix(in srgb, var(--sc) 18%, var(--line)); transition: box-shadow .15s, border-color .15s; }
.libshelf.over { border-color: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 30%, transparent); }
.libshelfhead { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 10px; }
.libshelfhead h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 23px; font-weight: 500; color: var(--ink); }
.libshelfhead h3::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); margin-right: 10px; vertical-align: 3px; }
.libshelfhead span { font-size: 13px; color: var(--ink-faint); }
.libshelfhead { cursor: pointer; user-select: none; -webkit-user-select: none; border-radius: 12px; }
.libshelfhead:focus-visible { outline: 2px solid var(--sc); outline-offset: 4px; }
.libfold { margin-left: auto; align-self: center; width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative; transition: background .15s; }
@media (hover: hover) { .libshelfhead:hover .libfold { background: color-mix(in srgb, var(--sc) 14%, transparent); } }
.libfold::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid var(--ink-soft, #6d6a66); border-bottom: 2px solid var(--ink-soft, #6d6a66); transform: rotate(45deg); transition: transform .2s, margin .2s; }
.libshelf.folded .libfold::before { transform: rotate(-45deg); margin: -4px 0 0 -6px; }
.libshelf.folded { padding-bottom: 4px; }
.libshelf.folded .libshelfhead { margin-bottom: 4px; }
.libshelf.folded .libgrid { display: none; }
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 18px 14px; min-height: 90px; }
@media (max-width: 600px) { .libgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; } .libshelf { padding: 14px 8px 4px; border-radius: 22px; } }
.libmarq { position: fixed; z-index: 70; border: 1.5px solid var(--c-blue); background: color-mix(in srgb, var(--c-blue) 12%, transparent); border-radius: 6px; pointer-events: none; }
.libselbar.hidden { display: none; }
.libselbar button { width: auto; margin: 0; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.libselbar button.danger { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.libselbar button:disabled { opacity: .45; cursor: default; }
.ebookx { position: absolute; top: 2px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease; display: grid; place-items: center; padding: 0; }
.ebookwrap:hover .ebookx, .ebookx:focus-visible { opacity: 1; }
@media (hover: none) { .ebookx { opacity: .75; } }
.libmini { font: inherit; font-size: 13px !important; font-weight: 700; width: auto !important; margin: 0 !important; padding: 7px 13px !important; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; }
.libmini[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-faint); }
.libquiet { margin: 34px 0 6px; display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 12px; color: var(--ink-faint); }
.libquiet button { font: inherit; font-size: 12px; background: none; border: 0; padding: 4px; color: var(--ink-faint); cursor: pointer; width: auto; margin: 0; }
.libquiet button:hover { color: var(--ink-soft); text-decoration: underline; }
.freegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 14px; margin: 14px 0 16px; }
.freebook { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: inherit; background: none; border: 0; padding: 6px; border-radius: 16px; cursor: pointer; color: var(--ink); }
.freebook:hover { background: var(--tint); }
.freebook .fcov { width: 96px; height: 144px; border-radius: 4px 8px 8px 4px; overflow: hidden; box-shadow: 0 6px 14px rgba(30,40,50,.18); position: relative; }
.freebook .fcov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.freebook .fcov .cover { --cw: 96px !important; }
.freebook > b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.freebook > span { font-size: 11.5px; color: var(--ink-soft); }
.freebook em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--action); min-height: 1em; }
.dbxrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dbxrow input { flex: 1 1 220px; text-align: left; }
.dbxrow button { width: auto !important; margin: 0 !important; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.dbxrow button.primary { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.dbxrow input { font: inherit; font-size: 14.5px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.dbxcard .dbxrow + .dbxrow { margin-top: 8px; }
.dbxstatus { font-weight: 600; }
.cloudbtn.off { opacity: .5; }
.cloudsetup { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.cloudsetup summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.setupblock { margin-top: 14px; }
.setupblock h4 { margin: 0 0 8px; font-size: 15px; color: var(--ink); } .setupblock h4 span { font-size: 11px; font-weight: 800; color: var(--c-sage); text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.dbxsteps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.dbxsteps a { color: var(--c-blue); font-weight: 600; } .dbxsteps code { font-size: 13px; background: var(--tint); padding: 1px 6px; border-radius: 6px; user-select: all; }
.dbxfolder { display: grid; gap: 4px; flex: 1 1 240px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.dbxfolder input { text-align: left; }
.freerow { display: flex; gap: 8px; }
.freerow input { flex: 1; min-width: 0; text-align: left; font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.freerow button { width: auto; margin: 0; font: inherit; font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.freecard .pane-note a { color: var(--c-blue); font-weight: 600; }
.ebook b { font-size: 14.5px; color: var(--ink); } .ebook span { font-size: 12.5px; color: var(--ink-soft); }
.ebook .mbar { width: 100%; height: 6px; border-radius: 99px; background: var(--tint-2); overflow: hidden; } .ebook .mbar i { display: block; height: 100%; background: var(--action); }
.reader { --rbg: #fbfbf9; --rink: #26282c; --rsoft: rgba(38,40,44,.5); --rchip: #ffffff; --rline: rgba(128,128,128,.2);
  --rshadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.09);
  position: fixed; inset: 0; z-index: 70; color: var(--rink); background: var(--rbg); overflow: hidden;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; transition: background-color .3s ease; -webkit-tap-highlight-color: transparent; }
.reader.rdark { --rline: rgba(255,255,255,.09); --rshadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45); }
.reader.hidden { display: none; }
.reader button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.readstage { position: absolute; left: 0; right: 0; top: calc(26px + env(safe-area-inset-top, 0px)); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; touch-action: none; }
.reader.plain .readstage { touch-action: pan-y; }
#readerView { width: min(680px, calc(100% - 44px)); height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; will-change: transform; }
#readerView iframe { background: transparent !important; }
.reader.pdfmode #readerView { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdfpage { display: block; max-width: 100%; max-height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 30px rgba(0,0,0,.08); border-radius: 2px; }
.reader.rdark .pdfpage .pdfcanvas { filter: brightness(.86); }
.pdfwrap { position: relative; flex: none; background: #fff; overflow: hidden; }
.pdfwrap .pdfcanvas { display: block; width: 100%; height: 100%; }
.pdfink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.pdfink path.hl { mix-blend-mode: multiply; }
.pdfnotes { position: absolute; inset: 0; pointer-events: none; }
.pdfnote { position: absolute; font-family: "Plus Jakarta Sans", -apple-system, sans-serif; font-weight: 600; line-height: 1.25; white-space: pre-wrap; max-width: 60%; }
.pdfnoteedit { position: absolute; z-index: 3; min-width: 160px; font: 600 14px "Plus Jakarta Sans", -apple-system, sans-serif; padding: 4px 8px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; background: #fff; }
.reader.inking .pdfink { pointer-events: auto; cursor: crosshair; }
.reader.inking .rdmark { display: none; }
.reader:not(.pdfmode) #rdInk { display: none; }
.rdinkbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inkbar { position: absolute; z-index: 6; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 16px));
  background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); border-radius: 20px; box-shadow: var(--rshadow); padding: 8px 10px; display: grid; gap: 6px; }
.inkbar.hidden { display: none; }
.inktools, .inkrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.inkbar button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; min-width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.inkbar button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inkbar [data-tool][aria-pressed="true"] { background: var(--rline); }
.inkbar .inkdot { min-width: 22px; width: 22px; height: 22px; border-radius: 50%; margin: 0 2px; }
.inkbar .inkdot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rchip), 0 0 0 4px currentColor; }
.inksep { width: 1px; height: 22px; background: var(--rline); margin: 0 4px; }
.inkcolors { display: inline-flex; align-items: center; }
#inkPage { font-size: 13px; opacity: .75; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.inkbar .inkplain { font-size: 13.5px; font-weight: 600; padding: 0 12px; margin-left: auto; }
.inkbar .inkdone { font-size: 13.5px; font-weight: 700; padding: 0 16px; background: var(--action, #c8765a); color: #fff; border-radius: 999px; }
.tickday.auto { cursor: default; }
.where { display: grid; gap: 8px; margin: 0 0 14px; }
.whererow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.wherebtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.whererow b { font-weight: 700; color: var(--ink); position: relative; padding-left: 14px; }
.whererow b::before { content: ''; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: #7f9c86; }
.whererow.off b::before { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.where .secondary { justify-self: start; margin: 2px 0 0; }
.resetmenu .histhead { margin: 6px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.resetmenu .histnone { margin: 4px 12px 6px; font-size: 13px; color: var(--ink-faint); max-width: 220px; }
.resetmenu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.resetmenu { min-width: 240px; max-height: 70vh; overflow-y: auto; z-index: 40; }
.pdfjump { width: 90px; text-align: center; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--rline); background: transparent; color: inherit; }
.rdmark { position: absolute; z-index: 3; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  height: 30px; padding: 0 14px 0 15px; border-radius: 999px; border: 1px solid var(--rline); background: transparent; box-shadow: none;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif !important; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rsoft) !important; cursor: pointer; opacity: .8;
  transition: transform .2s ease, opacity .2s ease, color .2s ease; }
.rdmark:hover { opacity: 1; background: var(--rchip); box-shadow: var(--rshadow); }
.rdmark:active { transform: translateX(-50%) scale(.96); }
.reader.chrome .rdmark { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }
.readfoot { position: absolute; z-index: 4; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100% - 20px));
  background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); border-radius: 24px; box-shadow: var(--rshadow);
  padding: 14px 14px 10px; display: grid; gap: 10px;
  transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.reader.chrome .readfoot { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.rdhead { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px; }
.rdheadtext { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rdheadtext b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdheadtext > span { font-size: 12.5px; color: var(--rsoft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rdheadtext #rdWhere:not(:empty)::after { content: '  \00b7'; }
.rdback { margin-left: -6px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.rdback svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rdx { border: 0; background: none; font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--rsoft) !important; }
.rdx:hover { background: var(--rline); color: var(--rink) !important; }
.rdscrub { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 6px; padding: 2px 0; }
.rdstep { border: 0; background: none; font-size: 22px; line-height: 1; height: 36px; border-radius: 10px; cursor: pointer; color: var(--rsoft) !important; }
.rdstep:hover { background: var(--rline); color: var(--rink) !important; }
.rdtrack { position: relative; height: 36px; cursor: pointer; touch-action: none; outline: none; }
.rdrail { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: var(--rline); overflow: hidden; }
.rdrail i { display: block; height: 100%; width: 0; background: var(--rink); opacity: .55; }
.rdknob { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--rchip); box-shadow: 0 0 0 1.5px var(--rink), 0 2px 8px rgba(0,0,0,.2); left: 0; transition: transform .12s ease; }
.rdtrack.dragging .rdknob, .rdtrack:focus-visible .rdknob { transform: scale(1.25); }
.rdtip { position: absolute; bottom: 44px; transform: translateX(-50%); white-space: nowrap; background: var(--rink); color: var(--rchip); font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 10px; pointer-events: none; font-variant-numeric: tabular-nums; }
.rdtip.hidden { display: none; }
.rdtip small { display: block; font-weight: 600; opacity: .75; font-size: 11px; }
.rdbackto { justify-self: center; border: 1px solid var(--rline); background: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--rink) !important; }
.rdbackto.hidden { display: none; }
.rdplace { position: absolute; z-index: 5; left: 50%; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); box-shadow: var(--rshadow); font-size: 12.5px; white-space: nowrap; max-width: calc(100% - 20px); }
.rdplace.hidden, .reader.chrome .rdplace { display: none; }
.rdplace > span { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; opacity: .65; margin-right: 4px; }
.rdplace button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--rline); color: inherit; }
.rdplace button + button { background: none; border: 1px solid var(--rline); }
.rdfootlink.startover { margin-top: 18px; opacity: .7; }
.reader.rdark .rdplace { --rink: var(--rmenu); --rchip: var(--rmenubg); --rline: rgba(255,255,255,.15); }
.rdprog-unused i { opacity: .5; }
.rdtabs { display: grid; grid-template-columns: repeat(5, 1fr); }
.rdtabs button { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; border: 0; background: none; border-radius: 14px; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--rsoft) !important; }
.rdtabs button:hover, .rdtabs button[aria-expanded="true"] { color: var(--rink) !important; background: var(--rline); }
.rdtabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rdlookrow { display: grid; gap: 10px; padding: 4px 2px 4px; border-top: 1px solid var(--rline); padding-top: 12px; }
.rdlookrow.hidden { display: none; }
.rdthemes { display: grid; gap: 8px; }
.rddots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px 0; justify-items: center; padding: 2px 0; }
.rddot { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rline); padding: 0; cursor: pointer; transition: transform .15s ease; }
.rddot:hover { transform: scale(1.08); }
.rddot.on { box-shadow: 0 0 0 2px var(--rchip), 0 0 0 3.5px var(--rink); }
.rdthemename { margin: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--rsoft); min-height: 1.2em; }
.rdplain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rdseg { height: 30px; border-radius: 10px; border: 1px solid var(--rline); cursor: pointer; }
.rdseg.on { box-shadow: 0 0 0 2px var(--rchip), 0 0 0 3.5px var(--rink); }
.rdtype { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--rline); border-radius: 12px; overflow: hidden; }
.rdtype button { height: 38px; border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.rdtype button + button { border-left: 1px solid var(--rline); }
.rdtype #rdSmaller { font-family: Newsreader, Georgia, serif; font-size: 14px; } .rdtype #rdBigger { font-family: Newsreader, Georgia, serif; font-size: 20px; }
.rdtype button:hover { background: var(--rline); }
.simplebook { font-family: Newsreader, Georgia, serif; font-size: 110%; line-height: 1.7; color: inherit; padding: 8px 0 60px; }
.simplebook h1, .simplebook h2, .simplebook h3 { font-weight: 500; margin: 1.6em 0 .6em; }
.simplebook p { margin: 0 0 .85em; }
.simplebook a { color: inherit; }
.selpop { position: absolute; z-index: 75; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: grid; gap: 10px; padding: 10px 12px 12px; border-radius: 22px; width: min(380px, calc(100% - 20px));
  background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); box-shadow: var(--rshadow); }
.selpop.hidden { display: none; }
.hldot { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s ease; }
.hldot:hover { transform: scale(1.1); }
.hldot.on { box-shadow: 0 0 0 2px var(--rchip), 0 0 0 3.5px var(--rink); }
.seltop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selmode { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rline); border-radius: 999px; overflow: hidden; }
.selmode button { border: 0; background: none; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--rsoft) !important; }
.selmode button.on { background: var(--rink); color: var(--rchip) !important; }
.seldots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; justify-items: center; }
.hldot.last { box-shadow: 0 0 0 2px var(--rchip), 0 0 0 3.5px var(--rsoft); }
g.bc-ul rect { stroke: none !important; clip-path: inset(calc(100% - 2.5px) 0 0 0); }
.selnote { border: 0; background: none; font-size: 14px; font-weight: 700; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.selnote:hover { background: var(--rline); }
.rdpanel { position: absolute; z-index: 76; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 20px));
  background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); border-radius: 24px; box-shadow: var(--rshadow);
  padding: 14px 18px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rdpanel.hidden { display: none; }
.rdpanel.compose { top: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(620px, calc(100% - 20px)); height: min(62%, 560px); padding-bottom: 14px;
  display: flex; flex-direction: column; overflow: hidden; transition: height .3s cubic-bezier(.2,.8,.2,1); }
.rdundo { position: absolute; z-index: 78; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto !important; pointer-events: none; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--rink); color: var(--rchip); font-size: 13.5px; font-weight: 600; box-shadow: var(--rshadow); }
.rdundo.hidden { display: none; }
.rdundo button { pointer-events: auto; border: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--rchip); color: var(--rink) !important; }
.rdpanel.compose.big { width: min(1100px, calc(100% - 20px)); height: calc(100% - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.rdpanel.compose .rdphead { position: static; flex: 0 0 auto; }
.rdgrow { margin-left: auto; border: 1px solid var(--rline); background: none; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--rsoft) !important; }
.rdpassage { flex: 0 0 auto; max-height: 26%; overflow-y: auto; -webkit-overflow-scrolling: touch; border-left-width: 3px !important; }
.rdpage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--rline); border-radius: 16px; overflow: hidden; }
.rdtoolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--rline); flex-wrap: wrap; }
.rdtoolbar button { border: 0; background: none; min-width: 34px; height: 32px; border-radius: 8px; font-size: 15px; cursor: pointer; color: var(--rsoft) !important; }
.rdtoolbar button:hover { background: var(--rline); color: var(--rink) !important; }
.rdcount { margin-left: auto; padding-right: 6px; font-size: 12px; color: var(--rsoft); font-variant-numeric: tabular-nums; }
.rdpanel .rdpage textarea { flex: 1; min-height: 0; border: 0; border-radius: 0; resize: none; font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.6; padding: 14px 16px; }
.rdphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; position: sticky; top: -14px; background: var(--rchip); padding: 4px 0; z-index: 1; }
.rdphead h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 21px; }
.rdpanel .pane-note { color: var(--rsoft) !important; }
.tocitem { display: block; width: 100%; text-align: left; font-size: 15px; background: none; border: 0; border-bottom: 1px solid var(--rline); padding: 12px 4px; cursor: pointer; }
.tocitem.here { font-weight: 700; }
.tocitem:hover { background: var(--rline); }
.rdpanel blockquote { margin: 0 0 12px; padding: 4px 0 4px 12px; border-left: 3px solid var(--rline); font-family: Newsreader, Georgia, serif; font-size: 16px; line-height: 1.5; color: var(--rsoft); }
.rdpanel textarea { width: 100%; min-height: 110px; text-align: left; font: inherit; font-size: 16px; line-height: 1.5; padding: 12px 14px; border-radius: 14px;
  background: transparent; color: inherit; border: 1px solid var(--rline); resize: vertical; }
.rdpanel textarea:focus { outline: none; border-color: var(--rsoft); }
.rdpanel textarea::placeholder { color: var(--rsoft); }
.rdsheetbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rdsheetbar button, .rdnotebar > button { border: 1px solid var(--rline); background: none; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.rdsheetbar .go { background: var(--rink); color: var(--rchip) !important; border-color: var(--rink); }
.rdfilter { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rline); border-radius: 12px; overflow: hidden; margin: 0 0 8px; }
.rdfilter button { border: 0; background: none; padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--rsoft) !important; }
.rdfilter button + button { border-left: 1px solid var(--rline); }
.rdfilter button.on { color: var(--rink) !important; background: var(--rline); }
.rdwhere { margin: 16px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rsoft); }
.rdcard { display: grid; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rline); padding: 12px 0; cursor: pointer; }
.rdcard:hover { background: none; }
.rdq { font-family: Newsreader, Georgia, serif; font-size: 16px; line-height: 1.55; padding: 2px 8px 2px 10px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rdq.plain { padding: 0 0 0 10px; box-shadow: inset 2px 0 0 var(--rline); color: var(--rsoft); font-size: 15px; }
.rdcard .rx { font-size: 14.5px; line-height: 1.5; } .rdcard .rx p { margin: 0 0 .4em; }
.rdfootlink { display: block; margin: 18px auto 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--rsoft) !important; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rdnote { position: absolute; z-index: 77; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(520px, calc(100% - 20px)); max-height: 50%; overflow-y: auto;
  background: var(--rchip); color: var(--rink); border: 1px solid var(--rline); border-radius: 22px; box-shadow: var(--rshadow); padding: 16px 16px 12px; }
.rdnote.hidden { display: none; }
.rdnote p, .rdnotetext { margin: 0 0 12px; font-family: Newsreader, Georgia, serif; font-size: 16.5px; line-height: 1.55; }
.rdnotetext p { margin: 0 0 .5em; }
.rdnotebar { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
.rdnotetop { display: flex; gap: 8px; align-items: flex-start; }
.rdnotebody { flex: 1; min-width: 0; max-height: 34vh; overflow-y: auto; }
.rdexpand { flex: none; margin: -4px -6px 0 0; }
.rdexpand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hlchips, .rdnoteacts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rdnoteacts > button { border: 1px solid var(--rline); background: none; color: inherit; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hlchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rline); background: none; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.hlchip i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hlchip.on { background: var(--rline); }
.rdnotebar .hldots { justify-content: center; flex: none; padding: 2px 0; }
.hltags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hltags button { border: 1px solid var(--rline); background: none; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.hltags button.on { background: var(--rink); color: var(--rbg) !important; border-color: var(--rink); }
.hltags button.add { border-style: dashed; }
.hltags.filter { justify-content: flex-start; margin: 0 0 12px; }
.hltagin { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rink); background: none; color: inherit; width: 130px; }
.rdtag { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; opacity: .7; }
.rdpassage { font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.7; white-space: pre-wrap; padding: 10px 4px 40px; max-width: 680px; margin: 0 auto; }
.rdpanel.wide { left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; }
.bmrow { display: flex; align-items: center; gap: 4px; }
.bmrow .tocitem { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bmrow .tocitem small { font-size: 12px; opacity: .65; }
.bmname { flex: 1; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rline); background: none; color: inherit; }
.rdswrow { display: grid; grid-auto-flow: column; grid-auto-columns: 20%; justify-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.rdswrow::-webkit-scrollbar { display: none; }
.rdswrow .rddot:nth-child(5n+1) { scroll-snap-align: start; }
.rdswrow .rddot::after { display: none; content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--dot); }
.rdswrow .rddot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.reader.rdark .rdswrow .rddot { border-color: rgba(255,255,255,.45); }
.rdmap { display: none; position: absolute; inset: 0; pointer-events: none; color: var(--rsoft); opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 470px), transparent calc(50% - 370px), transparent calc(50% + 370px), #000 calc(50% + 470px));
  mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 470px), transparent calc(50% - 370px), transparent calc(50% + 370px), #000 calc(50% + 470px)); }
.rdmap svg { width: 100%; height: 100%; display: block; }
@media (min-width: 1100px) { .reader:not(.pdfmode):not(.plain) .rdmap { display: block; } }
.reader.rdark .rdmap { opacity: .26; }
.rdswline { display: flex; align-items: center; gap: 4px; }
.rdswline .rdswrow { flex: 1; min-width: 0; }
.rdswrow.atend { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.rdswmore { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rline); background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.rdswline + .rdswline { margin-top: 6px; }
.hldots { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 0 100%; padding: 2px 2px 8px; }
@media (max-width: 560px) { .rdpanel:not(.compose) { top: calc(36px + env(safe-area-inset-top, 0px)); } }
.einkwrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 36px; align-items: center; }
@media (max-width: 860px) { .einkwrap { grid-template-columns: 1fr; } }
.einkdevice { background: linear-gradient(160deg, #3a3936, #262523); border-radius: 30px; padding: 20px 20px 50px; box-shadow: 0 30px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); position: relative; }
.einkdevice::after { content: ''; position: absolute; left: 50%; bottom: 18px; width: 54px; height: 6px; margin-left: -27px; border-radius: 99px; background: rgba(255,255,255,.14); }
.einkscreen { background: #ecebe6; border-radius: 6px; aspect-ratio: 3 / 4; padding: 20px 22px 14px; color: #141414; font-family: Georgia, 'Newsreader', serif;
  filter: grayscale(1) contrast(1.08); display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 3px 3px; }
.ek-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #141414; padding-bottom: 8px; }
.ek-logo { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ek-time { font-family: sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ek-now { display: flex; gap: 14px; align-items: center; }
.ek-cover .cover { box-shadow: none !important; border: 1.5px solid #141414; }
.ek-nowtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ek-nowtxt small, .ek-head small { font-family: sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ek-nowtxt b { font-size: 19px; line-height: 1.15; } .ek-nowtxt span { font-size: 13px; }
.ek-nowtxt em { font-family: sans-serif; font-style: normal; font-size: 11px; margin-top: 4px; }
.ek-bar { height: 7px; border: 1.5px solid #141414; border-radius: 99px; overflow: hidden; margin-top: 6px; } .ek-bar i { display: block; height: 100%; background: #141414; }
.ek-bar.thin { height: 5px; margin: 0; border-width: 1px; flex: 1; }
.ek-sec { border: 1.5px solid #141414; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.ek-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ek-head span { font-size: 13px; font-style: italic; }
.ek-mem { display: flex; align-items: center; gap: 8px; } .ek-mem em { font-family: sans-serif; font-style: normal; font-size: 10.5px; width: 28px; text-align: right; }
.ek-ini { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #141414; font-family: sans-serif; font-size: 9.5px; display: inline-flex; align-items: center; justify-content: center; }
.ek-meet { font-size: 13px; border-top: 1px solid #141414; padding-top: 7px; } .ek-meet b { font-family: sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ek-msg { font-size: 12.5px; font-style: italic; } .ek-msg b { font-style: normal; }
.ek-nav { margin-top: auto; display: flex; justify-content: space-around; border-top: 1.5px solid #141414; padding-top: 8px; font-family: sans-serif; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.einkscreen h4 { margin: 0; font-family: sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #444; }
.einkrow { display: flex; gap: 14px; align-items: center; }
.einkbar { height: 6px; border: 1px solid #111; border-radius: 99px; overflow: hidden; } .einkbar i { display: block; height: 100%; background: #111; }
.einkbox { border: 1.5px solid #111; border-radius: 10px; padding: 10px 12px; }
.einkbox b { font-size: 16px; } .einkbox p { margin: 3px 0 0; font-size: 13px; }
.einkcopy h2 { font-family: Newsreader, Georgia, serif; font-size: 30px; margin: 0 0 10px; }
.einkcopy p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.rating { display: inline-flex; gap: 2px; margin-left: 10px; }
.rating button { font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: #d8d2c6; padding: 0 1px; }
.rating button.on { color: var(--c-gold); }
.starter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.startcard { border-radius: 20px; padding: 18px; background: var(--field); box-shadow: 0 4px 16px rgba(40,44,52,.05); display: flex; flex-direction: column; gap: 6px; }
.startcard h3 { margin: 0; font-size: 17px; color: var(--ink); } .startcard .lvl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.startcard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); } .startcard button { margin-top: auto; }
.attachlbl { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--c-blue); cursor: pointer; }
.readpill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--action); color: #fff; cursor: pointer; margin-left: auto; }
.einkdevice { position: relative; background: #f7f5f0; border-radius: 30px; padding: 20px 20px 54px; box-shadow: 0 30px 70px rgba(40,44,52,.2), inset 0 0 0 1px rgba(0,0,0,.06); }
.einkdevice::after { display: none; }
.bezel-logo { position: absolute; left: 0; right: 0; bottom: 17px; text-align: center; font-family: Newsreader, Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: .02em; color: rgba(0,0,0,.45); }
.einkdevice.darkbody .bezel-logo { color: rgba(255,255,255,.7); }
.einkscreen { background: #fdfcfa !important; filter: none !important; color: #6b6f74 !important; font-family: Georgia, 'Newsreader', serif !important;
  padding: 22px 24px 14px !important; background-image: none !important; position: relative; display: flex; flex-direction: column; }
.ek-page { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-height: 0; }
.ek-home h3 { font-size: 20px !important; margin: 2px 0 0 !important; }
.ek-home .ek-people { gap: 4px !important; }
.ek-home .ek-meetcard { margin-top: 4px !important; padding: 7px 12px !important; }
.ek-home .ek-btn { margin-top: 4px !important; }
.ek-date { margin: 0; font-family: sans-serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9a9ea3; }
.ek-kick { margin: 0; font-family: sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ek); }
.ek-page h3 { margin: 4px 0 0; font-size: 22px; font-weight: 500; color: #55595e; }
.ek-by { margin: 0; font-size: 13px; font-style: italic; color: #8a8e93; }
.ek-next { margin: 2px 0 4px; font-family: sans-serif; font-size: 11.5px; color: #8a8e93; } .ek-next b { color: var(--ek); font-weight: 600; }
.ek-covslot .cover { box-shadow: 0 6px 14px rgba(0,0,0,.08) !important; }
.ek-people { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ek-person { display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-family: sans-serif; font-size: 11px; color: #7a7e83; text-align: left; }
.ek-person em { font-style: normal; font-size: 10px; text-align: right; color: #9a9ea3; }
.ek-track { height: 5px; border-radius: 99px; background: #eeeae6; overflow: hidden; } .ek-track i { display: block; height: 100%; border-radius: 99px; }
.ek-meetcard { width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 14px; background: var(--eks); }
.ek-meetcard small { display: block; font-family: sans-serif; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ek); }
.ek-meetcard b { display: block; font-weight: 500; font-size: 14px; color: #5d6166; margin-top: 2px; }
.ek-btn { margin-top: 8px; font: inherit; font-family: sans-serif; font-size: 12px; font-weight: 700; color: #fff; background: var(--ek); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.ek-link { font: inherit; font-family: sans-serif; font-size: 11.5px; color: #8a8e93; background: none; border: 0; cursor: pointer; }
.ek-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; } .ek-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e2ddd8; } .ek-dots i.on { background: var(--ek); }
.ek-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; margin-top: 10px; }
.ek-days button, .ek-times button { font: inherit; font-family: sans-serif; border: 0; background: #f6f3ef; color: #7a7e83; border-radius: 12px; padding: 7px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.ek-days small { font-size: 9px; } .ek-days b { font-size: 14px; font-weight: 600; }
.ek-days button.on, .ek-times button.on { background: var(--ek); color: #fff; }
.ek-times { display: flex; gap: 6px; margin: 10px 0 4px; } .ek-times button { padding: 7px 12px; font-size: 12px; }
.ek-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; width: 100%; margin-top: 8px; }
.ek-libcell { display: flex; flex-direction: column; align-items: center; gap: 4px; } .ek-libcell span { font-family: sans-serif; font-size: 9.5px; color: #8a8e93; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-chat { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; text-align: left; }
.ek-bub { background: #f7f4f0; border-radius: 4px 14px 14px 14px; padding: 8px 11px; } .ek-bub b { display: block; font-family: sans-serif; font-size: 10.5px; } .ek-bub span { font-size: 13px; color: #6b6f74; }
.ek-reply { margin-top: auto; font-family: sans-serif; font-size: 10.5px; color: #a0a4a8; }
.ek-settings { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ek-set { display: flex; justify-content: space-between; align-items: center; padding: 11px 4px; border-bottom: 1px solid #f0ece8; font-family: sans-serif; font-size: 12.5px; color: #6b6f74; }
.ek-tog { width: 34px; height: 19px; border-radius: 99px; background: #e8e3de; position: relative; } .ek-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.ek-tog.on { background: var(--ek); } .ek-tog.on::after { left: 17px; }
.ek-slider { width: 90px; height: 5px; border-radius: 99px; background: #eeeae6; overflow: hidden; } .ek-slider i { display: block; height: 100%; background: var(--ek); }
.bezel { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.bezel .bezel-logo { position: static; }
.bz { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.einkdevice:not(.darkbody) .bz { background: rgba(0,0,0,.06); color: rgba(0,0,0,.45); } .einkdevice.darkbody .bz { color: rgba(255,255,255,.85); }
.einkscreen.mono { filter: grayscale(1) contrast(1.06) !important; }
.einkscreen.kaleido { filter: saturate(.72) !important; }
.ek-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1.5px solid #141414; padding-bottom: 8px; }
.ek-time { font-family: sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ek-mini { font-size: 12px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ek-club small, .ek-meet small { display: block; font-family: sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ek-club b { display: block; font-size: 21px; line-height: 1.15; margin-top: 2px; } .ek-club span { font-size: 13px; font-style: italic; }
.ek-flow { display: flex; flex-direction: column; gap: 5px; }
.einkscreen { gap: 11px !important; }
.ek-mem { display: grid; grid-template-columns: 56px minmax(0, 1fr) 46px; gap: 8px; align-items: center; }
.ek-name { font-family: sans-serif; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-mem em { font-family: sans-serif; font-style: normal; font-size: 10.5px; text-align: right; white-space: nowrap; }
.ek-bar { height: 7px; border: 1.2px solid #141414; border-radius: 99px; overflow: hidden; margin: 0 !important; } .ek-bar i { display: block; height: 100%; background: var(--ink, #141414); }
.ek-bar.big { height: 10px; }
.ek-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; border-top: 1.5px solid #141414; border-bottom: 1.5px solid #141414; padding: 8px 0; }
.ek-day { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0; border-radius: 8px; }
.ek-day small { font-family: sans-serif; font-size: 9.5px; } .ek-day b { font-size: 15px; }
.ek-day span { height: 12px; display: flex; gap: 2px; align-items: center; }
.ek-day .dot { width: 5px; height: 5px; border-radius: 50%; background: #3f6f7a; display: inline-block; } .ek-day .star { font-style: normal; font-size: 11px; color: #c8765a; }
.ek-day.today { background: #141414; color: #efeee9; } .ek-day.today .dot { background: #efeee9; }
.ek-day.meet:not(.today) { outline: 1.5px solid #c8765a; }
.ek-meet { border-top: 0 !important; padding-top: 0 !important; }
.ek-meet b { display: block; font-size: 15px; margin-top: 2px; font-family: Georgia, serif !important; text-transform: none !important; letter-spacing: 0 !important; } .ek-meet span { font-size: 12.5px; }
.ek-msg { font-size: 12.5px; font-style: italic; } .ek-msg b { font-style: normal; }
.ekpick-label { margin: 18px 0 8px !important; font-size: 13px !important; font-weight: 700; color: var(--ink) !important; }
.ekpick { display: flex; gap: 10px; }
.ekpick button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--field); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.ekpick button.on { box-shadow: 0 0 0 2px var(--action); }
.contread { max-width: 250px; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 700; padding: 11px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--c-blue); color: #fff; box-shadow: 0 10px 26px rgba(63,111,122,.3); max-width: min(360px, calc(100vw - 32px)); }
.contread span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.contread.hidden { display: none; }
body.immersed .floatbar, body.insheet .floatbar, body.insheet .tutorbar { display: none; }
.daybox { padding-bottom: 60px; }
.brow .rowread { grid-area: title; justify-self: end; align-self: center; position: relative; z-index: 1; margin-right: 6px !important; background: var(--c-blue) !important; color: #fff !important; border: 0 !important; height: 28px; padding: 0 12px !important; font-size: 12px !important; opacity: 1 !important; }
.rowread { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 0; background: var(--c-blue); color: #fff; cursor: pointer; margin-right: 6px; }
.shelftabs { display: flex !important; width: max-content; max-width: 100%; margin: 0 auto 18px; }
.inlists { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; order: 9; }
.inlist { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.inlist:hover { color: var(--action); }
.inlists::before { content: 'On these lists'; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); align-self: center; margin-right: 4px; }
.libbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.libbar input[type="search"] { flex: 1 1 220px; min-width: 0; text-align: left; border-radius: 999px !important; padding: 11px 16px; font-size: 15px; }
.libfilter { flex: 0 0 auto; }
.libconcept { font-size: 13.5px !important; }
.libhero { margin: 0 0 18px; }
.libhero.hidden { display: none; }
.herocard { display: inline-flex; gap: 22px; align-items: center; width: auto; max-width: min(100%, 520px); text-align: left; font: inherit; cursor: pointer;
  background: #ffffff; border: 1px solid var(--line); border-radius: 24px; padding: 16px 26px 16px 16px; }
.herocard > div:last-child { min-width: 170px; }
.herocard .cover { box-shadow: 0 8px 22px rgba(40,30,20,.18); }
.herocard small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--action); }
.herocard b { display: block; font-family: Newsreader, Georgia, serif; font-size: 24px; font-weight: 500; color: var(--ink); margin: 2px 0; }
.herocard span { display: block; font-size: 13.5px; color: var(--ink-soft); }
.herocard .mbar { height: 7px; border-radius: 99px; background: rgba(0,0,0,.07); overflow: hidden; margin: 10px 0 4px; max-width: 240px; } .herocard .mbar i { display: block; height: 100%; }
.herocard em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.ebookgrid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)) !important; gap: 22px 16px !important; }
@media (max-width: 600px) { .ebookgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 8px !important; } }
.ebook { gap: 6px !important; }
.ebook b { font-size: 13px !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ebook span { font-size: 11.5px !important; }
#libNote { margin-top: 16px; }
body.reading header .stack, body.reading header h1, body.reading .tagrow { display: none; }
body.reading header { margin-bottom: 12px; }
.streakline { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.streakline b { color: var(--action); }
.streakline.hidden { display: none; }
.notefilter2 { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
#hlList { max-height: 640px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; align-items: start; }
.card.popped #hlList { max-height: none; }
#hlList > .pane-note { grid-column: 1 / -1; }
.hlrow { margin: 0; padding: 16px 16px 10px; border-radius: 20px; background: var(--field); border: 1px solid var(--line); }
.hltop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hltop .cover { flex: 0 0 auto; }
.hlwho { min-width: 0; }
.hlwho b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlwho small { display: block; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlrow p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 18px; color: var(--ink); line-height: 1.55; }
.hlrow p.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.hlrow mark { color: inherit; background: linear-gradient(transparent 12%, color-mix(in srgb, var(--hc) 55%, transparent) 12%, color-mix(in srgb, var(--hc) 55%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.hlacts { display: flex; gap: 4px; justify-content: flex-end; margin-top: 8px; }
.hlib { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--ink-faint); display: grid; place-items: center; cursor: pointer; }
.hlib:hover { background: var(--tint); color: var(--action); }
.hlib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#hlBook { width: auto; min-width: 180px; }
.importcard { margin: 0 0 18px !important; background: var(--surface) !important; }
.howto { margin: 6px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.howto b { color: var(--ink); }
.floatbar { position: fixed; z-index: 62; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; pointer-events: none; }
.floatbar .contread { margin-right: auto; }
.floatbar .tutorwrap { margin-left: auto; }
.floatrow { flex: 1 1 100%; order: -1; display: flex; justify-content: center; pointer-events: none; }
.floatrow > * { pointer-events: auto; }
.floatbar #tutorbar { position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; max-width: min(650px, 100%) !important; }
.contread { white-space: nowrap; }
.contread span { white-space: nowrap; }
.floatbar { row-gap: 10px; }
.floatbar > * { pointer-events: auto; }
.tutorwrap { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; box-shadow: 0 10px 26px rgba(200,102,75,.35); }
.tutorwrap .tutorfloat { position: static !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; }
.tutorx { order: 2; width: 42px; border: 0; border-left: 1px solid rgba(255,255,255,.28); background: var(--action); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.tutorx:hover { background: #b85c43; }
body.tutor .tutorwrap { display: none; }
#nav-settings { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding-left: 12px !important; padding-right: 12px !important; }
#nav-settings .navlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1100px) and (min-width: 561px) { #nav-settings .navlabel { position: static; width: auto; height: auto; clip: auto; font-style: normal; margin-left: 6px; font-size: 12.5px; } }
@media (max-width: 560px) { #nav-settings { padding-left: 6px !important; padding-right: 6px !important; } }
.goalrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.goalrow label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-soft); }
.goalrow select, .goalrow input { font-size: 14px; text-align: left; width: auto; }
.goalbar { flex: 1 1 200px; min-width: 180px; }
.goalbar.hidden { display: none; }
.goalbar i { display: block; height: 8px; border-radius: 99px; background: var(--action); max-width: 100%; }
.goalbar { position: relative; padding-top: 14px; }
.goalbar::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 8px; border-radius: 99px; background: var(--tint); }
.goalbar i { position: relative; z-index: 1; }
.goalbar span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.sidebyside { margin: 6px 0 18px; }
.sidebyside.hidden { display: none; }
.pairtrack { position: relative; height: 10px; border-radius: 99px; background: var(--tint); margin: 34px 12px 40px; }
.pairmark { position: absolute; top: -12px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.pairmark span { position: absolute; top: -26px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.pairmark.b span { top: auto; bottom: -26px; }
.pairnote { margin: 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
.clubnotes .entry { position: relative; padding-right: 26px; }
.delnote { position: absolute; top: 2px; right: 0; border: 0; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer; }
.delnote:hover { color: var(--c-red); }
.clubnotes .card h2::after { content: ''; display: block; height: 3px; border-radius: 3px; margin-top: 6px; background: currentColor; opacity: .35; }
.bub.invite { border: 1px solid var(--action-soft) !important; background: var(--action-soft) !important; }
.rsvp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rsvp button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; }
.rsvp button.on { background: var(--action); border-color: var(--action); color: #fff; }
.tally { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.wrap { padding-bottom: 150px !important; }
@media (max-width: 560px) { .wrap { padding-bottom: 210px !important; } }
body.ui-hide-tutor .wrap { padding-bottom: 110px !important; }
.card.popped, .rdpanel, .daybox, .writer.full, .nbwrap.full { padding-bottom: 28px; }
@media (max-width: 700px) {
  .daybox .schedform { margin-top: 4px; }
  .daybox .schedwhat { margin-bottom: 8px; }
  .daybox .schedgrid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .daybox .schedgrid label:first-child { grid-column: span 2; }
  .daybox select, .daybox input { padding: 10px 12px; font-size: 15px; }
  .daybox h3 { font-size: 22px; }
  .daybox .repeat { margin: 10px 0; }
  .daybox .savebtn { width: 100%; }
  #daySessions .dsess { padding: 9px 11px; }
}
.viewmenu { position: fixed; right: 14px; bottom: 84px; z-index: 70; background: var(--field); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 190px; }
.viewmenu.hidden { display: none; }
.viewmenu button { font: inherit; font-size: 14.5px; text-align: left; padding: 10px 12px; border: 0; background: none; color: var(--ink); border-radius: 10px; cursor: pointer; }
.viewmenu button:hover { background: var(--tint); }
.tonerow { display: flex; gap: 4px; padding: 0 8px 6px; }
.tonerow button { flex: 1; text-align: center !important; font-size: 12.5px !important; padding: 7px 4px !important; border-radius: 999px !important; background: var(--tint) !important; }
.tonerow button[aria-selected="true"] { background: var(--action) !important; color: #fff !important; }
.tutorwrap { position: relative; }
body.phoneview { background: #2a2622; }
body.phoneview .wrap { width: 402px !important; max-width: 402px !important; margin: 26px auto !important; background: var(--bg);
  border-radius: 36px; padding-left: 16px !important; padding-right: 16px !important; box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden; }
body.phoneview header { padding-top: 26px !important; }
body.phoneview .nav { max-width: 100% !important; width: 100% !important; }
body.phoneview .nav button { font-size: 12.5px !important; padding: 8px 6px !important; }
body.phoneview .topbtns { position: static !important; justify-content: flex-end; padding: 10px 14px 0; }
body.phoneview .floatbar { left: 50%; transform: translateX(-50%); width: 378px; }
body.phoneview .topbtns { right: calc(50% - 185px); }
:root:not([data-theme="dark"]) { --bg: #f8f4f2; --surface: #ffffff; --surface-2: #f4efec; --line: #ece5e1; --field: #ffffff;
  --tint: #f6f1ee; --tint-2: #eae1dc; }
:root:not([data-theme="dark"]) .card { background: #ffffff; border: 1px solid #f0e5db; box-shadow: 0 2px 12px rgba(120,90,70,.05); }
:root:not([data-theme="dark"]) .nav { background: #ffffff !important; border-color: #f0e5db !important; }
:root:not([data-theme="dark"]) .tagrow { background: #ffffff; border-color: #f0e5db; }
body { font-size: 17px; }
.card { border-radius: 24px; }
h2 { font-size: 23px; }
.pane-note { font-size: 14.5px; }
input, select, textarea, button { font-size: 15.5px; }
.buybtn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--c-green); color: #fff !important;
  text-decoration: none; font-size: 14px; font-weight: 700; }
.buybtn.ghost { background: transparent; color: var(--c-green) !important; border: 1px solid var(--c-green); }
.joincard { background: #ffffff !important; border: 1px solid #f0e8e3 !important; }
.joincard h2 { font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 500; color: var(--ink) !important; margin: 4px 0 8px; }
.clubkick { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--action); }
.joinform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; align-items: end; }
.joinform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.joinform label.wide { grid-column: span 2; }
.joinform input, .joinform textarea, .joinform select { width: 100%; text-align: left; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.joinform textarea { min-height: 90px; resize: vertical; }
.joinform input:focus, .joinform textarea:focus, .joinform select:focus { outline: 2px solid var(--action-soft); border-color: var(--action); }
.joinform .savebtn { grid-column: span 2; width: auto; justify-self: start; padding: 12px 26px; }
.joinnote { margin-top: 12px !important; }
@media (max-width: 640px) { .joinform { grid-template-columns: 1fr; } .joinform label.wide, .joinform .savebtn { grid-column: auto; } }
:root[data-inframe] .tutorwrap { display: none; }
body.ui-hide-read .contread { display: none !important; }
.joinstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px !important; }
.joinleft { display: flex; flex-direction: column; }
.joinleft b { font-size: 16px; color: var(--ink); }
.joinleft span { font-size: 14px; color: var(--ink-soft); }
.joinrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 320px; }
.joinrow input { flex: 1 1 150px; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; text-align: left; }
.joinrow .primary { width: auto; margin: 0; padding: 10px 20px; white-space: nowrap; }
.joinrow.hidden { display: none; }
#ideaOpen { font-size: 13.5px; }
.nowrow { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)) !important; gap: 14px !important; align-items: stretch; }
.nowchip { display: grid !important; grid-template-columns: 22px 72px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 16px; align-items: center; padding: 16px 18px !important; min-height: 120px; }
.nowchip .cover { --cw: 72px !important; grid-row: 1 / span 2; box-shadow: 0 10px 22px rgba(30,40,50,.22), inset 3px 0 0 rgba(0,0,0,.12); }
.nowchip .nownum { grid-row: 1 / span 2; }
.nowchip .nowbody { grid-column: 3; grid-row: 1 / span 2; }
.nowchip .readpill { grid-column: 4; grid-row: 1; align-self: end; }
.nowchip .nowarrows { grid-column: 4; grid-row: 2; justify-self: end; align-self: start; display: inline-flex; gap: 6px; margin: 0; }
.nowchip .nowarrows button { flex: 0 0 30px; width: 30px !important; min-width: 30px; height: 30px; padding: 0 !important; display: grid; place-items: center; font-size: 17px; line-height: 1; border-radius: 50%; }
.nowchip .nowbody { min-width: 0; }
.nowchip .nowbody b { display: block; font-size: 16.5px; line-height: 1.25; }
.nowchip .nowbody span { display: block; font-size: 13.5px; color: var(--ink-soft); }
.nowchip .nowbody b, .nowchip .nowbody span { overflow-wrap: break-word; }
@media (max-width: 560px) {
  .nowchip { grid-template-columns: 22px 64px minmax(0, 1fr); gap: 10px 12px; padding: 14px !important; }
  .nowchip .cover { --cw: 64px !important; }
  .nowchip .nowbody { grid-column: 3; grid-row: 1; align-self: end; }
  .nowchip .readpill { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; margin: 0; }
  .nowchip .nowarrows { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
}
.nowchip .nowbody em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: var(--c-blue); margin-top: 4px; }
.goalrow { gap: 16px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.goalrow label { font-size: 13.5px; }
.goalrow select, .goalrow input { padding: 10px 14px; border-radius: 14px; }
.goalbar { flex: 1 1 260px; }
.lcard { transition: transform .18s ease, opacity .18s ease; }
.lcard.dragging { opacity: .35; transform: scale(.97); }
.lcard.shiftr { transform: translateX(14px); }
.lcard.shiftl { transform: translateX(-14px); }
.lcard.dropinto { outline: 2px dashed var(--action); outline-offset: 3px; }
.nbentries { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.nbentry { position: relative; padding: 12px 16px 12px 18px; border-radius: 16px; background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--who, var(--c-blue)); }
.nbhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.nbhead b { font-size: 13.5px; } .nbhead small { font-size: 12px; color: var(--ink-faint); }
.nbhead .delnote { position: static; margin-left: auto; }
.nbtext { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 16.5px; line-height: 28px; color: var(--ink); white-space: pre-wrap; }
.paper-lined .nbtext, .paper-lined #clubNotebook, .paper-lined .writer-body {
  background-image: repeating-linear-gradient(180deg, transparent 0 29px, #dfe7ea 29px 30px) !important;
  background-position: 0 -4px !important; }
.paper-dot .nbtext, .paper-dot #clubNotebook, .paper-dot .writer-body,
.paper-lined .nbtext, .paper-lined #clubNotebook, .paper-lined .writer-body {
  font-size: 18px !important; line-height: 30px !important; padding-top: 2px !important; background-attachment: local !important; }
.paper-dot .nbtext, .paper-dot #clubNotebook, .paper-dot .writer-body {
  background-image: radial-gradient(#d3dbde 1.6px, transparent 1.6px) !important; background-size: 30px 30px !important;
  background-position: 9px 13px !important; }
.paper-blank .nbtext, .paper-blank #clubNotebook, .paper-blank .writer-body { background-image: none !important; }
#clubNotebook { min-height: 40vh !important; }
.lcard.picktint { background: #ffffff !important; border: 1px solid var(--line) !important; }
.lcard.picktint .spine { width: 5px !important; opacity: 1 !important; }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr)) !important; gap: 22px !important; }
#listgrid .lcard { padding: 22px 24px !important; }
#listgrid .lcard h3 { font-size: 22px !important; }
#listgrid .minishelf { height: 96px !important; }
@media (max-width: 560px) { #listgrid { grid-template-columns: 1fr !important; } }
.fundbtn { width: auto !important; margin: 0 !important; padding: 11px 22px !important; font-size: 15px !important; }
/* colour lives in spines, covers and words, not in washes */
.lcard.picktint .spine { width: 6px !important; border-radius: 6px; }
.lcard.picktint h3 { color: var(--ink) !important; }
.lcard.picktint .meta .lname { font-weight: 700; }
.nav button[aria-current="true"] { background: #e8f0f1 !important; color: var(--c-blue) !important; }
#nav-club[aria-current="true"] { background: var(--action) !important; color: #fff !important; }
#nav-club { background: linear-gradient(180deg, #fbe9df, #f3d6c6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(160,80,50,.18), 0 3px 8px rgba(160,80,50,.14) !important; }
#nav-club svg { color: #c4901f; }
#nav-club[aria-current="true"] { background: linear-gradient(180deg, #d4876a, var(--action)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 10px rgba(160,80,50,.28) !important; }
#nav-club[aria-current="true"] svg { color: #ffe3a3; }
.unit button[aria-selected="true"], .tabs button[aria-selected="true"] { color: var(--c-blue) !important; }
.listfoot button.primary, .savebtn, .addbtn, .primary { box-shadow: 0 6px 18px rgba(200,102,75,.18); }
.secondary:not(.primary):not(.savebtn):not(.addbtn), .tools button:not(.primary):not(.savebtn):not(.addbtn):not(.aibtn) { color: var(--c-blue) !important; }
.primary, .savebtn, .addbtn, button.primary, .fundbtn, .uplabel { color: #fff !important; }
.weekbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 130px; margin-top: 16px; }
.wbar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 6px; }
.wbar i { display: block; width: 100%; max-width: 46px; min-height: 4px; border-radius: 10px 10px 4px 4px; background: var(--c-blue); }
.wbar small { font-size: 11.5px; color: var(--ink-faint); }
button.wbar { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 12px; }
button.wbar:hover i { filter: brightness(1.1); }
button.wbar.on i { background: var(--action); }
button.wbar.on small { color: var(--ink); font-weight: 700; }
.progday { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.progday.hidden { display: none; }
.pdhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pdhead b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 19px; color: var(--ink); }
.pdhead span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pdrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pdrow:last-of-type { border-bottom: 0; }
.pdmid { flex: 1; min-width: 0; display: grid; gap: 5px; }
.pdmid b { font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdmid small { font-size: 12.5px; color: var(--ink-soft); }
.pdbar { height: 5px; border-radius: 99px; background: var(--tint-2); overflow: hidden; } .pdbar i { display: block; height: 100%; background: var(--c-blue); border-radius: 99px; }
.pdpages { text-align: right; min-width: 64px; } .pdpages b { display: block; font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.pdpages span { font-size: 11px; color: var(--ink-faint); }
.pdtotal { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.nbtitle { margin: 2px 0 6px; font-family: Newsreader, Georgia, serif; font-size: 19px; font-weight: 500; color: var(--ink); }
.toolbar select { font: inherit; font-size: 13px; padding: 5px 24px 5px 8px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-soft); width: auto; margin: 0; }
.toolbar select:hover { color: var(--action); }
.goalform { margin: 4px 0 14px; }
.goalform.hidden { display: none; }
.goallist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.goalitem { display: flex; flex-direction: column; min-height: 178px; padding: 20px; border-radius: 22px; background: var(--field); border: 1px solid var(--line); }
.goalitem.won { border-color: #cfe0d1; background: #f4f8f4; }
.goalhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.goalhead b { font-size: 17px; color: var(--ink); line-height: 1.25; } .goalhead .delnote { position: static; margin-left: auto; }
.goalbody { display: flex; align-items: center; gap: 16px; }
.goalring { position: relative; flex: 0 0 72px; width: 72px; height: 72px; display: grid; place-items: center; }
.goalring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.goalring circle { fill: none; stroke-width: 7; } .goalring .rt { stroke: var(--tint); } .goalring .rf { stroke: var(--action); stroke-linecap: round; }
.goalring.won .rf { stroke: var(--c-green); }
.goalring span { position: relative; font-size: 15px; font-weight: 700; color: var(--ink); }
.goalring .rk { position: relative; inset: auto; width: 30px; height: 30px; transform: none; fill: none; stroke: var(--c-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.goalwin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.goalwin b { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.goalcovers { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.goalitem .mbar { height: 9px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.goalitem .mbar i { display: block; height: 100%; border-radius: 99px; }
.goalnote { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.goalitem .ticks { margin-top: auto; padding-top: 12px; }
.goalreward, .goalclub { margin-top: auto; padding-top: 10px; }
.goalreward { font-size: 13.5px; color: var(--ink-soft); } .goalreward.got { color: var(--c-green); font-weight: 600; }
.goalclub { font-size: 13px; color: var(--ink-soft); }
.ticks { display: flex; gap: 6px; margin-top: 12px; }
.tickday { width: 32px !important; height: 32px !important; min-width: 32px; flex: 0 0 32px; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--line); background: var(--field); color: var(--ink-faint);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tickday.on { background: var(--c-green); border-color: var(--c-green); color: #fff; }
/* dark tones you can pick: warm (the default), slate, and ink */
:root[data-dark="slate"] .darkscope, :root[data-dark="slate"] { --dark-bg: #14171a; --dark-surface: #1b1f24; --dark-surface2: #232830; --dark-line: #2c323b; }
:root[data-dark="ink"] { --dark-bg: #101216; --dark-surface: #171a20; --dark-surface2: #1e222a; --dark-line: #272c35; }
:root[data-dark="warm"] { --dark-bg: #191713; --dark-surface: #221f19; --dark-surface2: #2b2720; --dark-line: #383228; }
@media (prefers-color-scheme: dark) {
  :root[data-dark]:not([data-theme="light"]) { --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface2);
    --line: var(--dark-line); --field: var(--dark-surface); --tint: var(--dark-surface2); --tint-2: var(--dark-line); }
}
:root[data-theme="dark"][data-dark] { --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface2);
  --line: var(--dark-line); --field: var(--dark-surface); --tint: var(--dark-surface2); --tint-2: var(--dark-line); }
.helpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.helpgrid button { text-align: left; font: inherit; background: var(--field); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; cursor: pointer; }
.helpgrid button:hover { border-color: var(--action); }
.helpgrid b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.helpgrid span { font-size: 13.5px; color: var(--ink-soft); }
.clubgoal { padding: 14px 16px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); margin-bottom: 12px; }
.clubgoal .ovhead h3 { font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; }
.wonlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.wonlist { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.wonitem { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; background: #f3f8f3; border: 1px solid #dbe8dc; }
.wonitem .cover { flex: 0 0 auto; }
.wonmedal { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: var(--c-green); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(60,110,70,.25); }
.wonmedal svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wonitem b { display: block; font-family: Newsreader, Georgia, serif; font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.wonitem span { display: block; font-size: 14px; color: var(--c-green); margin-top: 3px; }
.wonitem small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.corkwrap { display: grid; grid-template-columns: minmax(260px, 320px) minmax(460px, 1.6fr); gap: 26px; align-items: start; }
@media (max-width: 860px) { .corkwrap { grid-template-columns: 1fr; } }
.boardhead { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 18px; }
.boardmark { font-family: Newsreader, Georgia, serif; font-size: 26px; color: #fdf6ec; text-shadow: 0 2px 6px rgba(60,35,10,.4); }
.boardmark b { font-weight: 500; color: #ffd9a8; }
.boardsub { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,246,232,.82); }
.boardcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 20px 14px; justify-items: center; align-items: start; }
.pinned { position: relative; }
.pinned::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%;
  background: #c8765a; box-shadow: 0 2px 5px rgba(0,0,0,.4); z-index: 2; }
.pinned:nth-child(2n) .poster { transform: rotate(.8deg); }
.pinned:nth-child(3n) .poster { transform: rotate(-1.1deg); }
.boardfoot { margin-top: 20px; text-align: center; font-size: 12.5px; color: rgba(255,246,232,.85); }
.boardrow { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--line); }
.boardrow b { display: block; font-size: 15px; color: var(--ink); } .boardrow span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.corkboard { position: relative; padding: 24px 20px; border-radius: 22px;
  background: #c99a63; background-image: radial-gradient(rgba(120,80,40,.24) 1.2px, transparent 1.2px), radial-gradient(rgba(255,235,205,.28) 1px, transparent 1px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; box-shadow: inset 0 0 0 10px #a97b47, 0 14px 34px rgba(90,60,30,.25); }

.poster { position: relative; margin: 0 auto; background: var(--paper); color: var(--pink); border: 1px solid var(--pedge);
  border-radius: 6px; padding: 26px 24px 0; box-shadow: 0 10px 24px rgba(60,40,20,.28); transform: rotate(-.6deg); }
.poster.sz-card { width: 176px; padding: 12px 12px 13px; } .poster.sz-a7 { width: 208px; padding: 13px 13px 14px; }
.poster.sz-card h3 { font-size: 15.5px; margin: 3px 0 5px; line-height: 1.12; } .poster.sz-a7 h3 { font-size: 17px; margin: 3px 0 6px; line-height: 1.12; }

.poster .prow span { min-width: 32px; font-size: 8px; }
.pshelf { height: 18px !important; margin: 6px 0 7px !important; }
.poster .pbook { font-size: 10.5px; margin-bottom: 6px; }
.poster .pkick { font-size: 8px; }
.poster .pjoin { font-size: 9.5px; margin: 0; }
.poster.mine { outline: 3px solid var(--action); outline-offset: 5px; }
.poster .pkick { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pacc); }
.poster h3 { margin: 6px 0 10px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 27px; line-height: 1.15; color: var(--pink); }
.poster .pbook { margin: 0 0 14px; font-size: 14px; color: var(--pink); opacity: .85; }
.poster .pwhen { margin: 0 0 5px; padding-top: 7px; border-top: 1px solid var(--pedge); font-size: 11px; font-weight: 600; }
.poster .pwho { margin: 0 0 8px; font-size: 10.5px; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster .prow { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--pedge); font-size: 13px; }
.poster .prow span { min-width: 46px; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; opacity: .6; padding-top: 2px; }
.poster .prow b { font-weight: 600; }
.pshelf { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 14px 0 10px; border-bottom: 2px solid var(--pedge); }
.pshelf i { flex: 1; border-radius: 2px 2px 0 0; display: block; }
.pjoin { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--pacc); }
  border-left: 1px dashed var(--pedge); color: var(--pink); opacity: .75; }
@media print {
  body * { visibility: hidden !important; }
  .poster.mine, .poster.mine * { visibility: visible !important; }
  .poster.mine { position: absolute; left: 0; top: 0; transform: none !important; box-shadow: none !important; outline: 1px solid #ccc !important; }
}
.planrow { align-items: end; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
.daypick { flex-wrap: wrap; }
.daypick { display: flex; gap: 6px; }
.dayb { width: 36px !important; height: 36px !important; min-width: 36px; flex: 0 0 36px; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-faint); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dayb.on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.planout { margin: 14px 0 0; font-size: 15px; color: var(--ink); font-weight: 600; }
.findrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 14px; }
.findrow label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.findrow select { min-width: 220px; }
.boardrow { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--field); cursor: pointer; font: inherit; }
.boardrow.on { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.boardplate { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 18px; padding: 8px 16px;
  width: max-content; border-radius: 12px; background: #fdf6ec; box-shadow: 0 4px 12px rgba(60,35,10,.3); }
.pmark { font-family: Newsreader, Georgia, serif; font-size: 20px; color: #3f6f7a; } .pmark b { font-weight: 500; color: #b85c43; }
.pboard { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a7a68; }
/* club board, v218: a light linen board, small cards close together */
#rt-cork .corkwrap { grid-template-columns: 1fr; gap: 18px; }
#rt-cork .corkform .clubgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
#rt-cork .corkboard { padding: 16px 16px 20px; border-radius: 16px; background: #efe7dc; background-image: none;
  border: 6px solid #dccbb2; box-shadow: 0 6px 18px rgba(90,60,30,.12); }
#rt-cork .boardplate { margin: 0 auto 14px; padding: 5px 14px 5px 10px; gap: 8px; border-radius: 999px; background: #fbf8f3; box-shadow: 0 2px 6px rgba(60,35,10,.12); }
#rt-cork .boardplate .pmark { width: 22px; height: 20px; }
#rt-cork .pbrand { font-family: Newsreader, Georgia, serif; font-size: 17px; color: #3f6f7a; } #rt-cork .pbrand b { font-weight: 500; color: #c8765a; }
#rt-cork .boardcards { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 14px 10px; }
#rt-cork .pinned::before { width: 9px; height: 9px; top: -4px; background: var(--pin, #c8765a); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
#rt-cork .pinned:nth-child(5n+1) { --pin: #5f8a70; } #rt-cork .pinned:nth-child(5n+2) { --pin: #c4901f; } #rt-cork .pinned:nth-child(5n+3) { --pin: #3f6f7a; } #rt-cork .pinned:nth-child(5n+4) { --pin: #c8765a; } #rt-cork .pinned:nth-child(5n) { --pin: #8a6f93; }
#rt-cork .poster, #rt-cork .poster.sz-card, #rt-cork .poster.sz-a7 { width: 146px; padding: 9px 10px 10px; border-radius: 5px; box-shadow: 0 3px 8px rgba(60,40,20,.14); }
#rt-cork .poster.sz-a7 { width: 170px; }
#rt-cork .poster .pkick { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; font-size: 8px; letter-spacing: .08em; white-space: nowrap; font-weight: 700; color: var(--pacc); }
#rt-cork .poster .pkick .pmark { width: 15px; height: 14px; flex: none; }
#rt-cork .poster .pkick b { font-weight: 800; }
#rt-cork .poster .ppic { display: block; width: 100%; height: auto; margin: 0 0 6px; }
#rt-cork .poster h3 { margin: 0 0 3px; font-size: 15px; line-height: 1.15; color: var(--pink) !important; -webkit-text-fill-color: var(--pink); opacity: 1; }
#rt-cork .poster .pbook { margin: 0 0 5px; font-size: 10px; line-height: 1.3; color: var(--pink); }
#rt-cork .poster .pwhen { margin: 0 0 3px; padding-top: 5px; font-size: 9.5px; line-height: 1.3; color: var(--pink); }
#rt-cork .poster .pwho { margin: 0 0 5px; font-size: 9.5px; line-height: 1.3; color: var(--pink); }
#rt-cork .poster .pjoin { margin: 0; font-size: 8.5px; font-weight: 700; color: var(--pacc); }
#rt-cork .poster.mine { outline-width: 2px; outline-offset: 3px; }
@media (max-width: 600px) {
  #rt-cork .corkboard { padding: 12px 8px 14px !important; border-width: 4px; }
  #rt-cork .boardcards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 8px !important; }
  #rt-cork .poster, #rt-cork .poster.sz-card, #rt-cork .poster.sz-a7 { width: 100% !important; }
}
/* Larger text: type grows, the layout stays put */
body.bigtext { font-size: 19px; }
body.bigtext .card { padding: 22px 20px; }
body.bigtext .pane-note, body.bigtext .meta, body.bigtext .goalnote { font-size: 15.5px !important; }
body.bigtext h2:not(#clubName):not(#calTitle), body.bigtext .sec { font-size: 25px !important; }
body.bigtext h3:not(.speedcard h3) { font-size: 20px !important; }
body.bigtext .speedcard h3 { font-size: 24px !important; }
body.bigtext #clubName { font-size: 44px !important; } body.bigtext #calTitle { font-size: 30px !important; }
body.bigtext .calnav { font-size: 28px !important; }
body.bigtext input, body.bigtext select, body.bigtext textarea, body.bigtext button, body.bigtext label { font-size: 17px !important; }
body.bigtext .nav button { font-size: 15.5px !important; }
body.bigtext .tagrow h1 { font-size: 17px !important; }
body.bigtext .sum b, body.bigtext .shelfsum b { font-size: 26px !important; }
body.bigtext .nowbody b, body.bigtext .lcard h3 { font-size: 19px !important; }
body.bigtext .session .time, body.bigtext .session .lname { font-size: 14px !important; }
body.bigtext .reader, body.bigtext .poster { font-size: initial; }
.ticks { flex-wrap: wrap; }
.nav button { width: 100%; }
body.bigtext .nav button { padding-left: 8px !important; padding-right: 8px !important; }
body.bigtext .writer-body, body.bigtext #clubNotebook, body.bigtext .nbtext {
  font-size: 18px !important; line-height: 30px !important; }
body.bigtext .reader * { font-size: inherit; }
@media (max-width: 560px) {
  .einkdevice { transform: scale(.78); transform-origin: top center; margin-bottom: -90px; }
  .einkwrap { overflow: hidden; }
}
body.focus .wrap { margin-left: auto !important; margin-right: auto !important; }
body.focus .nav, body.focus header { margin-left: auto !important; margin-right: auto !important; }
body.bigtext .brow input, body.bigtext .brow button, body.bigtext .brow .nb { font-size: 15px !important; }
body.bigtext .brow input { padding-left: 10px !important; padding-right: 8px !important; }
@media (max-width: 560px) {
  body.bigtext .brow { grid-template-columns: 30px minmax(0, 1fr) 62px 20px !important; }
  body.bigtext .brow .nb { width: 58px; font-size: 13px !important; padding: 6px 6px !important; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.paper-lined .nbtext, .paper-lined #clubNotebook, .paper-lined .writer-body, .paper-lined .writer.full .writer-body,
.paper-dot .nbtext, .paper-dot #clubNotebook, .paper-dot .writer-body, .paper-dot .writer.full .writer-body {
  font-size: 18px !important; line-height: 30px !important; padding-top: 2px !important; }
.paper-lined .nbtext, .paper-lined #clubNotebook, .paper-lined .writer-body,
.paper-dot .nbtext, .paper-dot #clubNotebook, .paper-dot .writer-body { -webkit-text-size-adjust: 100% !important; }
/* 6: focus mode keeps the bar centred */
body.focus .nav { margin-left: auto !important; margin-right: auto !important; width: 100%; }
body.focus .wrap { margin-left: auto !important; margin-right: auto !important; }
#talkText { min-height: 52px; resize: vertical; overflow: hidden; }
#rcWhy { min-height: 92px; height: auto; }
.sharecard textarea, #page-club textarea { min-height: 92px; }
.passgrid { align-items: start !important; }
.clubtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.clubmark { font-family: Newsreader, Georgia, serif; font-size: 19px; color: var(--c-blue); }
.clubmark b { font-weight: 500; color: var(--action); }
.clubmark i { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-left: 6px; }
.clubtop .back { margin: 0 !important; }
/* the board fits a phone, two cards to a row */
@media (max-width: 720px) {
  .boardcards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 10px !important; }
  .poster.sz-card, .poster.sz-a7 { width: 100% !important; }
  .corkboard { padding: 18px 12px !important; }
  .corkwrap { grid-template-columns: 1fr !important; }
}
/* both done circles are the same size */
.session .tick2, .session.act .tick2, .session:not(.act) .tick2 { width: 16px !important; height: 16px !important; }
/* the bar stays centred when the header is hidden */
body.focus .nav { margin-left: auto !important; margin-right: auto !important; max-width: min(980px, 100%) !important; }
.hidden { display: none !important; }

/* --- added --- */
.savebar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 22px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.savebar p { margin: 0; flex: 1 1 200px; font-size: 14.5px; color: var(--ink-soft); }
.savebar button, .savebar label {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: var(--field); color: var(--c-blue);
  border: 1px solid var(--line);
}
.savebar input[type="file"] { display: none; }

.listbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.listbar button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  background: var(--field); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.listbar button[aria-current="true"] { background: var(--c-sage); border-color: var(--c-sage); color: #fff; }
.listbar .add { color: var(--c-sage); }
.listname {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px dashed var(--line);
  padding: 4px 2px; width: 100%; margin-bottom: 10px;
}

.brow .tick {
  font: inherit; font-size: 14px; cursor: pointer; padding: 0;
  background: var(--field); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 8px;
}
.brow .tick.done { background: var(--c-sage); border-color: var(--c-sage); color: #fff; }
.brow input.done { color: var(--ink-soft); }
.brow.read { background: var(--surface-2); }

.unit { display: flex; gap: 4px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.unit button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft);
}
.unit button[aria-selected="true"] { background: var(--field); color: var(--c-gold); }

.prog { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.prog i { display: block; height: 100%; border-radius: 99px; background: var(--c-sage); }
.progtext { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.progtext b { color: var(--c-sage); font-weight: 700; }

/* --- pages --- */
.nav {
  display: flex; gap: 4px; margin: 0 auto 28px; max-width: 520px;
  background: var(--surface-2); border-radius: 12px; padding: 4px;
}
.nav button {
  flex: 1; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  padding: 9px 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.nav button[aria-current="true"] {
  background: var(--field); color: var(--c-blue); font-weight: 600; box-shadow: var(--shadow);
}

.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

.lcard {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.lcard:hover { border-color: var(--c-blue); }
.lcard h3 {
  font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 23px;
  margin: 0; color: var(--ink); letter-spacing: -0.01em;
}
.tag {
  align-self: flex-start; font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
}
.lcard .big { font-size: 27px; font-weight: 800; color: var(--c-red); letter-spacing: -0.02em; }
.lcard { gap: 12px; padding: 18px 18px 18px 26px; }
.lcard h3 { font-size: 25px; line-height: 1.15; }
.prog.big { height: 10px; margin: 2px 0 0; }
.cardstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cardstats b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.cardstats span { font-size: 12.5px; color: var(--ink-faint); }
.cardpri { display: inline-flex; gap: 4px; }
.prilabel { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.pdot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--field); cursor: pointer; padding: 0; }
.pdot.big {
  width: 32px; height: 32px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); border: 2px solid #b9cdd8; background: var(--field);
  transition: transform .12s ease;
}
.pdot.big:hover { transform: scale(1.1); border-color: var(--c-blue); }
.pdot.big.on { color: #fff; }
.stars { gap: 6px; flex-wrap: wrap; }
.yy { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; transition: transform .12s ease; }
.yy:hover { transform: scale(1.12); }
.pdot.small { width: 11px; height: 11px; border-width: 1.5px; cursor: default; display: inline-block; }
.pdot.on.p1 { background: #d6e3ea; border-color: #b9cdd8; }
.pdot.on.p2 { background: #a9c3d2; border-color: #93b2c4; }
.pdot.on.p3 { background: #7ea3b8; border-color: #6d93a9; }
.pdot.on.p4 { background: #5c7d90; border-color: #4f6f82; }
.pdot.on.p5 { background: #3f5c6e; border-color: #344f60; }
.lcard .meta { font-size: 14.5px; color: var(--ink-soft); }
.lcard.new { align-items: center; justify-content: center; text-align: center;
  border-style: dashed; color: var(--c-sage); font-weight: 600; font-size: 16px; min-height: 150px; }

.back {
  position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 15;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--field); border: 1px solid var(--line); color: var(--c-blue);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 14px; box-shadow: var(--shadow);
}
body.focus .back { top: calc(72px + env(safe-area-inset-top, 0px)); }
.detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.detail-head .listname { margin: 0; flex: 1 1 220px; font-size: 22px; font-family: Newsreader, Georgia, serif; }
.titlefield { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.titlefield span { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-sage); }
.detail-head .listname.big {
  width: 100%; font-family: Newsreader, Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.15;
  padding: 4px 0 8px; color: var(--ink); background: transparent;
  border: 0 !important; border-bottom: 3px solid var(--c-sage) !important; border-radius: 0 !important;
}
.detail-head .listname.big:focus { border-bottom-color: var(--c-blue) !important; outline: none; }
.detail-head select { width: auto; flex: 0 0 auto; padding: 9px 34px 9px 12px; }

.sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 16px; }
@media (min-width: 620px) { .sum { grid-template-columns: repeat(4, 1fr); } }
.sum div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.sum b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sum span { font-size: 14px; color: var(--ink-soft); }
.sum div:nth-child(1) b { color: var(--c-sage); }
.sum div:nth-child(2) b { color: var(--c-gold); }
.sum div:nth-child(3) b { color: var(--c-blue); }
.sum div:nth-child(4) b { color: var(--c-red); }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tools button, .tools label {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: var(--field); color: var(--c-blue); border: 1px solid var(--line);
}
.scanbox { margin: 10px 0; }
.scanbox video { width: 100%; max-height: 300px; border-radius: 14px; background: #000; }
.isbnrow { display: flex; gap: 8px; margin-top: 10px; }
.isbnrow input { flex: 1; text-align: left; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tint: #2b2720; --tint-2: #383228; --action-soft: #3a2620; --field: #221f19; }
  :root:not([data-theme="light"]) body { background: var(--bg); }
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .ovcard, :root:not([data-theme="light"]) .day-col,
  :root:not([data-theme="light"]) .deepbook, :root:not([data-theme="light"]) .nowchip, :root:not([data-theme="light"]) .glancerow,
  :root:not([data-theme="light"]) .dayitem, :root:not([data-theme="light"]) .lcard { background: var(--field) !important; }
}

/* dark mode chosen by hand */

  :root[data-theme="dark"] {
    --bg:        #191713;
    --surface:   #221f19;
    --surface-2: #2b2720;
    --line:      #383228;
    --ink:       #ebe5d9;
    --ink-soft:  #aea595;
    --ink-faint: #817a6c;
    --violet:    #d9765c;
    --violet-s:  #2c211b;
    --clay:      #8fb0c4;
    --clay-s:    #1f2730;
    --c-sage:    #9dbba8;
    --c-green:   #7fae8c;
    --c-blue:    #8fb0c4;
    --c-red:     #d9765c;
    --c-gold:    #e0b551;
    --c-sand:    #e0b551;
    --violet-deep: #f4aec1;
    --coral:     #9dbba8;
    --coral-s:   #1f2620;
    --teal:      #3fc9bb;
    --amber:     #74b3ee;
    --field:     #191512;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }


  :root[data-theme="dark"] { --tint: #2b2720; --tint-2: #383228; --action-soft: #3a2620; --field: #221f19; --surface: #1c1a15; }
  :root[data-theme="dark"] .ovmeet, :root[data-theme="dark"] .meetpreview, :root[data-theme="dark"] .clubview .clubhead,
  :root[data-theme="dark"] .nowcard, :root[data-theme="dark"] .ovbook, :root[data-theme="dark"] .deepnote,
  :root[data-theme="dark"] .together, :root[data-theme="dark"] .problem { background: var(--surface-2) !important; border-color: var(--line) !important; }
  :root[data-theme="dark"] .meetbadge, :root[data-theme="dark"] .caltile, :root[data-theme="dark"] .tagrow,
  :root[data-theme="dark"] .nav, :root[data-theme="dark"] .shelfbtns button:not(#newList) { background: var(--field) !important; border-color: var(--line) !important; }
  :root[data-theme="dark"] .ovbook .ovnb { background: repeating-linear-gradient(180deg, transparent 0 27px, #3a342a 27px 28px) !important; }
  :root[data-theme="dark"] .msg.mine .bub { background: #3a2620 !important; border-color: #4a3027 !important; }
  :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  :root[data-theme="dark"] .meetform input { background: var(--surface-2) !important; }
  :root[data-theme="dark"] .cover { color: #fff; }


  :root[data-theme="dark"] { --tint: #2b2720; --tint-2: #383228; --action-soft: #3a2620; --field: #221f19; }
  :root[data-theme="dark"] body { background: var(--bg); }
  :root[data-theme="dark"] .card, :root[data-theme="dark"] .ovcard, :root[data-theme="dark"] .day-col,
  :root[data-theme="dark"] .deepbook, :root[data-theme="dark"] .nowchip, :root[data-theme="dark"] .glancerow,
  :root[data-theme="dark"] .dayitem, :root[data-theme="dark"] .lcard { background: var(--field) !important; }


/* writing sits on a 30 pixel rhythm so the paper lines up */
body.paper-dot .writer-body, body.paper-lined .writer-body,
body.paper-dot #clubNotebook, body.paper-lined #clubNotebook,
body.paper-dot .nbtext, body.paper-lined .nbtext,
body.paper-dot .writer.full .writer-body, body.paper-lined .writer.full .writer-body,
body.paper-dot .notestart .writer-body, body.paper-lined .notestart .writer-body {
  font-size: 18px !important; line-height: 30px !important; }
/* inner pages: a smaller header so books come first */
body.inner .tagrow, body.inner header .stack { display: none !important; }
body.inner .wordmark { font-size: 36px !important; }
body.inner header { margin-bottom: 14px !important; }
body.inner .savepill { background: var(--card, #fff) !important; color: var(--c-blue) !important; border: 1px solid var(--line, #e6dccf) !important; box-shadow: none !important; }
@media (max-width: 560px) { body.inner .wordmark { font-size: 30px !important; } }
/* Read: one toolbar, the extras as quiet links beneath */
.libmore { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.libmore .libmini { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 0 !important; color: var(--c-blue) !important; font-weight: 600; }
.libmore .libmini[aria-expanded="true"], .libmore .libmini[aria-pressed="true"] { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 4px; }
/* dragging a book to a new place */
.ebookwrap { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ebookwrap.dragging { opacity: .3; }
.ebookghost { position: fixed; z-index: 400; pointer-events: none; transform: rotate(-2deg) scale(1.04); cursor: grabbing; }
.ebookghost .ebookx { display: none; }
/* page flicks over the book while the slider moves; solid leaves in the reader's own colors */
.rdflip { position: absolute; inset: 0; pointer-events: none; perspective: 1600px; z-index: 3; display: flex; justify-content: center; }
.rdleaf { position: absolute; top: 3%; bottom: 3%; width: min(340px, 46%); background: var(--rchip); box-shadow: 0 0 0 1px var(--rsoft), 0 4px 16px rgba(0,0,0,.2); border-radius: 2px 6px 6px 2px; animation-timing-function: cubic-bezier(.35,.1,.3,1); animation-fill-mode: both; }
.rdleaf.fwd { left: 50%; transform-origin: left center; animation-name: leafFwd; }
.rdleaf.back { right: 50%; transform-origin: right center; border-radius: 6px 2px 2px 6px; animation-name: leafBack; }
@keyframes leafFwd { 0% { transform: rotateY(0deg); opacity: 1; } 70% { transform: rotateY(-125deg); opacity: .9; } 100% { transform: rotateY(-175deg); opacity: 0; } }
@keyframes leafBack { 0% { transform: rotateY(0deg); opacity: 1; } 70% { transform: rotateY(125deg); opacity: .9; } 100% { transform: rotateY(175deg); opacity: 0; } }
/* a book frame always matches its page's color scheme, so phones in dark mode never paint it white */
#readerView iframe { color-scheme: light; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 560px) {
  .topbtns { position: absolute; }
  body.inner header { padding-top: 48px; }
}
/* reader extras: bookmark fold, recent books, search, dictionary */
.rdfold { position: absolute; top: env(safe-area-inset-top, 0px); right: 18px; width: 16px; height: 26px; background: var(--rsoft); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); z-index: 4; pointer-events: none; }
.rdbm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rdbm[aria-pressed="true"] svg { fill: currentColor; }
#rdLookRow .rdtype { grid-template-columns: repeat(4, 1fr); }
.rdicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vertical-align: middle; }
.rdshelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px 6px 6px; scroll-padding-left: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rdshelf::-webkit-scrollbar { display: none; }
.rdshelfbook { flex: none; scroll-snap-align: start; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; font-size: 11.5px; opacity: .92; }
.rdshelfbook .cover { width: 64px !important; height: 96px !important; }
.rdshelfbook.here { opacity: 1; font-weight: 700; }
.rdshelfbook.here .cover { outline: 2px solid var(--rink); outline-offset: 3px; }
.rdshelfall { flex: none; align-self: center; width: 64px; height: 96px; margin-bottom: 20px; border-radius: 6px; border: 1px dashed var(--rline); background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rdrecent { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 12px; padding: 6px 0 18px; }
.rdrecentbook { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; font-size: 12px; }
.rdrecentbook .cover { width: 88px !important; height: 132px !important; }
.rdrecentbook.here .cover { outline: 2px solid var(--rink); outline-offset: 3px; }
.rdwide { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--rline); background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; margin-top: 10px; }
.rdwide:disabled { opacity: .6; cursor: default; }
.rdsearch input { width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 12px; border: 1px solid var(--rline); background: none; color: inherit; font: inherit; font-size: 16px; padding: 0 14px; }
.rdhit small { display: block; font-size: 11.5px; opacity: .7; margin-bottom: 2px; }
.rdhit b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rdsrc { font-size: 12px; opacity: .7; margin: 8px 0 0; }
.rddef { font-size: 15px; line-height: 1.55; }
.rddefhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rddefhead b { font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 500; }
.rddefhead span { opacity: .75; }
.rdplay { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--rline); background: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rdplay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rdpos { font-style: italic; opacity: .75; margin: 12px 0 4px; }
.rddef ol { margin: 0; padding-left: 20px; }
.rddef li { margin-bottom: 8px; }
.rddef li i { display: block; opacity: .75; margin-top: 2px; }
.rdsyn { font-size: 13.5px; opacity: .8; margin: 0 0 6px; }
.floatbar > .contread.contread { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 0 0 auto !important; align-self: flex-end !important; border: 0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.floatbar > .contread.cover { background: none; width: 46px !important; min-width: 46px; height: 68px; flex: none; overflow: hidden; }
.floatbar > .contread.cover img { display: block; width: 46px; height: 68px; object-fit: cover; border-radius: 7px; }
.floatbar > .contread.icon { width: 52px !important; min-width: 52px; flex: none; height: 52px; border-radius: 999px; justify-content: center; background: var(--c-blue, #3f6f7a); color: #fff; }
.floatbar > .contread { display: none !important; }
/* dark reader themes: the sheet and panels get their own brighter ink and a lifted surface */
.reader.rdark .readfoot, .reader.rdark .rdpanel, .reader.rdark .selpop, .reader.rdark .rdnote, .reader.rdark .rdundo { --rink: var(--rmenu); --rsoft: var(--rmenusoft); --rchip: var(--rmenubg); --rline: rgba(255,255,255,.15); }
.reader.rdark .readfoot { border-color: rgba(255,255,255,.18); }
.reader.rdark .rddot { border-color: rgba(255,255,255,.34); }
.reader.rdark .rdseg { border-color: rgba(255,255,255,.3); }
/* the page peel: a copy of the page, and the lifted flap showing the back of the sheet */
.rdcurl { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.rdleafpage .rdmark, .rdleafpage .rdfold { pointer-events: none; }
html:has(.reader:not(.hidden)), html:has(.reader:not(.hidden)) body { overflow: hidden !important; overscroll-behavior: none; }
.reader { overscroll-behavior: none; }
.rdleafpage { position: absolute; inset: 0; background: var(--rbg); overflow: hidden; contain: strict; }
.rdflapwrap { position: absolute; inset: 0; filter: drop-shadow(-5px 3px 10px rgba(0,0,0,.3)); will-change: filter; }
.reader.rdark .rdflapwrap { filter: drop-shadow(-5px 3px 12px rgba(0,0,0,.6)); }
.rdflap { position: absolute; inset: 0; background: var(--rchip); clip-path: polygon(0 0,0 0,0 0); }
.rdcurl.slide .rdflapwrap { display: none; }
.rdcurl.slide .rdleafpage { box-shadow: 0 0 28px rgba(0,0,0,.14); will-change: transform; }
.reader.rdark .rdcurl.slide .rdleafpage { box-shadow: 0 0 30px rgba(0,0,0,.5); }

/* header: the full wordmark lives on BookClock; every other tab gets a light top bar */
body.inner header { text-align: left !important; margin: 0 0 16px !important; padding: 2px 0 0 !important; }
body.inner header .inner { max-width: none !important; margin: 0 !important; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
body.inner .wordmark { flex-wrap: wrap; font-size: 36px !important; height: auto !important; line-height: 1.1 !important; margin: 0 !important; justify-content: flex-start !important; display: inline-flex !important; align-items: flex-end; gap: 0 !important; }
body.focus .wordmark::after { display: none !important; }
body.inner .wordmark::after { content: ''; flex-basis: 100%; height: 4px; margin-top: 5px; border-radius: 4px; background: linear-gradient(90deg, #7f9c86 0 20%, #d9a441 20% 40%, #3f6f7a 40% 60%, #c8765a 60% 80%, #d6b58c 80% 100%); opacity: .85; }
@media (max-width: 560px) { body.inner .wordmark { font-size: 31px !important; } body.inner header { padding-top: 0 !important; min-height: 50px; margin-bottom: 12px !important; } }
/* phones: the top buttons stay small and the same height */
@media (max-width: 560px) {
  .topbtns .savepill, .topbtns .reset, .topbtns .resetmore { height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 30px !important; font-size: 12px !important; white-space: nowrap !important; }
  .topbtns .savepill { padding-left: 12px !important; padding-right: 12px !important; }
  /* Reset shows as a small circular arrow on phones so the row always fits */
  .topbtns .reset { font-size: 0 !important; width: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .topbtns .reset::before { content: '\21BA'; font-size: 16px; line-height: 1; }
  .topbtns .resetmore { width: 24px; padding: 0 !important; }
}
@media (max-width: 360px) {
  body.inner .wordmark { font-size: 25px !important; }
  .topbtns .focusbtn { width: 32px !important; height: 32px !important; }
  .topbtns .focusbtn svg { width: 15px; height: 15px; }
}

/* tabs: one quiet style for all, the open tab marked the same way everywhere */
@media (max-width: 560px) {
  .nav button { font-size: 13px !important; padding: 10px 4px !important; }
}

.aboutline { margin: 0 auto 16px; max-width: 34ch; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.secline { margin: -8px auto 18px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
.secline a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.aboutline span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* expanded view: the open tab stays readable and the wordmark sits at the start of the bar */
body.focus .nav button[aria-current="true"]:not(#nav-club) { color: var(--c-blue) !important; }
@media (min-width: 561px) {
  body.focus .nav .navmark { display: inline-flex !important; align-items: flex-end; gap: 0; padding: 0 12px 0 10px !important; font-family: Newsreader, Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
  body.focus .nav .navmark .wm-a { color: var(--c-blue); } body.focus .nav .navmark .wm-b { color: var(--action); }
}

/* phones: the expand button sits with Back up and Reset, and expanded view keeps the small top bar with the wordmark */
.topbtns .focusbtn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; border-radius: 999px; background: var(--field); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink-soft); cursor: pointer; }
@media (max-width: 560px) { body.focus.inner header { display: block !important; } }

/* club notebook paper, separate from the rest of the writing */
body.nb-lined #clubNotebook, body.nb-lined .nbtext { background-image: repeating-linear-gradient(180deg, transparent 0 29px, #dfe7ea 29px 30px) !important; background-position: 0 -4px !important; background-size: auto !important; font-size: 18px !important; line-height: 30px !important; padding-top: 2px !important; background-attachment: local !important; }
body.nb-blank #clubNotebook, body.nb-blank .nbtext { background-image: none !important; }

/* Desk writing */
.wsnew { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wschip { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--k, var(--c-blue)); cursor: pointer; }
.wstools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0 0 10px; }
.wstools.hidden { display: none; }
.wstools select { width: auto; }
.wsfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wsfilter:empty { display: none; }
.wsfilter button { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer; }
.wsfilter button[aria-selected="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.wslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.wsrow { text-align: left; font: inherit; cursor: pointer; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); }
.wsrow .wsk { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k, var(--c-blue)); }
.wsrow b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsrow .wssnip { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wsrow small { font-size: 12px; color: var(--ink-faint); }
.wsempty { margin: 0; color: var(--ink-faint); font-size: 14px; }
.wsed { position: fixed; inset: 0; z-index: 66; background: rgba(245, 246, 248, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wsed.hidden { display: none; }
body.wsopen { overflow: hidden; }
.wssheet { --wsbg: #ffffff; --wsink: #26282c; --wssoft: rgba(38,40,44,.45); --wsline: rgba(38,40,44,.1);
  position: absolute; inset: 2vh max(2vw, calc((100vw - 1100px) / 2)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--wsbg); color: var(--wsink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 90px rgba(40,44,52,.18); animation: immerse .3s ease both; }
@media (max-width: 560px) { .wssheet { inset: 0; border-radius: 0; border: 0; box-shadow: none; } }
.wstop { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; background: var(--wsbg); }
.wssheet .wstitle, .wssheet .wsdate, .wssheet .wsbody, .wssheet .sp, .wssheet .wsitem input[type=text] { color: var(--wsink) !important; }
.wssheet .wstitle::placeholder, .wssheet .wsbody::placeholder, .wssheet .wsitem input::placeholder { color: var(--wssoft); }
.wssheet .sp:empty::before { color: var(--wssoft); }
.wssheet .wscount, .wssheet .wsback, .wssheet .wsmore { color: var(--wssoft); }
.wssheet .wsitem { border-bottom-color: var(--wsline); }
.wssheet .wsitem.done input[type=text] { color: var(--wssoft) !important; }
.wssheet .sptools, .wssheet .sptools button { background: var(--wsbg); }
.wssheet .sptools button { border-color: var(--wsline); color: var(--wssoft); }
.wssheet .sptools button[aria-pressed="true"] { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.wssheet .wschip { background: var(--wsbg); border-color: var(--wsline); }
.paper-lined .wssheet .wsbody { background-image: repeating-linear-gradient(180deg, transparent 0 29px, var(--wsline) 29px 30px) !important; }
.wssheet .wsbody, .wssheet .wstitle, .wssheet .wsdate, .wssheet .wsitem input[type=text] { font-family: var(--wsface, Newsreader, Georgia, serif) !important; }
.wssheet .wsbody { font-size: calc(19px * var(--wsscale, 1)) !important; }
.ws-poem .wssheet .wsbody, .wssheet.poem .wsbody { font-size: calc(20px * var(--wsscale, 1)) !important; }
.ws-note .wssheet .wsbody { font-size: calc(17px * var(--wsscale, 1)) !important; }
.wssheet .wsitem input[type=text] { font-size: calc(18px * var(--wsscale, 1)) !important; }
.paper-lined .wssheet .wsbody { font-size: calc(18px * var(--wsscale, 1)) !important; line-height: 30px !important; }
.wssheet .wstitle { font-size: 34px !important; letter-spacing: -0.01em; padding-bottom: 2px !important; }
.wsmeta { margin: 0 0 22px; font-size: 12.5px; color: var(--wssoft); }
.wsweek { margin: 10px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7f9c86; }
.wssheet .wsdate { font-size: 34px; margin: 2px 0 22px; letter-spacing: -0.01em; }
.wssheet .wsbody::placeholder, .wssheet .wstitle::placeholder { font-style: italic; }
.wstop > * { transition: opacity .5s ease; }
.wssheet.typing .wstop > :not(.wsmenu) { opacity: .15; }
.wssheet .wsitem input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--wssoft); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .2s ease, border-color .2s ease; }
.wssheet .wsitem input[type=checkbox]:checked { background: #c4901f; border-color: #c4901f; }
.wssheet .wsitem input[type=checkbox]:checked::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.wsitem input[type=text] { transition: color .2s ease; }
.wstype { display: grid; grid-template-columns: 1fr 1fr 1.4fr; margin: 4px 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wstype button { font: inherit; font-size: 13.5px; font-weight: 600; height: 36px; border: 0 !important; background: none !important; color: var(--ink); cursor: pointer; padding: 0 !important; line-height: 36px !important; text-align: center !important; display: flex; align-items: center; justify-content: center; border-radius: 0 !important; }
.wstype button + button { border-left: 1px solid var(--line) !important; }
.wstype [data-f=smaller] { font-family: Newsreader, Georgia, serif; font-size: 14px; } .wstype [data-f=bigger] { font-family: Newsreader, Georgia, serif; font-size: 20px; }
.wspapers { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.wsswatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0 !important; }
.wsswatch.on { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.wsback, .wsmore { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.wsback svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wskind { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wscount { margin-left: auto; font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.wsmenu { position: absolute; right: 12px; top: calc(56px + env(safe-area-inset-top, 0px)); background: var(--field); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; min-width: 190px; }
.wsmenu.hidden { display: none; }
.wsmenu button.hidden { display: none; }
.wsmenu button { font: inherit; font-size: 15px; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.wsmenu button:hover { background: var(--surface-2); }
.wsmenu .danger { color: var(--c-red); }
.wspage { max-width: 680px; margin: 0 auto; padding: 8px 24px 140px; }
.wstitle { display: block; width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; font-family: Newsreader, Georgia, serif !important; font-size: 30px !important; font-weight: 500; color: var(--ink); padding: 6px 0 14px !important; outline: none; text-align: left !important; border-radius: 0 !important; }
.wsdate { font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 500; color: var(--ink); margin: 6px 0 16px; }
.wsbody { display: block; width: 100%; border: 0 !important; box-shadow: none !important; resize: none; outline: none; overflow: hidden; background-color: transparent !important; font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.7; color: var(--ink); padding: 0 !important; border-radius: 0 !important; }
.wsline { display: flex; gap: 8px; margin: 0 0 14px; }
.wsline .wschip { font-size: 13px; padding: 6px 12px; }
.ws-poem .wspage { max-width: 540px; }
.ws-poem .wsbody { font-size: 20px; line-height: 1.8; }
.ws-story .wspage { max-width: 640px; }
.ws-note .wsbody { font-family: "Plus Jakarta Sans", -apple-system, sans-serif; font-size: 17px; line-height: 1.6; }
.ws-essay .wsbody { font-size: 18.5px; }
.wsitems { display: flex; flex-direction: column; }
.wsitem { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wsitem input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--c-sage); flex: none; }
.wsitem input[type=text] { flex: 1; min-width: 0; width: auto; border: 0 !important; background: none !important; box-shadow: none !important; font: inherit; font-size: 18px; color: var(--ink); padding: 4px 0 !important; outline: none; text-align: left !important; border-radius: 0 !important; }
.wsitem.done input[type=text] { color: var(--ink-faint); text-decoration: line-through; }
.wsadd { margin-top: 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--c-blue); background: none; border: 0; cursor: pointer; padding: 8px 0; }
.sptools { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--bg); display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.sptools::-webkit-scrollbar { display: none; }
.sptools button { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer; }
.sptools button[aria-pressed="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.sp { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 16px; line-height: 1.5; color: var(--ink); outline: none; min-height: 1.5em; white-space: pre-wrap; overflow-wrap: break-word; }
.sp:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.sp-scene { text-transform: uppercase; font-weight: 700; margin: 22px 0 10px; }
.sp-action { margin: 0 0 12px; }
.sp-character { text-transform: uppercase; margin: 14px 0 0 38%; }
.sp-paren { margin: 0 24% 0 30%; }
.sp-dialogue { margin: 0 14% 12px 20%; }
.sp-transition { text-transform: uppercase; text-align: right; margin: 12px 0; }
@media (max-width: 560px) {
  .wspage { padding: 6px 18px 140px; }
  .sp-character { margin-left: 30%; } .sp-dialogue { margin: 0 4% 12px 12%; } .sp-paren { margin: 0 10% 0 20%; }
}

/* Paper style for the whole site */
body.look-paper { --bg: #f3f2ee; --ink: #2c2e31; --ink-soft: #62656b; --ink-faint: #9a9ca1; --line: #e6e4de; --field: #ffffff; --surface: #ffffff; --surface-2: #f3f2ee; --tint: #eeede8; background: #f3f2ee !important; color: #2c2e31; }
body.look-paper .card, body.look-paper .nav, body.look-paper .lcard, body.look-paper .nowchip, body.look-paper .wsrow, body.look-paper .passgrid > .card {
  background: #ffffff !important; border: 1px solid rgba(0,0,0,.035) !important; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px rgba(40,44,52,.06) !important; }
body.look-paper .card { border-radius: 22px !important; }
body.look-paper .nowchip, body.look-paper .wsrow { box-shadow: none !important; border: 1px solid #eeede8 !important; }
body.look-paper .card h2, body.look-paper h2.sec, body.look-paper .card h3 { color: #2c2e31 !important; }
body.look-paper h2.sec-gold::before { background: var(--c-gold); } body.look-paper h2.sec-red::before { background: var(--c-red); }
body.look-paper h2.sec-blue::before { background: var(--c-blue); } body.look-paper h2.sec-sage::before { background: var(--c-sage); }
body.look-paper h2.sec::before { width: 8px; height: 8px; }
body.look-paper .pane-note, body.look-paper .status, body.look-paper .derived { color: #62656b !important; }
body.look-paper .nav button[aria-current="true"]:not(#nav-club) { background: #eeede8 !important; color: #2c2e31 !important; }
body.look-paper .nav button { color: #7a7d82; }
body.look-paper input[type="text"], body.look-paper input[type="search"], body.look-paper input[type="number"], body.look-paper input[type="email"], body.look-paper input[type="url"], body.look-paper select, body.look-paper textarea { background-color: #f7f6f3 !important; border-color: #ebe9e3 !important; }
body.look-paper button.secondary, body.look-paper .tools button:not(.primary):not(.aibtn), body.look-paper .shelfbtns button, body.look-paper .listfoot button { background: #ffffff !important; border-color: #e6e4de !important; }
body.look-paper .unit, body.look-paper .tabs { background: #eeede8 !important; }
body.look-paper .wssheet input[type="text"], body.look-paper .wssheet textarea { background-color: transparent !important; border: 0 !important; }
body.look-paper .topbtns .savepill, body.look-paper .topbtns .reset, body.look-paper .topbtns .resetmore, body.look-paper .topbtns .focusbtn { background: #ffffff !important; border-color: #e6e4de !important; box-shadow: none !important; }

.notestart > .sechead { margin: 6px 2px 14px; }
/* Planner: together and writing first */
.schedquick { margin: 4px 0 14px; }
.schedquick .sq-together button { font-size: 13px !important; padding: 7px 12px !important; }
.schedquick .sqmore { color: var(--ink-soft) !important; }
.schedstrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 0 8px; scrollbar-width: none; }
.schedstrip.hidden { display: none; }
.sbook { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 0; border-radius: 12px; background: none; font: inherit; cursor: pointer; }
.sbook span { font-size: 11px; line-height: 1.2; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.sbook.on { background: var(--tint); box-shadow: inset 0 0 0 2px var(--action); }
.sbook.on span { color: var(--ink); font-weight: 700; }
.schedquick p { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.schedquick > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.schedquick button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--c-blue); cursor: pointer; }
.schedquick .sq-together button { border-color: rgba(200,118,90,.35); background: rgba(200,118,90,.08); color: var(--action); }
.schedquick button[aria-pressed="true"] { background: var(--action) !important; border-color: var(--action) !important; color: #fff !important; }
/* bigger covers where books are listed */
.nowchip .cover { --cw: 92px !important; }
.nowchip { grid-template-columns: 22px 92px minmax(0, 1fr) auto !important; }
#picker .lcard .cover { --cw: 92px !important; }
@media (max-width: 560px) {
  .nowchip { grid-template-columns: 20px 84px minmax(0, 1fr) !important; }
  .nowchip .cover { --cw: 84px !important; }
  #picker .lcard .cover { --cw: 84px !important; }
}
/* writing titles never get a red focus box */
.wstitle:focus, .wstitle:focus-visible, .wsbody:focus, .wsbody:focus-visible, .sp:focus, .wsitem input:focus, .wsitem input:focus-visible { outline: none !important; box-shadow: none !important; }
/* date and time boxes stay inside their cards, and nothing pushes the page sideways */
input[type="date"], input[type="time"] { max-width: 100%; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; text-align: left; }
html { overflow-x: hidden; }

/* the day sheet's Close stays in view at the top */
.daybox .dayclose { position: sticky !important; top: 0 !important; float: right; margin: -4px -4px 0 12px; width: auto !important; min-width: 0; height: 34px !important; padding: 0 14px !important; border-radius: 999px !important; font: inherit; font-size: 14px !important; font-weight: 600; line-height: 1 !important; background: var(--field) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; box-shadow: 0 4px 14px rgba(0,0,0,.06); z-index: 5; }
.daybox #dayTitle { padding-right: 84px !important; }
.schedgrid > .hidden { display: none !important; }
.schedlbl { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.docpick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.docpick button { text-align: left; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.docpick button small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.docpick button span { font-family: Newsreader, Georgia, serif; font-size: 16px; }
.docpick button[aria-pressed="true"] { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.docpick p { margin: 2px 2px 0; font-size: 13px; color: var(--ink-faint); }
/* screenplay block buttons wrap instead of running off the page */
.sptools { flex-wrap: wrap; overflow: visible !important; }
/* Reading now: the number sits on the cover, the cover gets the room */
.nowchip { position: relative; grid-template-columns: 110px minmax(0, 1fr) auto !important; grid-template-rows: auto auto auto; }
.nowchip .cover { --cw: 110px !important; grid-column: 1 !important; grid-row: 1 / span 3 !important; }
.nowchip .cover { align-self: start !important; }
.nowchip .nownum { position: absolute; left: 8px; top: 8px; z-index: 2; width: 24px; height: 24px; font-size: 12px; background: var(--field); box-shadow: 0 2px 8px rgba(0,0,0,.18); display: grid; place-items: center; }
.nowchip .nowbody { grid-column: 2 / span 2 !important; grid-row: 1 !important; align-self: end; }
.nowchip .readpill { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; align-self: center; margin: 0 !important; }
.nowchip .nowarrows { grid-column: 3 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; }
@media (max-width: 560px) {
  .nowchip { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 8px 14px !important; }
  .nowchip .cover { --cw: 104px !important; }
  .nowchip .nowbody { grid-column: 2 !important; }
  .nowchip .readpill { grid-column: 2 !important; grid-row: 2 !important; }
  .nowchip .nowarrows { grid-column: 2 !important; grid-row: 3 !important; justify-self: start !important; }
}
/* Desk book cards: bigger covers, nothing overlapping */
#picker .lcard .cover { --cw: 104px !important; flex: none; }
#picker .lcard .pickbody { min-width: 0; }
/* phones: the top buttons sit in the header row */
@media (max-width: 560px) {
  header { display: flex !important; flex-direction: column; align-items: stretch; }
  header .topbtns { position: static !important; align-self: flex-end; margin: 0 0 6px; right: auto !important; top: auto !important; }
  body.inner header { padding-top: 6px !important; }
}

/* writing uses the width of the sheet on a computer */
.wspage, .ws-poem .wspage, .ws-story .wspage { max-width: none !important; padding-left: clamp(18px, 6vw, 96px) !important; padding-right: clamp(18px, 6vw, 96px) !important; }
.wstop { max-width: none !important; padding-left: clamp(12px, 3vw, 40px) !important; padding-right: clamp(12px, 3vw, 40px) !important; }
.story { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.chapnav { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 4px; }
.chapnav button { text-align: left; font: inherit; background: none; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--wsink); display: flex; flex-direction: column; gap: 1px; }
.chapnav button small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wssoft); }
.chapnav button span { font-family: var(--wsface, Newsreader, Georgia, serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapnav button.on { background: var(--wsline); }
.chapnav .chapadd { color: #c8765a; font-weight: 700; font-size: 14px; margin-top: 6px; }
.chappage { min-width: 0; }
.chapkick { margin: 28px 0 6px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #c8765a; }
.chaptitle { display: block; width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; text-align: center !important; font-family: var(--wsface, Newsreader, Georgia, serif) !important; font-size: 36px !important; font-weight: 500; color: var(--wsink) !important; padding: 0 !important; }
.chaptitle::placeholder { color: var(--wssoft); font-style: italic; }
.chaporn { text-align: center; font-size: 22px; color: var(--wssoft); margin: 14px 0 28px; }
.chapfoot { display: flex; gap: 10px; justify-content: space-between; margin: 40px 0 0; flex-wrap: wrap; }
.chapfoot button { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 1px solid var(--wsline); border-radius: 999px; padding: 8px 16px; cursor: pointer; color: var(--wsink); }
.chapfoot .chaprm { border: 0; color: var(--wssoft); font-weight: 500; }
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; gap: 12px; }
  .chapnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .chapnav button { flex: none; max-width: 160px; }
  .chaptitle { font-size: 28px !important; }
}
/* Planner fills a computer screen */
body.pg-cal .wrap { max-width: min(1680px, 96vw) !important; }
@media (min-width: 900px) {
  body.pg-cal .day-col { min-height: clamp(340px, calc(100vh - 400px), 640px); padding: 16px 14px; }
  body.pg-cal #calSum { display: flex !important; gap: 10px; margin: 6px 0 14px; }
  body.pg-cal #calSum > div { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 8px 16px !important; min-height: 0 !important; border-radius: 999px !important; }
  body.pg-cal #calSum b { font-size: 18px !important; margin: 0 !important; }
  body.pg-cal .session .scov { display: block; margin: 10px 0 2px; }
  body.pg-cal .session { padding-bottom: 12px !important; }
  body.pg-cal .week { gap: 14px; }
  body.pg-cal .session { font-size: 14.5px; }
}
/* Stats: the day's books show their covers */
.pdrow { gap: 18px !important; align-items: center; }
.pdrow .cover { --cw: 64px !important; flex: none; }
/* Shelves and Read: the two main doors, easy to see */
@media (min-width: 700px) {
  .shelftabs { padding: 5px !important; border-radius: 16px !important; }
  .shelftabs button { font-size: 17px !important; padding: 12px 34px !important; border-radius: 12px !important; }
}

/* shelves as covers */
.covershelf { display: grid; grid-template-columns: repeat(auto-fill, var(--sw, 86px)); grid-auto-rows: calc(var(--sw, 86px) * 1.5 + 14px); align-items: end; gap: 0 12px; padding: 4px 2px 0; margin: 12px 0 8px; overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--sw, 86px) * 1.5 + 11px), var(--lcf, #eee) calc(var(--sw, 86px) * 1.5 + 11px) calc(var(--sw, 86px) * 1.5 + 14px)); }
.covershelf .cover { margin-bottom: 3px; }
.covershelf .moreshelf { align-self: center; justify-self: center; font-size: 15px !important; font-weight: 700; }
.covershelf .cover { flex: none; box-shadow: 0 6px 14px rgba(30,40,50,.18); }
.covershelf .cover.done { opacity: .55; }
.covershelf .moreshelf, .covershelf .emptyshelf { align-self: center; font-size: 13px; color: var(--ink-faint); margin-left: 4px; }
#listgrid .covershelf { height: auto !important; }
.shelfview { width: max-content; margin-left: auto; }
.shelfview + .addbtn { margin-left: 8px; }
.listhead .rowsort { margin-left: 0 !important; }
.coverrows .grouphead { margin: 18px 0 10px; }
.covergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 22px 16px; }
.covertile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer; min-width: 0; }
.covertile .cover.big { --cw: 128px !important; box-shadow: 0 10px 22px rgba(30,40,50,.2); transition: transform .2s ease; }
.covertile:hover .cover.big { transform: translateY(-3px); }
.covertile b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 15.5px; line-height: 1.25; color: var(--ink); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.covertile > span { font-size: 12.5px; color: var(--ink-faint); }
.covertile .readpill { margin: 6px 0 0 !important; }
.covertile.done .cover.big { opacity: .75; }
.covertile.dragging { opacity: .4; }
.covertile.over .cover.big { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.cover .fmt { position: absolute; z-index: 3; left: 6px; bottom: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
.cover .fmt.eb { background: var(--c-blue); color: #fff; }
.cover .fmt.paper { background: rgba(255,255,255,.92); color: #6b5d4f; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.cover button.fmt { border: 0; font-family: inherit; cursor: pointer; line-height: 1.2; }
.cover .fmt.ebook { background: var(--c-blue); color: #fff; }
.cover .fmt.want { background: #f6e7bf; color: #7a5a12; }
.cover .fmt.borrowed { background: #dfeadf; color: #3f5f46; }
.cover .donecheck { position: absolute; z-index: 3; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #7f9c86; color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.coveradd { display: flex; gap: 20px; align-items: center; margin: 4px 0 22px; padding: 18px; border-radius: 24px; background: var(--field); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(40,30,20,.06); max-width: 620px; }
.addcov { flex: 0 0 92px; height: 138px; border-radius: 10px; border: 2px dashed var(--tint-2); display: grid; place-items: center; color: var(--ink-faint); font-size: 34px; font-weight: 300; }
.addcov.has { border: 0; }
.addfields { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.addfields small { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.addfields input { width: 100%; text-align: left; margin: 0; min-height: 44px; padding: 10px 14px !important; border-radius: 12px !important; font-size: 15px !important; }
.addfields input.title { grid-column: 1 / -1; font-family: Newsreader, Georgia, serif; font-size: 20px !important; padding: 12px 14px !important; }
.addfields .addbtn { justify-self: start; width: auto; margin: 0; padding: 10px 18px; }
@media (max-width: 560px) { .coveradd { gap: 14px; padding: 14px; } .addcov { flex-basis: 72px; height: 108px; } .addfields { grid-template-columns: 1fr; } .addfields .addbtn { justify-self: stretch; } .covergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .covertile .cover.big { --cw: 128px !important; } }
.movestrip { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin: 10px 0; border-radius: 16px; background: var(--field); border: 1px dashed var(--c-blue); }
.movestrip.hidden { display: none; }
.movestrip span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.movestrip button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--lc, var(--line)); background: none; color: var(--ink); cursor: pointer; }
.movestrip button.over { background: var(--lc); color: #fff; }

/* share cards on Clubs sit at their own height, evenly spaced */
.passgrid { grid-auto-rows: auto !important; }
@media (min-width: 761px) { .passgrid { align-items: stretch !important; } }
/* dark mode: every light box follows the dark surfaces */
:root[data-theme="dark"] .herocard, :root[data-theme="dark"] .nbentry, :root[data-theme="dark"] .msg .bub:not(.invite), :root[data-theme="dark"] .coveradd,
:root[data-theme="dark"] .ovbook, :root[data-theme="dark"] .nowcard, :root[data-theme="dark"] .joincard, :root[data-theme="dark"] .lcard.picktint,
:root[data-theme="dark"] .caltile, :root[data-theme="dark"] .meetbadge, :root[data-theme="dark"] .hlrow, :root[data-theme="dark"] .cmpdoc { background: var(--field) !important; border-color: var(--line) !important; color: var(--ink); }
:root[data-theme="dark"] .msg.mine .bub { background: #3a2620 !important; }
:root[data-theme="dark"] .goalitem.won, :root[data-theme="dark"] .wonitem { background: #1f2a22 !important; border-color: #2f4034 !important; }
:root[data-theme="dark"] .goalitem.won .goalhead b, :root[data-theme="dark"] .wonitem b { color: var(--ink) !important; }
:root[data-theme="dark"] .wonitem span { color: #8fb897; }
:root[data-theme="dark"] .nav button[aria-current="true"]:not(#nav-club) { background: var(--tint-2) !important; color: #b9d0d6 !important; box-shadow: none !important; outline: 0 !important; }
:root[data-theme="dark"] #nav-club:not([aria-current="true"]) { background: #3a2620 !important; color: #e9a58c !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.3) !important; }
:root[data-theme="dark"] .savepill, :root[data-theme="dark"] .topbtns .savepill { background: var(--field) !important; color: #b9d0d6 !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .libselbar { background: #0f0e0c; }
:root[data-theme="dark"] .herocard b { color: var(--ink) !important; }
:root[data-theme="dark"] .herocard .mbar, :root[data-theme="dark"] .goalitem .mbar { background: var(--tint-2) !important; }
/* the writing sheet keeps its own paper: fields never draw a box of their own */
.wssheet input:not([type=checkbox]), .wssheet textarea, .wssheet [contenteditable], :root[data-theme="dark"] .wssheet input[type=text], :root[data-theme="dark"] .wssheet input:not([type]), :root[data-theme="dark"] .wssheet textarea { background: transparent !important; border-color: transparent !important; color: var(--wsink) !important; }
:root[data-theme="dark"] .wssheet { border-color: rgba(255,255,255,.06); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
:root[data-theme="dark"] .wsed { background: rgba(12,11,9,.55); }
:root[data-theme="dark"] .wssheet .wsitem input[type=checkbox]:not(:checked) { background: transparent !important; border-color: var(--wssoft) !important; }
:root[data-theme="dark"] body.nb-lined #clubNotebook, :root[data-theme="dark"] body.nb-lined .nbtext { background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(255,255,255,.07) 29px 30px) !important; }
/* offline mode choices: quiet chips, teal when allowed */
.offallow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.offallow span { font-size: 12.5px; color: var(--ink-soft); margin-right: 4px; }
.offchip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; width: auto; }
.offchip.on { border-color: var(--c-blue); color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 10%, transparent); }
/* passphrase sheet and lock screen */
.bcpass { z-index: 400; }
.bcpass .bcpassin { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 11px 14px; font: inherit; font-size: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--field, #fff); color: var(--ink); }
.bcpass .bcpassmsg { display: block; min-height: 18px; margin: 0 0 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.bcpass .row2 { align-items: center; }
.bcpass .bcpasslink { margin-right: auto; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 13px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; width: auto; }
.bclockscreen { background: var(--bg, #f8f4f2) !important; backdrop-filter: none !important; }
.bclockscreen .modal-box { box-shadow: none; background: transparent; border: 0; max-width: 340px; text-align: center; }
.bclockscreen .row2 { justify-content: center; flex-direction: column-reverse; gap: 12px; }
.bclockscreen .yes { width: 100%; }
.bclockmark { font-family: Newsreader, Georgia, serif; font-size: 40px; font-weight: 500; letter-spacing: -0.5px; margin: 0 0 18px; }
.bclockmark span:first-child { color: var(--c-blue, #3f6f7a); }
.bclockmark span:last-child { color: var(--c-accent, #c8765a); }
.bclockscreen .bcpasslink { margin: 0 auto; }

/* the sheet shown before anything goes to AI */
.aisheet .modal-box { max-width: 640px; width: calc(100% - 32px); box-sizing: border-box; }
.aisheet h4 { margin: 0 0 10px; font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; color: var(--ink); }
.aisheet .aipriv p { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.aisheet .aipriv { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aisheet .aipriv p { flex: 0 0 100%; }
.aisheet .aiview { max-height: min(46vh, 420px); overflow: auto; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--field, #fff); font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.aisheet .aiview img { display: block; max-width: 100%; max-height: 40vh; margin: 0 auto; border-radius: 8px; }
.aisheet .aiw { cursor: pointer; border-radius: 4px; }
@media (hover: hover) { .aisheet .aiw:hover { background: color-mix(in srgb, var(--c-blue) 14%, transparent); } }
.aisheet .aitag { cursor: pointer; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--c-blue) 16%, transparent); color: var(--c-blue); font-weight: 600; white-space: nowrap; }
.aisheet .aitip { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.aisheet .row2 { margin-top: 14px; flex-wrap: wrap; }
.aisheet .row2 .secondary { width: auto; }
.aisheet .row2 .yes { order: 3; }
.aisheet .row2 .secondary { order: 2; }
@media (max-width: 560px) {
  .aisheet .row2 { flex-direction: column; align-items: stretch; }
  .aisheet .row2 button, .aisheet .row2 .secondary { width: 100%; }
  .aisheet .row2 .yes { order: 1; } .aisheet .row2 .secondary { order: 2; } .aisheet .row2 button:first-child { order: 3; }
}

/* ===== v161: Part 1 fixes ===== */
/* the reader's cover strip hides like everything else (its display rule came after .hidden and always won) */
.rdshelf.hidden { display: none !important; }
/* a quiet way out of the book, top left */
.rdexit { position: absolute; z-index: 3; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rline); background: transparent; color: var(--rsoft); cursor: pointer; opacity: .75; display: grid; place-items: center; padding: 0; transition: opacity .2s ease, background .2s ease; }
.rdexit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rdexit:hover { opacity: 1; background: var(--rchip); }
.reader.inking .rdexit, .reader.chrome .rdexit { opacity: 0; pointer-events: none; }
/* panels opened from the menu have a way back to it */
.rdpback { flex: none; display: grid; place-items: center; }
.rdpback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rdpanel.frommenu .rdphead h3 { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .rdpanel.frommenu:not(.compose) { top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; height: auto; left: 10px; right: 10px; width: auto; }
}
/* Planner add sheet: scrolls up and down only, and nothing is wider than the sheet */
.daybox { overflow-x: hidden !important; overscroll-behavior: contain; touch-action: pan-y; }
.daybox select, .daybox input, .daybox textarea, .daybox .schedgrid > *, .daybox .schedquick > div { max-width: 100%; min-width: 0; box-sizing: border-box; }
.daybox .schedgrid label { min-width: 0; }
/* no colored bands down the left of cards; club notebook entries and chat keep theirs */
.entry, .cmpdoc, .session, .session.act, .dayitem, .dsess, .rdpassage, .rdq.plain { border-left: 1px solid transparent !important; box-shadow: none; }
.entry { padding-left: 0 !important; }
.entry.highlight { padding-left: 0 !important; }
.session, .session.act, .dayitem, .dsess, .cmpdoc { border-left-color: var(--line) !important; }
.rdpassage, .rdq.plain { border-left: 0 !important; padding-left: 0 !important; font-style: italic; }
.cmpdoc small { color: var(--dk, var(--ink-faint)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
/* All highlights: bigger covers and a clear highlighter stroke */
.hltop { gap: 14px !important; align-items: flex-start !important; }
.hltop .cover { box-shadow: 0 6px 14px rgba(30,40,50,.18); }
.hlwho { padding-top: 4px; }
.hlwho b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 17px !important; white-space: normal !important; line-height: 1.25; }
.hlrow mark { background: linear-gradient(transparent 38%, color-mix(in srgb, var(--hc) 62%, transparent) 38%, color-mix(in srgb, var(--hc) 62%, transparent) 94%, transparent 94%) !important; }
:root[data-theme="dark"] .hlrow mark { background: linear-gradient(transparent 38%, color-mix(in srgb, var(--hc) 38%, transparent) 38%, color-mix(in srgb, var(--hc) 38%, transparent) 94%, transparent 94%) !important; }
/* an open shelf: groups sit side by side on wide screens, so a few books still fill the row */
#coverRows { display: flex; flex-wrap: wrap; gap: 6px 44px; align-items: flex-start; }
#coverRows > :not(.covergroup) { flex: 1 0 100%; }
.covergroup { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.covergroup.many { flex: 1 1 100%; }
.covergroup .covergrid { display: flex; flex-wrap: wrap; gap: 22px 18px; }
.covergroup .covertile { width: 150px; }
@media (max-width: 560px) {
  #coverRows { display: block; }
  .covergroup .covergrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .covergroup .covertile { width: auto; }
}
/* remove a book from its cover */
.tilekill { position: absolute; top: 6px; left: 6px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(20,24,28,.62); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; padding: 0; }
.covertile:hover .tilekill, .tilekill:focus-visible { opacity: 1; }
@media (hover: none) { .tilekill { opacity: .85; } }
/* an empty shelf asks for a book or to go */
.emptyacts { display: flex !important; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; align-self: center; }
.emptyact { font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--c-blue); cursor: pointer; }
.emptyact.add { background: var(--action); border-color: var(--action); color: #fff; }
/* the small Undo note on the site */
.siteundo { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #2c3438; color: #fff; font-size: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: calc(100% - 24px); }
.siteundo.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.siteundo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siteundo button { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; background: #fff; color: #2c3438; font: inherit; font-weight: 700; cursor: pointer; }
/* Shelves and Read: 2 clear doors */
.shelftabs { gap: 6px !important; padding: 6px !important; border-radius: 18px !important; background: var(--field) !important; border: 1px solid var(--line) !important; box-shadow: 0 6px 18px rgba(40,44,52,.06); }
.shelftabs button { font-size: 16px !important; font-weight: 700 !important; padding: 11px 30px !important; border-radius: 13px !important; color: var(--ink-soft) !important; background: transparent !important; box-shadow: none !important; }
.shelftabs button[aria-selected="true"] { background: var(--c-blue) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(63,111,122,.28) !important; }
@media (min-width: 700px) { .shelftabs button { font-size: 18px !important; padding: 14px 52px !important; min-width: 190px; } }
/* the writing sheet's kind label sits a little lower */
.wstop { padding-top: calc(22px + env(safe-area-inset-top, 0px)) !important; }
/* Stats: a book in the day list opens */
.pdrow.canopen { cursor: pointer; border-radius: 12px; transition: background .15s ease; }
.pdrow.canopen:hover { background: var(--surface-2); }
.pdrow.canopen .pdmid b::after { content: 'Read'; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--action); color: #fff; font-size: 11.5px; font-weight: 700; vertical-align: 2px; }
/* the library's quiet panels close with their own × */
#libImport, #dbxCard { position: relative; }
.libcardx { position: absolute; top: 12px; right: 12px; z-index: 2; }
#libImport .sechead { padding-right: 40px; }
:root[data-theme="dark"] .shelftabs button[aria-selected="true"] { color: #172024 !important; box-shadow: none !important; }
/* rows marked hidden stay hidden inside forms and setting lists */
.clubgrid > .hidden, .togglelist > .hidden, .listframe .progtext.hidden { display: none !important; }
#coverRows > .coveradd { margin-right: max(0px, calc(100% - 620px)); }
/* v162: covers made for books without art */
.cover.art { justify-content: flex-end; gap: calc(var(--cw, 48px) * .03); padding: calc(var(--cw, 48px) * .1); background: #23454d; }
.cover .artsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover.art .ct, .cover.art .ca { position: relative; z-index: 1; color: #f7efe3; }
.cover.art .ct { font-size: calc(var(--cw, 48px) * .145); line-height: 1.1; font-weight: 500; -webkit-line-clamp: 3; }
.cover.art .ca { font-size: calc(var(--cw, 48px) * .085); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .72; }
.cover.art img ~ .ct, .cover:not(.art) .cm { display: none; }
/* Free classics: bigger covers */
.freegrid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important; gap: 26px 18px !important; }
.freebook { padding: 8px !important; }
.freebook:hover { background: var(--surface-2) !important; }
.freebook .fcov { width: 140px !important; height: 210px !important; box-shadow: 0 10px 22px rgba(30,40,50,.2) !important; }
.freebook .fcov .cover { --cw: 140px !important; }
.freebook > b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 15.5px !important; }
@media (max-width: 560px) {
  .freegrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .freebook .fcov { width: 120px !important; height: 180px !important; }
  .freebook .fcov .cover { --cw: 120px !important; }
}
.cover.art { text-align: left; }
.cover.art .ct { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.cover.art { padding: 0 !important; }
.cover .artpanel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(var(--cw, 48px) * .03); padding: calc(var(--cw, 48px) * .09) calc(var(--cw, 48px) * .1) calc(var(--cw, 48px) * .1); }
.cover.art.longword .ct { font-size: calc(var(--cw, 48px) * .118); }
/* Next meeting: a calendar leaf on a plain card */
.ovmeet { background: var(--field) !important; border-color: var(--line) !important; }
.ovcal.leaf { display: flex; align-items: center; gap: 18px; }
.meetleaf { flex: none; width: 76px; border-radius: 16px; overflow: hidden; background: var(--field); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(40,44,52,.08); text-align: center; }
.meetleaf span { display: block; padding: 5px 0 4px; background: var(--c-blue); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.meetleaf b { display: block; padding: 4px 0 8px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 38px; line-height: 1.05; color: var(--ink); }
.meetwhen { min-width: 0; }
.meetwhen .ovbig { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 26px; color: var(--ink); }
.meetwhen .ovtime { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meetfaces { display: flex; margin-top: 10px; }
.meetfaces .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--field); }
.meetjoin { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px !important; padding: 10px 18px !important; border-radius: 999px; background: var(--ink) !important; color: var(--field) !important; font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: none !important; }
.meetjoin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.meetplace { margin-top: 12px !important; color: var(--ink-soft) !important; font-size: 14px; }
.meetjoin { background: #26343a !important; color: #fff !important; }
.meetjoin:hover { background: #1b262b !important; }
:root[data-theme="dark"] .meetjoin { background: #3f6f7a !important; color: #fff !important; }
.meetwhen .ovbig { color: #2f3a3f; }
:root[data-theme="dark"] .meetwhen .ovbig { color: var(--ink); }
/* the header gets more presence on computers: a fuller tab bar with the color stripe beneath it */
@media (min-width: 1100px) {
  body:not(.focus) .nav { position: relative; padding: 7px !important; gap: 4px; border-radius: 22px !important; box-shadow: 0 12px 32px rgba(40,44,52,.08) !important; }
  body:not(.focus) .nav::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: -9px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c-sage) 0 20%, var(--c-gold) 20% 40%, var(--c-blue) 40% 60%, var(--c-red) 60% 80%, var(--c-sand) 80% 100%); opacity: .75; }
  body:not(.focus) .nav button { font-size: 16px !important; font-weight: 600 !important; padding: 12px 18px !important; border-radius: 15px !important; }
  body.focus .nav button { font-size: 15.5px !important; font-weight: 600 !important; padding: 10px 16px !important; }
  body:not(.focus) .wordmark { font-size: 40px; }
}
/* the open tab wears its own color, the same in both views */
#nav-calc[aria-current="true"] { background: var(--c-blue) !important; color: #fff !important; box-shadow: none !important; }
#nav-lists[aria-current="true"] { background: var(--c-sage) !important; color: #fff !important; box-shadow: none !important; }
#nav-study[aria-current="true"] { background: var(--c-gold) !important; color: #fff !important; box-shadow: none !important; }
#nav-cal[aria-current="true"] { background: var(--c-red) !important; color: #fff !important; box-shadow: none !important; }
#nav-goals[aria-current="true"] { background: var(--c-green, #3f6f5b) !important; color: #fff !important; box-shadow: none !important; }
#nav-speed[aria-current="true"] { background: var(--c-blue) !important; color: #fff !important; box-shadow: none !important; }
#nav-settings[aria-current="true"] { background: var(--ink-soft) !important; color: #fff !important; box-shadow: none !important; }
:root[data-theme="dark"] .nav button[aria-current="true"]:not(#nav-club) { color: #151b1e !important; }
/* shelf cards: books stand on a wooden shelf */
.covershelf { grid-auto-rows: calc(var(--sw, 86px) * 1.5 + 18px) !important; gap: 0 10px !important; padding: 0 12px !important; margin: 4px -4px 6px !important; border-radius: 6px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--sw, 86px) * 1.5 + 4px), #efe3cf calc(var(--sw, 86px) * 1.5 + 4px) calc(var(--sw, 86px) * 1.5 + 6px), #d6bb93 calc(var(--sw, 86px) * 1.5 + 6px) calc(var(--sw, 86px) * 1.5 + 14px), rgba(90,60,30,.16) calc(var(--sw, 86px) * 1.5 + 14px) calc(var(--sw, 86px) * 1.5 + 18px)) !important; }
.covershelf .cover { margin-bottom: 14px !important; box-shadow: 0 -2px 10px rgba(30,40,50,.12), 3px 4px 0 rgba(90,60,30,.18) !important; }
:root[data-theme="dark"] .covershelf { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--sw, 86px) * 1.5 + 4px), #6a5846 calc(var(--sw, 86px) * 1.5 + 4px) calc(var(--sw, 86px) * 1.5 + 6px), #4d3f32 calc(var(--sw, 86px) * 1.5 + 6px) calc(var(--sw, 86px) * 1.5 + 14px), rgba(0,0,0,.3) calc(var(--sw, 86px) * 1.5 + 14px) calc(var(--sw, 86px) * 1.5 + 18px)) !important; }
#listgrid .lcard .lhead { margin-bottom: 6px !important; }
.shelftabs { margin-top: 14px !important; }
.covershelf { gap: 0 8px !important; padding: 0 6px !important; }
/* Keep reading shows a clear Read action */
.herocard .heroread { display: flex; align-items: center; margin-top: 14px; padding: 9px 26px; border-radius: 999px; background: var(--action); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 16px rgba(200,118,90,.25); width: max-content; }
.herocard:hover .heroread { filter: brightness(1.05); }
/* cards lean toward the writing pages: plain white, a hairline edge, a soft lift, serif titles */
.card { border: 1px solid var(--line) !important; box-shadow: 0 1px 2px rgba(40,44,52,.03), 0 10px 30px rgba(40,44,52,.05) !important; }
.goalitem.won, .wonitem { background: var(--field) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .card { box-shadow: none !important; }
/* checklist rows can be deleted */
.wsitem { position: relative; }
.wsdel { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--wssoft, var(--ink-faint)); font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease; padding: 0; }
.wsitem:hover .wsdel, .wsitem:focus-within .wsdel, .wsdel:focus-visible { opacity: .8; }
.wsdel:hover { opacity: 1; background: var(--wsline, var(--line)); }
@media (hover: none) { .wsdel { opacity: .6; } }
.siteundo { z-index: 400 !important; }
/* Compare spread: the notes fill the page */
html.spreadopen, html.spreadopen body { overflow: hidden !important; }
.spread { position: fixed; inset: 0; z-index: 70; background: var(--bg, #f8f4f2); display: flex; flex-direction: column; }
.sphead { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px; border-bottom: 1px solid var(--line); background: var(--field); }
.sphead h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); }
.spcount { font-size: 13px; color: var(--ink-faint); }
.spgrow { flex: 1; }
.sptab, .spbtn, .spdone { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--c-blue); cursor: pointer; }
.sptab { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.sptab[aria-expanded="true"] { background: var(--field); color: var(--c-blue); border-color: var(--line); }
.spdrawer { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-height: 34vh; overflow-y: auto; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--field); }
.spdrawer.hidden { display: none; }
.spchip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; max-width: 280px; }
.spchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spchip.doc { flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 14px; }
.spchip.doc small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.spchip.on { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue) inset; }
.spdone { margin-left: auto; }
.spboard { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.spcanvas.free { position: relative; min-width: 100%; min-height: 100%; }
.spcanvas.free .sphead2, .spcanvas.free .spcard { position: absolute; }
.sphead2 { width: 300px; }
.sphead2 b { display: block; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); }
.sphead2 b::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bk); margin-right: 8px; vertical-align: 2px; }
.sphead2 span { display: block; font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 0 17px; }
.spcard { box-sizing: border-box; padding: 12px 14px 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(40,44,52,.07); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.spcard.lifting { cursor: grabbing; box-shadow: 0 18px 40px rgba(40,44,52,.18); transform: rotate(-.6deg); }
.spcard small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bk); margin-bottom: 6px; }
.spcard p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 15.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.spcard.hl p { font-style: italic; }
.spempty { margin: 18vh auto 0; max-width: 360px; text-align: center; font-family: Newsreader, Georgia, serif; font-size: 20px; color: var(--ink-soft); }
.spcanvas.stack { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px; height: 100%; box-sizing: border-box; }
.spcol { flex: 0 0 86%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-bottom: 40px; }
.spcanvas.stack .spcard { cursor: default; touch-action: auto; user-select: text; -webkit-user-select: text; }
.spcanvas.stack .sphead2 { width: auto; margin-bottom: 4px; }
/* covers made for books without art: a painted scene above a paper panel */
.cover.art { background: #f4ede1 !important; }
.cover.art .artsvg { position: absolute; left: 0; top: 0; width: 100%; height: 66%; }
.cover.art .artpanel { margin-top: auto; min-height: 34%; justify-content: center; box-sizing: border-box; }
.cover.art .ct, .cover.art .ca { color: inherit !important; }
.cover.art .ca { opacity: .6; }
.cover.art.longerword .ct { font-size: calc(var(--cw, 48px) * .098); }
.cover.art .ct { overflow-wrap: normal; word-break: normal; }
/* the Meetings tab uses the same calendar leaf as the overview */
.meetbadge { width: 96px !important; height: auto !important; border-radius: 18px !important; overflow: hidden; padding: 0 !important; background: var(--field) !important; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(40,44,52,.08) !important; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; }
.meetbadge span { display: block; padding: 6px 0 5px; background: var(--c-blue); color: #fff !important; font-size: 12px !important; letter-spacing: .16em !important; text-align: center; }
.meetbadge b { display: block; padding: 6px 0 10px; font-family: Newsreader, Georgia, serif; font-weight: 500 !important; font-size: 44px !important; color: var(--ink) !important; text-align: center; }
.meetpreview { background: var(--field) !important; border-color: var(--line) !important; }
.meetpreview .meeth { font-family: Newsreader, Georgia, serif !important; font-weight: 500 !important; color: #2f3a3f; }
:root[data-theme="dark"] .meetpreview .meeth { color: var(--ink); }
.meetpreview .meetjoin { margin-top: 12px !important; }
/* one shelf per card; covers overlap a little when the shelf is full */
#listgrid .covershelf { grid-auto-flow: column; grid-template-rows: calc(var(--sw, 86px) * 1.5 + 18px); grid-auto-rows: 0 !important; overflow: hidden; }
#listgrid .covershelf .cover { position: relative; }
#listgrid .covershelf .cover:hover { z-index: 3; transform: translateY(-4px); transition: transform .15s ease; }
#listgrid .covershelf .emptyacts { grid-column: 1 / -1; }
/* Compare picker: even tiles in 2 groups */
.spdrawer { display: block !important; }
.spdrawer.hidden { display: none !important; }
.spgroup { margin-bottom: 10px; }
.spglabel { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.sptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.spchip { max-width: none !important; width: 100%; height: 52px; box-sizing: border-box; border-radius: 12px !important; padding: 0 12px 0 8px !important; gap: 10px !important; text-align: left; }
.spchip .cover { flex: none; height: 40px !important; width: 27px !important; border-radius: 3px; box-shadow: none !important; }
.spchip span { flex: 1; min-width: 0; font-size: 14px; }
.spchip em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-faint); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.spchip.doc { flex-direction: row !important; align-items: center !important; }
.spchip.doc small { flex: none; width: 72px; }
.spchip.on em { background: var(--c-blue); color: #fff; }
.spdone { display: block; margin: 6px 0 0 auto !important; }
/* a moved card still shows where it came from */
.spsrc { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.spsrc::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bk); }
.spsrc b { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spcard small { color: var(--ink-faint) !important; }
.spcard.kin { box-shadow: 0 0 0 2px var(--bk), 0 10px 26px rgba(40,44,52,.14); }
.sphead2 { cursor: default; }
/* Write: one open place for every kind of writing, books included */
.wsinvite { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; min-height: 150px; margin: 14px 0 18px; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--field); box-shadow: 0 1px 2px rgba(40,44,52,.03), 0 12px 30px rgba(40,44,52,.05); cursor: text; text-align: left; font: inherit;
  background-image: repeating-linear-gradient(180deg, transparent 0 29px, var(--line) 29px 30px); background-position: 0 62px; }
.wsinvite span { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 26px; color: var(--ink-faint); }
.wsinvite small { font-size: 13px; color: var(--ink-faint); }
.wsinvite:hover span { color: var(--ink-soft); }
.wsbook { margin: 0 0 18px; }
.wsbooklab { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
body.writing #wsCard > :not(.wsbook):not(.sechead) { display: none !important; }
body.writing #wsCard .wsbooklab { display: none; }
body.writing #study-home > .card.notestart { display: block; }
.wsinvite { background-image: none !important; min-height: 130px; justify-content: center; }
/* the margin scene can be changed from the Text row, on screens wide enough to show it */
.rdscene { display: none; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rline); font-size: 13px; color: var(--rsoft); }
@media (min-width: 1100px) { .rdscene { display: flex; } }
.rdscene span { flex: 1; }
.rdscene b { min-width: 96px; text-align: center; font-weight: 600; color: var(--rink); }
.rdscene button { border: 1px solid var(--rline); background: transparent; color: var(--rink); border-radius: 999px; font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; }
.rdscene button#rdScPrev, .rdscene button#rdScNext { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; }
/* Compare: no dashed boxes; the tray is a quiet solid surface that brightens when something is dragged over it */
.tray { border: 1px solid var(--line) !important; background: var(--surface-2) !important; min-height: 96px !important; }
.tray.over { border-color: var(--c-blue) !important; background: var(--field) !important; box-shadow: 0 0 0 3px rgba(63,111,122,.12); }
.card.dropping { outline: 2px solid var(--c-blue) !important; outline-offset: -4px; }
.lcard.new { border-style: solid !important; }
.addcov { border-style: solid !important; border-width: 1px !important; }
/* places that frame a cover follow the 4 sizes */
.covergroup .covertile { width: 166px; }
.freebook .fcov { width: 150px !important; height: 225px !important; }
@media (max-width: 599px) { .freebook .fcov { width: 116px !important; height: 174px !important; } .covergroup .covertile { width: auto; } }
.nowchip { grid-template-columns: 96px minmax(0, 1fr) auto !important; }
@media (max-width: 560px) { .nowchip { grid-template-columns: 84px minmax(0, 1fr) !important; } }
.spchip .cover { width: var(--cw) !important; height: calc(var(--cw) * 1.5) !important; }
.spchip { height: 56px; }
/* Compare as a compact bar joined to Your books */
.card.cmpbar { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: 0 !important; box-shadow: none !important; padding-bottom: 12px !important; }
.card.cmpbar #sidebyside, .card.cmpbar #focusNote, .card.cmpbar #cmpDocs { display: none !important; }
.card.cmpbar .tray { min-height: 0 !important; padding: 10px 12px !important; }
.card.cmpbar .tools { margin-top: 8px; }
.card.afterbar { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 1px solid var(--line) !important; }
.card.cmpbar .popbtn { background: var(--c-blue) !important; color: #fff !important; border-color: var(--c-blue) !important; }
.splitbtn { margin-right: 10px; font-size: 14px; }
/* shelf cards: 1 shelf for a short list, 2 shelves of 5 (4 on phones) for a longer one */
#listgrid .covershelf { grid-auto-flow: row !important; grid-template-rows: none !important; grid-auto-rows: calc(var(--sw, 86px) * 1.5 + 18px) !important; overflow: visible !important; justify-content: start; }
#listgrid .covershelf .moreshelf { align-self: center; justify-self: center; margin-bottom: 14px; width: var(--sw); height: calc(var(--sw) * 1.5); border-radius: 6px; background: var(--surface-2); display: grid !important; place-items: center; font-size: 16px !important; color: var(--ink-soft); }
/* frames follow the 3 cover sizes */
.nowchip { grid-template-columns: 140px minmax(0, 1fr) auto !important; }
@media (max-width: 560px) { .nowchip { grid-template-columns: 112px minmax(0, 1fr) !important; } }
.freebook .fcov { width: 140px !important; height: 210px !important; }
@media (max-width: 599px) { .freebook .fcov { width: 112px !important; height: 168px !important; } }
.covergroup .covertile { width: 156px; }
/* starred highlights */
.hlib.on svg { fill: #d9a441; stroke: #b98524; }
.hlrow.starred { border-color: #e7cf95 !important; box-shadow: 0 0 0 1px #efdcae inset; }
.hlchip.star.on { color: #b98524 !important; border-color: #e7cf95 !important; }
/* Study: decks */
.deckmake { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 18px; }
.deckmake select { flex: 1 1 260px; min-width: 0; }
.deckmake button { width: auto !important; margin: 0 !important; }
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.decktile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 150px; padding: 18px 18px 16px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line), 0 5px 0 -1px var(--field), 0 5px 0 0 var(--line), 0 10px 22px rgba(40,44,52,.06); }
.decktile b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); padding-right: 24px; }
.decktile span { font-size: 12.5px; color: var(--ink-faint); }
.decktile em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--action); margin-top: 6px; }
.decktile em.done { color: var(--c-green, #3f6f5b); }
.decktile .deckacts { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.decktile .deckacts button { width: auto !important; margin: 0 !important; padding: 7px 16px !important; font-size: 14px; }
.decktile .kill { position: absolute; top: 10px; right: 10px; }
.studyov { position: fixed; inset: 0; z-index: 72; background: var(--bg, #f8f4f2); display: flex; flex-direction: column; }
.studyov.hidden { display: none; }
.sthead { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 8px; font-family: Newsreader, Georgia, serif; font-size: 20px; color: var(--ink); }
.ststage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px 18px 40px; overflow-y: auto; }
.stprog { margin: 0; font-size: 13px; color: var(--ink-faint); }
.stcard { width: min(620px, 100%); min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 34px 36px; border-radius: 24px; border: 1px solid var(--line); background: var(--field); box-shadow: 0 18px 46px rgba(40,44,52,.1); cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.stq { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 23px; line-height: 1.45; white-space: pre-wrap; }
.sta { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: Newsreader, Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap; }
.sta.hidden, .strate.hidden { display: none; }
.stcard small { font-size: 12.5px; color: var(--ink-faint); }
.strate { display: flex; gap: 10px; }
.strate button { width: auto !important; margin: 0 !important; min-width: 96px; }
.stdone { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.stdone b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 30px; color: var(--ink); }
.stdone span { color: var(--ink-soft); max-width: 420px; }
.stdone button { width: auto !important; margin-top: 8px !important; }
.stedit { width: min(820px, 100%); margin: 0 auto; flex: 1; overflow-y: auto; padding: 8px 18px 40px; box-sizing: border-box; }
.stname { width: 100%; font-family: Newsreader, Georgia, serif; font-size: 26px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 6px 0; margin-bottom: 14px; color: var(--ink); }
.stname:focus { outline: none; border-color: var(--c-blue); }
.strow { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.strow textarea { font-family: Newsreader, Georgia, serif; font-size: 16px; line-height: 1.45; min-height: 64px; resize: vertical; }
.stbar { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; }
.stbar button { width: auto !important; margin: 0 !important; }
@media (max-width: 560px) { .strow { grid-template-columns: 1fr 32px; } .strow textarea:nth-child(2) { grid-column: 1; } .stcard { padding: 24px 22px; min-height: 240px; } .stq { font-size: 20px; } }
.decktile .kill { border: 0 !important; background: transparent !important; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-faint); font-size: 18px; cursor: pointer; }
.decktile .kill:hover { background: var(--surface-2) !important; }
/* an open shelf: rows of 5 on wooden shelves (2 on phones), groups one under another, nothing overlapping */
#coverRows { display: block !important; }
.covergroup { max-width: none !important; }
.covergroup .covergrid { display: grid !important; grid-template-columns: repeat(5, 140px); gap: 30px 22px !important; justify-content: start; }
.covergroup .covertile { width: auto !important; position: relative; }
.covergroup .covertile .cover { position: relative; z-index: 1; }
.covergroup .covertile::before { content: ''; position: absolute; z-index: 0; left: -12px; right: -12px; top: calc(var(--shelfh, 210px) - 4px); height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #efe3cf 0 2px, #d6bb93 2px 9px, rgba(90,60,30,.16) 9px 12px); }
:root[data-theme="dark"] .covergroup .covertile::before { background: linear-gradient(180deg, #6a5846 0 2px, #4d3f32 2px 9px, rgba(0,0,0,.3) 9px 12px); }
.covergroup .covertile b { margin-top: 14px !important; }
@media (min-width: 600px) and (max-width: 900px) { .covergroup .covergrid { grid-template-columns: repeat(4, 140px); } }
@media (max-width: 599px) { :root { --shelfh: 168px; } .covergroup .covergrid { grid-template-columns: repeat(2, 112px) !important; gap: 26px 28px !important; justify-content: space-evenly; } }
/* the remove button is always there, small and quiet, and never opens the book */
.tilekill { opacity: .9 !important; width: 24px !important; height: 24px !important; font-size: 15px !important; top: 6px !important; right: 6px !important; left: auto !important; }
.covertile .donecheck { right: auto !important; left: 6px !important; }
/* badges sit at the top of a cover so they never cover its title */
.covertile .cover .fmt { top: 6px !important; bottom: auto !important; left: 6px !important; }
.covertile .donecheck { top: 34px !important; left: 6px !important; }
/* study side panel beside the page on computers */
.rdside { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: 380px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 18px; background: var(--rchip); border-left: 1px solid var(--rline); color: var(--rink); overflow: hidden; }
.rdside.hidden { display: none; }
.reader.sided .readstage { right: 380px !important; }
.reader.sided .rdmark, .reader.sided .readfoot, .reader.sided .rdplace { left: calc(50% - 190px) !important; }
.reader.sided .rdmap { right: 380px; }
.rdsidehead { display: flex; align-items: center; justify-content: space-between; }
.rdsidehead b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 21px; }
.rdsidewrite { display: flex; flex-direction: column; gap: 8px; }
.rdsidewrite small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rsoft); }
.rdsidewrite textarea { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; border-radius: 12px; border: 1px solid var(--rline); background: transparent; color: var(--rink); font-family: Newsreader, Georgia, serif; font-size: 16px; line-height: 1.5; padding: 10px 12px; }
.rdsidewrite textarea:focus { outline: none; border-color: var(--rsoft); }
.rdsidewrite button { align-self: flex-end; border: 1px solid var(--rline); background: transparent; color: var(--rink); border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rdsidelist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.rdsideitem { text-align: left; border: 1px solid var(--rline); background: transparent; color: var(--rink); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
.rdsideitem.here { border-color: var(--rsoft); }
.rdsideitem small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rsoft); margin-bottom: 4px; }
.rdsideitem p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rdsideitem.hl p { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--hc, #f5cf6b) 35%, transparent) 55%); }
.rdsideitem.star { border-color: #c9a24e; }
.rdsiderow { display: none; }
@media (min-width: 1100px) { .rdsiderow { display: flex; } }
/* scanned PDF pages */
.rdscan { position: absolute; z-index: 4; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); border: 1px solid var(--rline); background: var(--rchip); color: var(--rink); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: var(--rshadow); }
.rdscan.hidden, .reader.chrome .rdscan, .reader.inking .rdscan { display: none; }
.reader.sided .rdscan { left: calc(50% - 190px); }
.ocrtext { white-space: pre-wrap; font-family: Newsreader, Georgia, serif; font-size: 17px; line-height: 1.6; max-height: 60vh; overflow-y: auto; user-select: text; -webkit-user-select: text; padding: 4px 2px 12px; }
.ocrbar { display: flex; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rline); }
.ocrbar button { border: 1px solid var(--rline); background: transparent; color: var(--rink); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
/* writing paper swatches: 6 light over 6 dark */
.wspapers { display: grid !important; grid-template-columns: repeat(6, 24px); gap: 8px 10px; }
/* the writing sheet can fill the whole window */
.wsmax { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--wssoft); cursor: pointer; display: grid; place-items: center; padding: 0; }
.wsmax svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wsmax:hover { background: var(--wsline); color: var(--wsink); }
.wssheet.max { inset: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
.wssheet.max .wspage { padding-left: clamp(24px, 12vw, 220px) !important; padding-right: clamp(24px, 12vw, 220px) !important; }
@media (max-width: 560px) { .wsmax { display: none; } }
/* Learn */
.learncard { margin-top: 18px; }
.lrnlevels { width: max-content; max-width: 100%; margin: 4px 0 16px; overflow-x: auto; }
.lrntiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lrntile { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); font: inherit; cursor: pointer; color: var(--ink); }
.lrntile b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 19px; }
.lrntile span { font-size: 12.5px; color: var(--ink-faint); }
.lrntile.on { border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue) inset; }
.lrnpassage { margin-top: 16px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--field); }
.lrntext { margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-size: 20px; line-height: 1.65; color: var(--ink); }
.lrnpassage.lv-start .lrntext { font-size: 23px; line-height: 1.75; }
.lrnpassage.lv-adv .lrntext { font-size: 18.5px; }
.lrnwords { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lrnword { font: inherit; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.lrnq { margin: 0 0 14px; }
.lrnq p { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.lrnopts { display: flex; flex-wrap: wrap; gap: 8px; }
.lrnopts button { font: inherit; font-size: 14.5px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.lrnopts button.on { border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue) inset; }
.lrnopts button.right { border-color: #4f8a64; background: #eaf3ec; color: #24492f; }
.lrnopts button.wrong { border-color: #c77b63; background: #f8ebe6; color: #6e3322; }
:root[data-theme="dark"] .lrnopts button.right { background: #24382b; color: #cfe6d5; }
:root[data-theme="dark"] .lrnopts button.wrong { background: #3d2a24; color: #f1d2c7; }
.lrncheck { width: auto !important; margin: 6px 0 0 !important; }
.lrnres { margin: 10px 0 0; color: var(--ink-soft); }
.lrnprompts, .lrntogether { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lrnprompt { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); }
.lrnprompt b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--ink); }
.lrnprompt span { font-size: 12.5px; color: var(--ink-faint); }
.lrnprompt button { align-self: flex-start; width: auto !important; margin: 6px 0 0 !important; }
.lrngroup { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); font: inherit; cursor: pointer; }
.lrngroup b { color: var(--action); font-size: 15px; }
.lrngroup span { font-size: 13px; color: var(--ink-soft); }
/* reading speed cards say less */
.speedcard .k, .speedcard .src, .speedcard .when { display: none !important; }
.card.goalsreading { margin-top: 18px; }
.verline { margin: -6px 0 14px; text-align: center; font-size: 12px; color: var(--ink-faint); }
/* Reading now: a compact box of 2 rows of 3 that swipes sideways for more */
#nowrow { display: grid !important; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 28px) / 3); gap: 12px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 4px; }
#nowrow::-webkit-scrollbar { display: none; }
#nowrow.paged:not(.atend) { -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
#nowrow .nowchip { scroll-snap-align: start; grid-template-columns: 80px minmax(0, 1fr) !important; grid-template-rows: auto auto auto; gap: 6px 12px !important; padding: 10px !important; min-height: 0; }
#nowrow .nowchip .cover { grid-row: 1 / span 3 !important; }
#nowrow .nowchip .nowbody { grid-column: 2 !important; align-self: start !important; }
#nowrow .nowchip .nowbody b { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#nowrow .nowchip .nowbody span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#nowrow .nowchip .nwhen { display: none !important; }
#nowrow .nowchip .readpill { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; padding: 5px 12px !important; font-size: 12.5px !important; }
#nowrow .nowchip .nowarrows { grid-column: 2 !important; grid-row: 3 !important; justify-self: start !important; }
#nowrow .nowchip .nownum { width: 20px; height: 20px; font-size: 11px; left: 6px; top: 6px; }
.nowdots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 2px; }
.nowdots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.nowdots button.on { background: var(--c-blue); width: 20px; border-radius: 4px; transition: width .2s ease; }
@media (max-width: 599px) { #nowrow { grid-auto-columns: 100%; } #nowrow .nowchip { grid-template-columns: 64px minmax(0, 1fr) !important; } }
/* Planner: pick several days, and a small cheer when it is done */
.scheddays { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.scheddays span { font-size: 13.5px; color: var(--ink-soft); margin-right: 6px; }
.scheddays button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; }
.scheddays button[aria-pressed="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.scheddays button:disabled:not(.me) { opacity: .35; cursor: default; }
.scheddays button.me { cursor: default; }
.daybox { position: relative; }
.schedok { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: var(--field); border-radius: inherit; animation: okfade .25s ease both; }
.schedok svg { width: 84px; height: 84px; fill: none; stroke: var(--c-green, #3f6f5b); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.schedok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: okdraw .5s ease-out forwards; }
.schedok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: okdraw .35s .4s ease-out forwards; }
.schedok b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 26px; color: var(--ink); animation: okup .4s .35s ease both; }
.schedok span { max-width: 360px; font-size: 14px; color: var(--ink-soft); animation: okup .4s .45s ease both; }
@keyframes okdraw { to { stroke-dashoffset: 0; } }
@keyframes okfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes okup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schedok circle, .schedok path { animation: none; stroke-dashoffset: 0; } }
.wspapers { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.wspapers .wsbreak { flex-basis: 100%; height: 0; }
.wsswatch { width: 28px !important; height: 28px !important; }
/* writing width: a chosen column, centered */
.wssheet .wspage, .wssheet.ws-poem .wspage, .wssheet.ws-story .wspage, .wspage, .ws-poem .wspage, .ws-story .wspage { max-width: var(--wsmax, 760px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; box-sizing: border-box; }
.wssheet.max .wspage { padding-left: 28px !important; padding-right: 28px !important; }
@media (max-width: 560px) { .wspage { padding-left: 18px !important; padding-right: 18px !important; } }
#wsType { grid-template-columns: repeat(4, 1fr); }
/* rich writing */
.wsrich { min-height: 60vh; outline: none; white-space: pre-wrap; word-wrap: break-word; cursor: text; }
.wsrich.isempty::before { content: attr(data-ph); color: var(--wssoft); font-style: italic; pointer-events: none; position: absolute; }
.wsrich h2 { font-family: inherit; font-weight: 600; font-size: 1.35em; line-height: 1.3; margin: 1.1em 0 .4em; }
.wsrich blockquote { margin: .8em 0; padding: .1em 0 .1em 1.1em; border-left: 2px solid var(--wsline); font-style: italic; color: var(--wssoft); }
.wsrich ul, .wsrich ol { margin: .4em 0 .6em; padding-left: 1.5em; white-space: normal; }
.wsrich li { margin: .15em 0; }
.wsrich hr { border: 0; height: 1.6em; margin: 1.2em 0; text-align: center; overflow: visible; }
.wsrich hr::after { content: '\2042'; color: var(--wssoft); font-size: 1.1em; }
.wstoolsbtn { font-family: Newsreader, Georgia, serif !important; font-size: 17px !important; font-weight: 600; width: auto !important; padding: 0 10px !important; border-radius: 999px !important; }
.wstoolsbtn[aria-pressed="true"] { background: var(--wsline) !important; color: var(--wsink) !important; }
.wsrichbar { position: sticky; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 5px; border-radius: 999px; background: var(--wsbg); border: 1px solid var(--wsline); box-shadow: 0 10px 30px rgba(20,24,28,.14); overflow-x: auto; scrollbar-width: none; }
.wsrichbar.hidden { display: none; }
.wsrichbar button { flex: none; border: 0; background: transparent; color: var(--wsink); font: inherit; font-size: 14px; padding: 7px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.wsrichbar button:hover { background: var(--wsline); }
.wsrichbar button.on { background: var(--wsink); color: var(--wsbg); }
.wsrichbar button[data-cmd="bold"] { font-weight: 800; }
.wsrichbar button[data-cmd="italic"] { font-style: italic; font-family: Newsreader, Georgia, serif; font-size: 16px; }
.wsrichbar button[data-cmd="underline"] { text-decoration: underline; }
.wsrichbar button[data-cmd="strikeThrough"] { text-decoration: line-through; }
.wsrichbar i { flex: none; width: 1px; height: 18px; background: var(--wsline); margin: 0 3px; }
.wsdark .wsrichbar { box-shadow: 0 10px 30px rgba(0,0,0,.4); }
/* want-to-read stars under each cover */
.wantstars { display: flex; justify-content: center; gap: 1px; margin-top: 4px; }
.wantstars button { width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; color: var(--line); font-size: 17px; line-height: 20px; }
.wantstars button::before { content: '\2605'; }
.wantstars button.full { color: #d9a441; }
.wantstars button.half::before { background: linear-gradient(90deg, #d9a441 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.covertile:not(:hover) .wantstars:not(:has(.full, .half)) { opacity: .55; }
/* book notes paper and fill screen */
.notepapers { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
#writer.tinted, #writer.tinted .writer-body { background: var(--wbg) !important; color: var(--wink) !important; }
#writer.tinted .writer-body::placeholder { color: var(--wsoft); }
#writer.tinted.wdark .toolbar button, #writer.tinted.wdark select, #writer.tinted.wdark .wherebar select, #writer.tinted.wdark .wherebar input, #writer.tinted.wdark .writingabout { color: var(--wink) !important; background: transparent !important; border-color: var(--wline) !important; }
#writer.full.maxed { inset: 0 !important; border-radius: 0 !important; max-width: none !important; width: auto !important; }
#writer.full.maxed .writer-body { max-width: 900px; margin-left: auto; margin-right: auto; display: block; }
/* Plan pages */
.planed { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.planrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.planf { display: flex; flex-direction: column; gap: 6px; }
.planf span, .planlab { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wssoft); }
.planf input { font: inherit; font-family: var(--wsface, Newsreader, Georgia, serif); font-size: calc(18px * var(--wsscale, 1)); color: var(--wsink); background: transparent; border: 0; border-bottom: 1px solid var(--wsline); border-radius: 0; padding: 6px 0; }
.planf input:focus { outline: none; border-bottom-color: var(--wssoft); }
.planneed { display: flex; flex-direction: column; gap: 2px; }
.planitem { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--wsline); padding: 4px 0; }
.planitem input[type=checkbox] { width: 20px; height: 20px; accent-color: #c4901f; }
.planitem input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--wsink); font: inherit; font-family: var(--wsface, Newsreader, Georgia, serif); font-size: calc(17px * var(--wsscale, 1)); padding: 6px 0; }
.planitem input.planby { flex: 0 0 110px; font-family: inherit; font-size: 14px; color: var(--wssoft); text-align: right; }
.planitem input:focus { outline: none; }
.planitem.done input[type=text]:not(.planby) { text-decoration: line-through; color: var(--wssoft); }
.plannotes { min-height: 18vh !important; }
.planshare { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--wsline); }
.planshare select { flex: 1; min-width: 0; }
.planshare button { width: auto !important; margin: 0 !important; }
.session.act.opens { cursor: pointer; }
/* club: pinned notice and check in */
.ovpin { margin: 0 0 12px; padding: 16px 18px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(40,44,52,.05); }
.ovpin.empty { padding: 10px 18px; box-shadow: none; }
.ovpinhead { display: flex; align-items: center; justify-content: space-between; }
.ovpinhead span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--action); }
.ovpin.empty .ovpinhead span { color: var(--ink-faint); }
.ovpintext { margin: 6px 0 4px; font-family: Newsreader, Georgia, serif; font-size: 20px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.ovpin small { font-size: 12px; color: var(--ink-faint); }
.ovpinedit textarea { width: 100%; box-sizing: border-box; font-family: Newsreader, Georgia, serif; font-size: 17px; }
.ovpinrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ovpinrow button { width: auto !important; margin: 0 !important; }
.ovcheck { margin: 0 0 14px; }
.ovcheckbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ovcheckbar > span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.ovcb { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.ovcb.ok.on { background: #3f6f5b; border-color: #3f6f5b; color: #fff; }
.ovcb.hand.on { background: var(--action); border-color: var(--action); color: #fff; }
.ovchecklist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ovci { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.ovci.hand { background: rgba(200,118,90,.14); color: var(--action); font-weight: 600; }
/* club Plans tab and People extras */
#ct-plans { display: grid; gap: 14px; }
#ct-plans.hidden { display: none; }
.plancard h3, .teachbox h3 { margin: 0 0 10px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; color: var(--ink); }
.plancard input[type=text] { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.plancard .secondary, .teachbox .secondary { width: auto !important; margin: 0 !important; }
.cplan { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cplan b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 18px; color: var(--ink); }
.cplan p { margin: 4px 0; white-space: pre-wrap; font-size: 14px; color: var(--ink-soft); }
.cplan small { font-size: 12px; color: var(--ink-faint); }
.cplace { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 36px 10px 0; border-bottom: 1px solid var(--line); }
.cplace b { color: var(--ink); } .cplace span { font-size: 14px; color: var(--ink-soft); } .cplace small { font-size: 12.5px; color: var(--ink-faint); }
.cplace .wsdel, .clisthead .wsdel { position: absolute; right: 0; top: 8px; opacity: .6; }
.cplaceadd { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin-top: 10px; }
.cplaceadd input { margin: 0 !important; }
@media (max-width: 700px) { .cplaceadd { grid-template-columns: 1fr; } }
.clist { margin-bottom: 14px; }
.clisthead { position: relative; padding: 4px 0 6px; }
.clisthead b { font-size: 15px; color: var(--ink); }
.citem { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.citem span { flex: 1; min-width: 0; color: var(--ink); }
.citem.done span { text-decoration: line-through; color: var(--ink-faint); }
.citemby { flex: none; font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px dashed transparent; border-color: var(--line); background: var(--field); color: var(--c-blue); cursor: pointer; border-style: solid; }
.citemby.taken { background: rgba(63,111,122,.1); border-color: transparent; color: var(--c-blue); font-weight: 700; }
.citem .wsdel { opacity: .5; }
.citemadd { display: flex; gap: 8px; margin-top: 8px; }
.citemadd input { flex: 1; min-width: 0; margin: 0 !important; }
.meetbackup { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.teachbox { margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--field); }
.teachrow { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.teachrow b { flex: none; min-width: 90px; color: var(--ink); } .teachrow span { color: var(--ink-soft); }
#ct-plans input[type=text], #teachBox input[type=text] { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
#ct-plans input[type=text]:focus, #teachBox input[type=text]:focus { outline: none; border-color: var(--c-blue); }
#ct-plans .clist .citemadd input { border-style: solid; background: transparent; }
#ct-plans { margin-top: 14px; }
/* contacts on this device, keep a copy */
.contactrow { display: grid; grid-template-columns: 110px 1fr 1fr 1.3fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.contactrow b { font-size: 14px; color: var(--ink); }
.contactrow input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); min-width: 0; }
@media (max-width: 700px) { .contactrow { grid-template-columns: 1fr 1fr; } .contactrow b { grid-column: 1 / -1; } }
.keeprow { display: flex; gap: 10px; flex-wrap: wrap; }
.keeprow button { width: auto !important; margin: 0 !important; }
.bub.waiting { opacity: .7; }
#printBox { display: none; }
@media print {
  body.printingclub > *:not(#printBox) { display: none !important; }
  body.printingclub #printBox { display: block !important; color: #000; background: #fff; font-family: Georgia, serif; font-size: 12pt; line-height: 1.45; padding: 0; }
  #printBox h1 { font-size: 22pt; margin: 0 0 4pt; } #printBox h2 { font-size: 14pt; margin: 16pt 0 4pt; border-bottom: 1px solid #999; } #printBox h3 { font-size: 12pt; margin: 10pt 0 2pt; } #printBox p { margin: 2pt 0; }
}
/* want to read, in words */
.wantpill { margin-top: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink-faint); cursor: pointer; }
.wantpill.w5 { background: var(--action); border-color: var(--action); color: #fff; }
.wantpill.w4 { background: rgba(200,118,90,.14); border-color: transparent; color: var(--action); }
.wantpill.w3 { background: rgba(63,111,122,.12); border-color: transparent; color: var(--c-blue); }
.wantpill.w2, .wantpill.w1 { color: var(--ink-soft); }
.covertile:not(:hover) .wantpill:not([class*=" w"]) { opacity: .6; }
/* Planner: plans strip */
.planstrip { margin: 0 0 14px; }
.planstriphead { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.planstriprow { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.planchip { flex: 0 0 220px; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); font: inherit; cursor: pointer; }
.planchip small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--action); }
.planchip b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 17px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planchip span { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planshare .planlab { flex: none; }
/* votes on anything */
.voteh { margin: 0 0 4px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; color: var(--ink); }
.pollbox { margin-top: 24px; }
.pollcard { position: relative; padding: 14px 16px; margin: 10px 0; border-radius: 16px; border: 1px solid var(--line); background: var(--field); }
.pollcard > b { display: block; margin: 0 26px 8px 0; color: var(--ink); }
.pollcard small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.pollx { position: absolute; top: 10px; right: 10px; opacity: .6; }
.pollopt { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 4px 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; overflow: hidden; text-align: left; }
.pollopt i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(63,111,122,.12); z-index: 0; }
.pollopt span, .pollopt em { position: relative; z-index: 1; font-style: normal; }
.pollopt em { font-weight: 700; color: var(--ink-soft); }
.pollopt.on { border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue) inset; }
.pollnew { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; margin-top: 12px; }
.pollnew input, .normbox input { font: inherit; font-size: 14.5px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); min-width: 0; }
.pollnew button { width: auto !important; margin: 0 !important; }
@media (max-width: 700px) { .pollnew { grid-template-columns: 1fr; } }
/* meeting goals, leading and feedback */
.meetgoals .planlab { display: block; margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.leadrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leadrow span { font-size: 14px; color: var(--ink-soft); }
.leadrow button { width: auto !important; margin: 0 !important; }
.meetgoals > .secondary { margin: 0 0 6px !important; }
.mfeed { margin: 4px 0; font-size: 13px; color: var(--ink-soft); }
/* agreements */
.normrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.normrow span { flex: 1; color: var(--ink); font-family: Newsreader, Georgia, serif; font-size: 17px; }
.normrow .wsdel { opacity: .5; }
.normideas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.normideas button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--c-blue); cursor: pointer; }
#normBox .planlab { display: block; margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
#normBox input[type=text] { font: inherit; font-size: 14.5px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
#normBox .citemadd button { width: auto !important; margin: 0 !important; }
/* shared writing on the Board */
.sharedbox { margin-bottom: 16px; }
.sharedbox h3 { margin: 0 0 8px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; color: var(--ink); }
.piececard { position: relative; padding: 16px 18px; margin-bottom: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--field); }
.piececard small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.piececard > b { display: block; margin: 4px 0 6px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; color: var(--ink); }
.piecetext { margin: 0 0 8px; font-family: Newsreader, Georgia, serif; font-size: 16.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; cursor: pointer; }
.piecetext.clamped { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.piecenote { margin: 4px 0; font-size: 14px; color: var(--ink-soft); }
.piecex { position: absolute; top: 10px; right: 10px; opacity: .5; }
.piececard .citemadd input { font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.lrncats { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; align-items: center; }
.lrncats button { font: inherit; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; }
.lrncats button[aria-pressed="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.lrncats .lrnrandom { margin-left: auto; background: var(--action); border-color: var(--action); color: #fff; font-weight: 700; }
.lrnprompt b { font-size: 17px !important; }
.speedrun .passage .ref { font-size: .85em; color: var(--ink-soft); padding-left: 1.5em; text-indent: -1.5em; }
.selsearch { display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px; font: inherit; font-size: 14.5px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.piecenote q { display: block; margin: 0 0 2px; font-family: Newsreader, Georgia, serif; font-style: italic; color: var(--ink-faint); }
.piecenote { margin: 6px 0; font-size: 14px; color: var(--ink-soft); }
.agreebox { margin: 0 0 16px !important; }
.agreedoc { width: 100%; box-sizing: border-box; font-family: Newsreader, Georgia, serif; font-size: 17px; line-height: 1.55; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); padding: 12px 14px; resize: vertical; }
.agreerow { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.agreerow .secondary { width: auto !important; margin: 0 !important; }
.normideas.hidden { display: none; }
/* rate mode: how much I want to read each book, 1 to 5 */
#rateMode[aria-pressed="true"] { color: #fff; background: var(--c-blue); padding: 4px 12px; border-radius: 999px; text-decoration: none; }
.raterow { display: flex; gap: 3px; margin-top: 6px; }
.raterow button { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.raterow button.on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; width: auto; min-width: 26px; padding: 0 6px; border-radius: 13px; }
.wantlabel { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--c-blue); }
.sechead.nohead { justify-content: flex-end; margin-bottom: 4px; }
.pickacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pickacts .pick-open { margin: 0 !important; }
.pick-read { font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--action); color: #fff; cursor: pointer; }
/* club lists as cards */
.listgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.listscard .clist { position: relative; margin: 0; padding: 14px 14px 12px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); border-top: 4px solid var(--c-gold); box-shadow: 0 6px 16px rgba(40,44,52,.05); display: flex; flex-direction: column; gap: 2px; }
.listscard .clist:nth-child(3n+2) { border-top-color: var(--c-sage); }
.listscard .clist:nth-child(3n+3) { border-top-color: var(--c-blue); }
.listscard .clistnew { border-top-color: var(--line); border-style: solid; justify-content: center; gap: 10px; box-shadow: none; background: transparent; }
.clisthead { display: flex; align-items: center; gap: 6px; padding: 0 !important; }
#ct-plans .clisttitle { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 2px 0 !important; font-family: Newsreader, Georgia, serif !important; font-size: 19px !important; font-weight: 500; color: var(--ink); border-radius: 0 !important; }
#ct-plans .clistnew .clisttitle { border-bottom: 1px solid var(--line) !important; }
#ct-plans .clisttitle:focus { outline: none; border-bottom: 1px solid var(--c-blue) !important; }
.clisthead .wsdel { position: static !important; opacity: .5; }
.clistsub { font-size: 12px; color: var(--ink-faint); margin-bottom: 4px; }
#ct-plans .clistadd { margin-top: 6px; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; padding: 8px 0 !important; font-size: 14px !important; }
.clistnew .secondary { align-self: flex-start; width: auto !important; margin: 0 !important; }
.listscard .clist.clistnew { border-top-color: var(--line) !important; }
/* practical shelf */
.practical { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.practical h3 { margin: 0 0 4px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); }
.practgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 10px 0 12px; }
a.practbook, a.practbook * { text-decoration: none; }
.practbook { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); font: inherit; cursor: pointer; color: var(--ink); }
.practbook > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.practbook b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 16px; line-height: 1.25; }
.practbook span { font-size: 12.5px; color: var(--ink-soft); }
.practbook small { font-size: 12.5px; color: var(--ink-faint); }
.practbook em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--action); margin-top: 4px; }
.practlink { display: flex; flex-direction: column; padding: 8px 0; color: var(--c-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.practlink small { font-weight: 400; color: var(--ink-faint); font-size: 12.5px; }
/* books for the club */
.bookshare { margin-bottom: 16px !important; }
.bsrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bsbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bsbody b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 16.5px; color: var(--ink); }
.bsbody span { font-size: 12.5px; color: var(--ink-faint); }
.bsrow button.primary, .bsrow button.secondary { width: auto !important; margin: 0 !important; padding: 7px 14px !important; font-size: 13.5px; }
.bsrow .wsdel { opacity: .5; }
.bsadd { flex-wrap: wrap; } .bsadd select { flex: 1; min-width: 0; } .bsadd .selsearch { flex-basis: 100%; }
.bsadd .secondary { width: auto !important; margin: 0 !important; }
.bsauto { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
/* the prompt a piece began from, fixed above the writing */
.wsprompt { position: sticky; top: 56px; z-index: 2; margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--wsbg); border: 1px solid var(--wsline); box-shadow: 0 6px 18px rgba(0,0,0,.05); user-select: text; }
.wsprompt small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wssoft); margin-bottom: 4px; }
.wsprompt p { margin: 0; font-family: var(--wsface, Newsreader, Georgia, serif); font-style: italic; font-size: calc(17px * var(--wsscale, 1)); line-height: 1.45; color: var(--wsink); }
/* Planner: month and list views */
.monthview { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mhead { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 0 6px 4px; }
.mcell { min-height: 118px; display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 8px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); cursor: pointer; min-width: 0; transition: box-shadow .15s ease; }
.mcell:hover { box-shadow: 0 6px 16px rgba(40,44,52,.07); }
.mcell.out { opacity: .45; }
.mcell.today { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.mcell.over, .arow.over { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.mnum { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.mcell.today .mnum { color: var(--action); }
.mmore { font-size: 11.5px; color: var(--ink-faint); padding-left: 4px; }
.calchip { display: flex; flex-direction: column; min-width: 0; padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--ic) 16%, var(--field)); border-left: 0; cursor: pointer; }
.calchip .cct { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calchip small { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calchip.movable { cursor: grab; }
.calchip.dragging { opacity: .4; }
.calchip.k-club { background: color-mix(in srgb, var(--action) 18%, var(--field)); }
.agendaview { display: flex; flex-direction: column; gap: 8px; }
.arow { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); cursor: pointer; }
.arow.today { border-color: var(--action); }
.aday { display: flex; flex-direction: column; align-items: center; }
.aday small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.aday b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); }
.alist { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alist .calchip { padding: 7px 10px; border-radius: 10px; }
.alist .calchip .cct { font-size: 14px; }
.calexpand { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; padding: 0; }
.calexpand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calexpand[aria-pressed="true"] { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
body.calmax #page-cal { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg, #f8f4f2); padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(14px, 3vw, 40px) 40px; max-width: none !important; }
body.calmax .mcell { min-height: calc((100vh - 260px) / 6); }
@media (max-width: 700px) {
  .monthview { gap: 3px; } .mcell { min-height: 64px; padding: 4px; border-radius: 8px; } .mhead { font-size: 10px; padding: 0 2px 2px; }
  .calchip { padding: 2px 4px; } .calchip .cct { font-size: 10px; } .mcell .calchip:nth-of-type(n+3) { display: none; }
}
/* Planner week as a time grid on computers */
.wkgrid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--field); overflow: hidden; }
.wkhead, .wkallday { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.wkday { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 8px; border: 0; background: transparent; font: inherit; cursor: pointer; border-left: 1px solid var(--line); }
.wkday small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.wkday b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 24px; color: var(--ink); width: 38px; height: 38px; line-height: 38px; border-radius: 50%; }
.wkday.today b { background: var(--action); color: #fff; }
.wkallday > span { font-size: 10.5px; color: var(--ink-faint); padding: 8px 6px; text-align: right; }
.wkadcell { border-left: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px; }
.wkscroll { max-height: min(640px, calc(100vh - 330px)); overflow-y: auto; }
body.calpop .wkscroll, body.calmax .wkscroll { max-height: calc(100vh - 260px); }
.wkbody { position: relative; display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 44px); }
.wkgutter { position: relative; }
.wkgutter span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--ink-faint); }
.wkgutter span:first-child { transform: none; }
.wkcol { position: relative; border-left: 1px solid var(--line); cursor: copy; }
.wkcol.today { background: rgba(200,118,90,.04); }
.wkcol.over, .wkadcell.over { background: rgba(63,111,122,.08); }
.wkev { position: absolute !important; margin: 0 2px; overflow: hidden; border-radius: 8px !important; padding: 4px 8px !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.wkev .cct { white-space: normal !important; line-height: 1.25; }
.wknow { position: absolute; left: 0; right: 0; height: 2px; background: var(--action); z-index: 2; }
.wknow::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
/* the larger pop-out, with full screen beside it */
#calBackdrop { display: none; }
body.calpop #calBackdrop { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(20,24,28,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.calpop #page-cal { position: fixed; z-index: 59; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1280px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--bg, #f8f4f2); border-radius: 24px; padding: 22px 26px 28px; box-shadow: 0 30px 90px rgba(0,0,0,.25); max-width: none !important; }
#calPop[aria-pressed="true"] { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.calactions { align-items: center; }
.calactions > .calexpand + .calexpand { margin-left: -4px; }
body.calpop #page-cal { left: max(3vw, calc(50% - 660px)) !important; right: max(3vw, calc(50% - 660px)) !important; top: 4vh !important; bottom: 4vh !important; width: auto !important; max-height: none !important; transform: none !important; animation: none !important; }
.calactions { justify-content: flex-start !important; gap: 8px; flex-wrap: wrap; }
.calactions .calbtns { margin-left: auto; }
.goalif { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); font-style: italic; }
.goalsteps { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.goalstep { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); cursor: pointer; }
.goalstep.done { color: var(--ink-faint); text-decoration: line-through; }
#gSteps { width: 100%; box-sizing: border-box; font: inherit; }
.rsvprow { display: flex; gap: 6px; margin-top: 12px; }
.rsvpb { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; }
.rsvpb.on.yes { background: #3f6f5b; border-color: #3f6f5b; color: #fff; }
.rsvpb.on.maybe { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.rsvpb.on.no { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }
.whenbox { margin: 12px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); }
.whenbox > b { display: block; margin-bottom: 8px; color: var(--ink); }
.whenslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.whenpair { display: flex; gap: 6px; } .whenpair input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.whenbox .secondary, .whenmake { width: auto !important; margin: 8px 0 0 !important; }
/* planner wellness strip */
.wellstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.wellpart { display: flex; align-items: center; gap: 6px; }
.wellpart > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-right: 2px; }
.wellb { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink-soft); cursor: pointer; }
.wellb.on { background: var(--c-sage); border-color: var(--c-sage); color: #fff; }
.wellb.rest.on { background: #7f9c86; }
.wellnote { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--action); }
.lookback { flex-basis: 100%; display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); }
.lookback b { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 17px; color: var(--ink); margin-right: 6px; }
.lookback input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); min-width: 0; }
.lookback .secondary { width: auto !important; margin: 0 !important; }
@media (max-width: 800px) { .lookback { grid-template-columns: 1fr; } }
.wkday.rest small::after { content: ' rest'; color: var(--c-sage); }
.aimline { margin: -4px 0 12px; font-family: Newsreader, Georgia, serif; font-size: 17px; color: var(--ink-soft); font-style: italic; }
.calchip.k-ext { background: var(--surface-2); }
@media print {
  html:has(body.printingcal), html body.printingcal.printingcal.printingcal { background: #fff !important; color: #111 !important; padding: 0 !important; margin: 0 !important; }
  body.printingcal > *:not(#calPrintSheet) { display: none !important; }
  #calPrintSheet { display: block !important; font: 11pt/1.4 Georgia, serif; color: #111; background: #fff; }
  #calPrintSheet h1, #calPrintSheet h2, #calPrintSheet span { color: #111 !important; }
  #calPrintSheet h1 { font-size: 20pt; margin: 0 0 12pt; }
  #calPrintSheet section { break-inside: avoid; border-top: 1px solid #bbb; padding: 6pt 0 8pt; }
  #calPrintSheet h2 { font-size: 12pt; margin: 0 0 4pt; }
  #calPrintSheet p { margin: 2pt 0; display: flex; gap: 10pt; align-items: baseline; }
  #calPrintSheet p::before { content: ''; width: 7pt; height: 7pt; border-radius: 50%; background: var(--ic, #888); flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #calPrintSheet p.pfree::before { background: transparent; }
  #calPrintSheet b { font: 600 9.5pt system-ui, sans-serif; min-width: 62pt; }
  #calPrintSheet .pfree { color: #777; font-style: italic; }
}
/* ===== v182: the reader's calm look, no blush ===== */
body.look-paper, :root { --tint: #eeede8; --tint-2: #e6e4de; --action-soft: #f1f0ec; --clay-s: #f1f0ec; --violet-s: #f1f0ec; }
body.look-paper .lcard, body.look-paper #listgrid .lcard { border: 1px solid #e9e7e1 !important; }
body.look-paper .listframe { border-color: #e9e7e1 !important; border-width: 1px !important; }
body.look-paper #nav-club { background: transparent !important; box-shadow: none !important; color: var(--action) !important; }
body.look-paper #nav-club[aria-current="true"] { background: var(--action) !important; color: #fff !important; }
body.look-paper .wkcol.today, body.look-paper .mcell.today { background: #faf9f6; }
body.look-paper .calchip { background: color-mix(in srgb, var(--ic) 12%, #ffffff); }
body.look-paper .calchip.k-club { background: #f4efec; }
body.look-paper .tray, body.look-paper .ovcard, body.look-paper .ovmeet, body.look-paper .meetpreview { background: #ffffff !important; }
body.look-paper .nowdots button.on, body.look-paper .shelftabs button[aria-selected="true"] { background: #2f383b !important; }
body.look-paper .ovci.hand { background: #f4efec; }
/* week grid items read cleanly: time small on its own line, the title on one line */
.wkev { display: flex !important; flex-direction: column; gap: 0; }
.wkev .cct { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px !important; }
.wkev small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
/* close the larger planner or full screen */
.calclose { display: none; position: sticky; top: 0; z-index: 5; float: right; margin: 0 0 6px 10px; font: inherit; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
body.calpop .calclose, body.calmax .calclose { display: inline-block; }
/* writing: quotes without a line down the side */
.wsrich blockquote { border-left: 0 !important; padding-left: 1.6em !important; }
/* book notes: the toolbar matches the paper */
#writer.tinted .toolbar { background: transparent !important; border: 1px solid var(--wline) !important; }
#writer.tinted .toolbar button, #writer.tinted .toolbar select { color: var(--wink) !important; background: transparent !important; }
#writer.tinted .toolbar #notePrompt { color: var(--wink) !important; font-weight: 700; }
/* the book picker row: search on its own line, the button never squeezed */
.pickrow { flex-wrap: wrap !important; }
.pickrow .selsearch { flex: 1 0 100%; }
.pickrow select { flex: 1 1 260px; min-width: 0; }
.pickrow .savebtn, .pickrow button { flex: none !important; white-space: nowrap; width: auto !important; }
.wsallword { font-size: 14px; }
.schedmore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.schedmore label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); min-width: 0; }
.schedmore label.wide { grid-column: 1 / -1; }
.schedmore select, .schedmore input { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .schedmore { grid-template-columns: 1fr; } }
.calghost { position: fixed !important; z-index: 90; pointer-events: none; opacity: .9; box-shadow: 0 10px 26px rgba(0,0,0,.25); transform: rotate(-2deg); height: auto !important; top: 0; left: 0; }
.calover { outline: 2px solid var(--c-blue) !important; outline-offset: -2px; }

/* ===================== v183: the Reader look ===================== */
/* Harbor, the reader's reference theme: deep solid color, warm ink, hairline edges, no gradients or heavy shadows */
:root[data-dark="harbor"] { --dark-bg: #263033; --dark-surface: #2f393c; --dark-surface2: #384347; --dark-line: #435054; }
:root[data-theme="dark"][data-dark="harbor"] {
  --ink: #ece3d9; --ink-soft: #bfb2a8; --ink-faint: #8f8a85; --field: #2f393c; --surface: #2f393c; --surface-2: #384347;
  --tint: #384347; --tint-2: #435054; --action: #cf7f62; --c-blue: #8fb4bf; --c-sage: #9dbba8; --c-gold: #d9a95a; --c-green: #8fb39a;
  --shadow: none; color-scheme: dark;
}
:root[data-look="reader"] body { background: var(--bg) !important; color: var(--ink); }
:root[data-look="reader"] .card, :root[data-look="reader"] .lcard, :root[data-look="reader"] .nowchip, :root[data-look="reader"] .ovcard,
:root[data-look="reader"] .teachbox, :root[data-look="reader"] .decktile, :root[data-look="reader"] .lrnprompt, :root[data-look="reader"] .lrntile,
:root[data-look="reader"] .pollcard, :root[data-look="reader"] .piececard, :root[data-look="reader"] .planchip, :root[data-look="reader"] .practbook,
:root[data-look="reader"] .wkgrid, :root[data-look="reader"] .mcell, :root[data-look="reader"] .arow, :root[data-look="reader"] .whenbox, :root[data-look="reader"] .lookback,
:root[data-look="reader"] .listscard .clist, :root[data-look="reader"] .speedcard {
  background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
:root[data-look="reader"] .card { border-radius: 20px !important; }
:root[data-look="reader"] h1, :root[data-look="reader"] h2, :root[data-look="reader"] h3, :root[data-look="reader"] .card h2 { color: var(--ink) !important; }
:root[data-look="reader"] h2.sec { font-family: Newsreader, Georgia, serif; font-weight: 500; letter-spacing: 0; }
:root[data-look="reader"] .pane-note, :root[data-look="reader"] .meta, :root[data-look="reader"] small { color: var(--ink-soft); }
:root[data-look="reader"] input[type=text], :root[data-look="reader"] input[type=search], :root[data-look="reader"] input[type=email], :root[data-look="reader"] input[type=tel],
:root[data-look="reader"] input[type=date], :root[data-look="reader"] input[type=time], :root[data-look="reader"] input:not([type]), :root[data-look="reader"] select, :root[data-look="reader"] textarea {
  background-color: #28323500 !important; background: rgba(0,0,0,.14) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; box-shadow: none !important; }
:root[data-look="reader"] button.secondary, :root[data-look="reader"] .tools button:not(.primary):not(.aibtn), :root[data-look="reader"] .linkbtn:not(.splitbtn):not(.wsallword) {
  background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; box-shadow: none !important; }
:root[data-look="reader"] .linkbtn { border: 0 !important; color: var(--c-blue) !important; }
:root[data-look="reader"] button.primary, :root[data-look="reader"] .primary { background: var(--action) !important; border-color: var(--action) !important; color: #fff !important; box-shadow: none !important; }
:root[data-look="reader"] .unit { background: rgba(0,0,0,.16) !important; border: 1px solid var(--line) !important; }
:root[data-look="reader"] .unit button { color: var(--ink-soft) !important; background: transparent !important; box-shadow: none !important; }
:root[data-look="reader"] .unit button[aria-selected="true"], :root[data-look="reader"] .unit button[aria-pressed="true"] { background: var(--surface-2) !important; color: var(--ink) !important; }
:root[data-look="reader"] .covershelf { background-image: none !important; }
:root[data-look="reader"] .covershelf::after, :root[data-look="reader"] .covergroup .covertile::before { background: linear-gradient(180deg, #56504a 0 2px, #463f39 2px 9px, rgba(0,0,0,.35) 9px 12px) !important; }
:root[data-look="reader"] .calchip { background: color-mix(in srgb, var(--ic) 24%, var(--surface)) !important; }
:root[data-look="reader"] .calchip .cct { color: var(--ink) !important; }
:root[data-look="reader"] .wkbody { background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 44px) !important; }
:root[data-look="reader"] .wkcol.today, :root[data-look="reader"] .mcell.today { background: rgba(255,255,255,.03) !important; }
:root[data-look="reader"] .pick-read, :root[data-look="reader"] .heroread, :root[data-look="reader"] .readpill { background: var(--action) !important; color: #fff !important; }

/* one slim top bar: the mark, the tabs as quiet text with a line under the open one, then settings */
@media (min-width: 700px) {
  :root[data-look="reader"] header, :root[data-look="reader"] .site-header, :root[data-look="reader"] body > header { display: none !important; }
  :root[data-look="reader"] .nav { position: sticky; top: 0; z-index: 30; display: flex !important; align-items: center; gap: 2px; width: auto !important; max-width: none !important;
    margin: 0 0 22px !important; padding: calc(10px + env(safe-area-inset-top, 0px)) 190px 10px 24px !important; border-radius: 0 !important;
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 0 !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
  :root[data-look="reader"] .nav::after, :root[data-look="reader"] .stripe, :root[data-look="reader"] .shelfstripe { display: none !important; }
  :root[data-look="reader"] .navmark { display: inline-flex !important; align-items: center; gap: 10px; margin-right: auto; padding-right: 18px; }
}
.navmark .markicon { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.navmark .marktext { font-family: "Plus Jakarta Sans", -apple-system, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
:root[data-look="reader"] .nav button { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; color: var(--ink-soft) !important;
  font-size: 14.5px !important; font-weight: 500 !important; padding: 10px 12px !important; position: relative; }
:root[data-look="reader"] .nav button:hover { color: var(--ink) !important; }
:root[data-look="reader"] .nav button[aria-current="true"] { color: var(--ink) !important; background: transparent !important; }
:root[data-look="reader"] .nav button[aria-current="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--action); }
:root[data-look="reader"] #nav-club, :root[data-look="reader"] #nav-club[aria-current="true"] { background: transparent !important; color: var(--action) !important; }
:root[data-look="reader"] #nav-settings, :root[data-look="reader"] #focusBtn { color: var(--ink-faint) !important; }
:root[data-look="reader"] .topbtns button, :root[data-look="reader"] #topBtns button { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink-soft) !important; box-shadow: none !important; }

/* Shelves and Read: a quiet pair of words under the bar, like the reader's panel tabs, not 2 big buttons */
:root[data-look="reader"] .shelftabs { width: max-content !important; margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 22px !important; display: flex !important; }
:root[data-look="reader"] .shelftabs button { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 6px 0 !important;
  font-family: Newsreader, Georgia, serif !important; font-size: 28px !important; font-weight: 500 !important; color: var(--ink-faint) !important; min-width: 0 !important; width: auto !important; }
:root[data-look="reader"] .shelftabs button[aria-selected="true"] { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--action) !important; }

/* page titles and section labels in the reader's small capitals */
:root[data-look="reader"] .grouphead, :root[data-look="reader"] .toolhead, :root[data-look="reader"] .planlab, :root[data-look="reader"] .planstriphead { letter-spacing: .16em !important; color: var(--ink-faint) !important; }

/* the open tab is a line under the word, never a colored pill */
:root[data-look="reader"] #nav-calc, :root[data-look="reader"] #nav-calc[aria-current="true"],
:root[data-look="reader"] #nav-lists, :root[data-look="reader"] #nav-lists[aria-current="true"],
:root[data-look="reader"] #nav-study, :root[data-look="reader"] #nav-study[aria-current="true"],
:root[data-look="reader"] #nav-cal, :root[data-look="reader"] #nav-cal[aria-current="true"],
:root[data-look="reader"] #nav-goals, :root[data-look="reader"] #nav-goals[aria-current="true"],
:root[data-look="reader"] #nav-speed, :root[data-look="reader"] #nav-speed[aria-current="true"],
:root[data-look="reader"] #nav-club, :root[data-look="reader"] #nav-club[aria-current="true"],
:root[data-look="reader"] #nav-settings, :root[data-look="reader"] #nav-settings[aria-current="true"] { background: transparent !important; box-shadow: none !important; }
:root[data-look="reader"] #nav-calc[aria-current="true"],
:root[data-look="reader"] #nav-lists[aria-current="true"],
:root[data-look="reader"] #nav-study[aria-current="true"],
:root[data-look="reader"] #nav-cal[aria-current="true"],
:root[data-look="reader"] #nav-goals[aria-current="true"],
:root[data-look="reader"] #nav-speed[aria-current="true"],
:root[data-look="reader"] #nav-settings[aria-current="true"] { color: var(--ink) !important; }

/* stronger than the older dark-mode tab rules */
:root[data-look="reader"][data-theme="dark"] .nav #nav-calc[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-lists[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-study[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-cal[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-goals[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-speed[aria-current="true"],
:root[data-look="reader"][data-theme="dark"] .nav #nav-settings[aria-current="true"] { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; }
:root[data-look="reader"][data-theme="dark"] .nav #nav-club, :root[data-look="reader"][data-theme="dark"] .nav #nav-club[aria-current="true"] { background: transparent !important; color: var(--action) !important; box-shadow: none !important; }
.wordmark .readermark { display: none; }
:root[data-look="reader"] .wordmark .wm-a, :root[data-look="reader"] .wordmark .wm-b { display: none !important; }
:root[data-look="reader"] .wordmark .readermark { display: inline-flex; align-items: center; gap: 10px; }
:root[data-look="reader"] .wordmark .readermark .markicon { width: 28px; height: 28px; border-radius: 8px; }
:root[data-look="reader"] .wordmark .readermark .marktext { font-family: "Plus Jakarta Sans", -apple-system, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
:root[data-look="reader"] .wordmark::after, :root[data-look="reader"] .wordmark + .stripe, :root[data-look="reader"] header .shelfstripe { display: none !important; }
:root[data-look="reader"] .wordmark { border: 0 !important; background: none !important; padding-bottom: 0 !important; }
@media (max-width: 699px) {
  :root[data-look="reader"] .nav { background: transparent !important; border: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding-bottom: 6px !important; }
  :root[data-look="reader"] .nav button[aria-current="true"]::after { bottom: 0; }
  .pickrow select { flex-basis: 100% !important; }
  .pickrow .savebtn, .pickrow button { width: 100% !important; }
}
:root[data-look="reader"][data-theme="dark"] .shelftabs button[aria-selected="true"] { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--action) !important; }
:root[data-look="reader"][data-theme="dark"] .shelftabs button { background: transparent !important; }
/* the Desk book picker: search, then the book, then the button, never squeezed */
.bookpick, #pickBook { min-width: 0; }
#pickBook ~ #pickGo, #pickGo { flex: none !important; white-space: nowrap !important; width: auto !important; min-width: max-content; }
@media (max-width: 699px) { #pickBook { flex: 1 1 100% !important; width: 100% !important; } #pickGo { width: 100% !important; } #pickBook + .hidden + #pickGo { margin-top: 8px; } }
.pickrow.simple { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center; grid-template-columns: none !important; }
.pickrow.simple .selsearch { flex: 1 1 100% !important; margin: 0 !important; }
.pickrow.simple #pickBook { flex: 1 1 320px !important; }

/* ===================== v184: sleeker, calmer, easier to read ===================== */
/* smaller corners, so it reads as a tool rather than a pile of bubbles */
:root[data-look="reader"] .card { border-radius: 12px !important; }
:root[data-look="reader"] .lcard, :root[data-look="reader"] .nowchip, :root[data-look="reader"] .ovcard, :root[data-look="reader"] .teachbox, :root[data-look="reader"] .decktile,
:root[data-look="reader"] .lrnprompt, :root[data-look="reader"] .lrntile, :root[data-look="reader"] .pollcard, :root[data-look="reader"] .piececard, :root[data-look="reader"] .planchip,
:root[data-look="reader"] .practbook, :root[data-look="reader"] .wkgrid, :root[data-look="reader"] .arow, :root[data-look="reader"] .whenbox, :root[data-look="reader"] .lookback,
:root[data-look="reader"] .listscard .clist, :root[data-look="reader"] .speedcard, :root[data-look="reader"] .ovpin, :root[data-look="reader"] .wsinvite, :root[data-look="reader"] .wsrow,
:root[data-look="reader"] .stcard, :root[data-look="reader"] .lrnpassage, :root[data-look="reader"] .clubhero, :root[data-look="reader"] .clubhead { border-radius: 10px !important; }
:root[data-look="reader"] .mcell { border-radius: 6px !important; }
:root[data-look="reader"] button.primary, :root[data-look="reader"] button.secondary, :root[data-look="reader"] .tools button, :root[data-look="reader"] .savebtn,
:root[data-look="reader"] input[type=text], :root[data-look="reader"] input[type=search], :root[data-look="reader"] input[type=email], :root[data-look="reader"] input[type=tel],
:root[data-look="reader"] input[type=date], :root[data-look="reader"] input[type=time], :root[data-look="reader"] select, :root[data-look="reader"] textarea, :root[data-look="reader"] .unit { border-radius: 8px !important; }
:root[data-look="reader"] .unit button { border-radius: 6px !important; }
/* easier to read: a little more light in the ink */
:root[data-theme="dark"][data-dark="harbor"] { --ink: #f1e9df; --ink-soft: #c8bcb2; --ink-faint: #9b958f; }
/* priority dots on shelf cards, big enough to see and tap */
.pri.small button { width: 11px !important; height: 11px !important; }
.pri.small { gap: 4px !important; }
/* the club page: one main button, More for the rest, and the 5 tabs as quiet words */
.clubtoolsrow { display: flex !important; gap: 10px; align-items: center; position: relative; grid-template-columns: none !important; max-width: none !important; }
.clubtoolsrow > .primary { width: auto !important; margin: 0 !important; }
.clubmore { width: auto !important; margin: 0 !important; background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.clubmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; min-width: 220px; padding: 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.clubmenu.hidden { display: none; }
.clubmenu button { text-align: left; width: 100% !important; margin: 0 !important; background: transparent !important; border: 0 !important; color: var(--ink) !important; padding: 10px 12px !important; border-radius: 6px !important; font-size: 14.5px; }
.clubmenu button:hover { background: rgba(255,255,255,.06) !important; }
:root[data-look="reader"] .clubtabs { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; gap: 22px !important; justify-content: flex-start !important; width: auto !important; }
:root[data-look="reader"] .clubtabs button { flex: none !important; background: transparent !important; border-radius: 0 !important; padding: 10px 0 !important; font-size: 15px !important; color: var(--ink-soft) !important; }
:root[data-look="reader"] .clubtabs button[aria-selected="true"] { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--action) !important; }
/* folding sections: the title opens and closes them */
.fold > h3 { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.fold > h3::after { content: ''; width: 8px; height: 8px; border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint); transform: rotate(45deg); margin: 0 4px 4px 12px; transition: transform .15s ease; }
.fold.shut > h3::after { transform: rotate(-45deg); margin-bottom: 0; }
.fold.shut > *:not(h3) { display: none !important; }
.fold.shut { padding-bottom: 10px !important; }
.fold.shut > h3 { margin-bottom: 0 !important; }
.speedtoggle { display: block; margin: 4px auto 14px !important; font-size: 14.5px; }
.speedbox { margin: 0 0 22px; }
.speedbox.hidden { display: none; }
/* colors: the reader's themes for the whole site */
.navcolors { color: var(--ink-faint) !important; }
.colorpop { position: fixed; z-index: 80; width: 300px; padding: 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.colorpop > p { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.colorrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.colordot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); cursor: pointer; display: grid; place-items: center; padding: 0; }
.colordot i { width: 12px; height: 12px; border-radius: 50%; }
.colordot.on { outline: 2px solid var(--action); outline-offset: 2px; }
.colorpop .linkbtn { font-size: 13.5px; }
.introrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.introrow b { display: block; color: var(--ink); margin-bottom: 2px; }
.introrow p { margin: 2px 0; font-size: 14px; color: var(--ink); }
.introrow p span { color: var(--ink-faint); }
.introform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-items: end; }
.introform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.introform .secondary { grid-column: 1 / -1; justify-self: start; width: auto !important; margin: 0 !important; }
@media (max-width: 700px) { .introform { grid-template-columns: 1fr; } }
/* simple shelves: covers stand on nothing, no drawn planks */
.covershelf, #listgrid .covershelf { background-image: none !important; }
.covershelf::after, .covershelf::before, .covergroup .covertile::before, .minishelf::after, .minishelf::before { display: none !important; background: none !important; }
:root[data-look="reader"] .covershelf::after, :root[data-look="reader"] .covergroup .covertile::before { display: none !important; }
/* calmer labels: fewer shouting capitals */
:root[data-look="reader"] .grouphead, :root[data-look="reader"] .toolhead, :root[data-look="reader"] .planstriphead, :root[data-look="reader"] .wsbooklab, :root[data-look="reader"] .ovhead h3, :root[data-look="reader"] .planf span, :root[data-look="reader"] .planlab {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink-soft) !important; }

/* ===================== v186: quieter, closer to the book ===================== */
/* Harbor exactly as the reader shows it: the page is the book's page color, with warm ink */
:root[data-dark="harbor"] { --dark-bg: #2f383b; --dark-surface: #353f42; --dark-surface2: #3b4649; --dark-line: #435054; }
:root[data-theme="dark"][data-dark="harbor"] { --ink: #e8ddd3; --ink-soft: #b9aaa2; --ink-faint: #928580; --line: #414d50; --action: #d08566; }
/* no boxes around sections: they sit on the page, parted by space and a hairline, the way chapters sit in a book */
:root[data-look="reader"] .card, :root[data-look="reader"] .card.learncard, :root[data-look="reader"] #goalcard, :root[data-look="reader"] .nowcard {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  padding-left: 0 !important; padding-right: 0 !important; padding-top: 28px !important; margin-top: 8px !important; }
/* the things inside a section keep a soft ground, no outline */
:root[data-look="reader"] .lcard, :root[data-look="reader"] .nowchip, :root[data-look="reader"] .ovcard, :root[data-look="reader"] .teachbox, :root[data-look="reader"] .decktile,
:root[data-look="reader"] .lrnprompt, :root[data-look="reader"] .lrntile, :root[data-look="reader"] .pollcard, :root[data-look="reader"] .piececard, :root[data-look="reader"] .planchip,
:root[data-look="reader"] .practbook, :root[data-look="reader"] .arow, :root[data-look="reader"] .whenbox, :root[data-look="reader"] .lookback,
:root[data-look="reader"] .listscard .clist, :root[data-look="reader"] .speedcard, :root[data-look="reader"] .ovpin, :root[data-look="reader"] .wsinvite, :root[data-look="reader"] .wsrow {
  background: var(--surface) !important; border: 0 !important; box-shadow: none !important; }
:root[data-look="reader"] .wkgrid, :root[data-look="reader"] .mcell { border: 1px solid var(--line) !important; background: transparent !important; }
/* one type scale: page titles, section titles, item titles, body, small notes */
:root[data-look="reader"] h2.sec, :root[data-look="reader"] .card > .sechead h2, :root[data-look="reader"] .card > h2 { font-family: Newsreader, Georgia, serif !important; font-size: 26px !important; font-weight: 500 !important; }
:root[data-look="reader"] h2.sec::before { display: none !important; }
:root[data-look="reader"] .card h3, :root[data-look="reader"] .teachbox h3, :root[data-look="reader"] .plancard h3 { font-family: Newsreader, Georgia, serif !important; font-size: 19px !important; font-weight: 500 !important; }
:root[data-look="reader"] body { font-size: 15.5px; }
:root[data-look="reader"] .pane-note, :root[data-look="reader"] .meta { font-size: 14px !important; }
/* buttons talk quietly: only the one main action is filled */
:root[data-look="reader"] button.secondary, :root[data-look="reader"] .tools button:not(.primary):not(.aibtn), :root[data-look="reader"] .clubmore {
  background: rgba(255,255,255,.05) !important; border: 0 !important; color: var(--ink) !important; }
:root[data-look="reader"] .unit { background: transparent !important; border: 0 !important; }
:root[data-look="reader"] .unit button[aria-selected="true"], :root[data-look="reader"] .unit button[aria-pressed="true"] { background: rgba(255,255,255,.07) !important; }
:root[data-look="reader"] input[type=text], :root[data-look="reader"] input[type=search], :root[data-look="reader"] select, :root[data-look="reader"] textarea,
:root[data-look="reader"] input[type=email], :root[data-look="reader"] input[type=tel], :root[data-look="reader"] input[type=date], :root[data-look="reader"] input[type=time] {
  background: rgba(0,0,0,.12) !important; border: 1px solid transparent !important; }
:root[data-look="reader"] input:focus, :root[data-look="reader"] select:focus, :root[data-look="reader"] textarea:focus { border-color: var(--line) !important; outline: none; }
/* the name in the bar, set like a book title */
.navmark .marktext, :root[data-look="reader"] .wordmark .readermark .marktext { font-family: Newsreader, Georgia, serif !important; font-size: 21px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
:root[data-look="reader"] .nav { background: var(--bg) !important; }

/* ===================== v187: a dock for reading, writing and planning ===================== */
.dockico { display: none; }
@media (min-width: 1000px) {
  :root[data-look="reader"] body { padding-left: 232px !important; }
  :root[data-look="reader"] .nav { position: fixed !important; left: 0; top: 0; bottom: 0; width: 232px !important; box-sizing: border-box;
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important;
    margin: 0 !important; padding: calc(26px + env(safe-area-inset-top, 0px)) 14px 20px !important;
    background: color-mix(in srgb, var(--bg) 82%, #000) !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; z-index: 40; }
  :root[data-look="reader"] .navmark { margin: 0 0 22px !important; padding: 0 10px !important; }
  :root[data-look="reader"] .nav button { display: flex !important; align-items: center; gap: 12px; justify-content: flex-start !important; text-align: left;
    width: 100% !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 15px !important; }
  :root[data-look="reader"] .nav button::after { display: none !important; }
  :root[data-look="reader"] .nav button[aria-current="true"] { background: rgba(255,255,255,.06) !important; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--action) !important; }
  :root[data-look="reader"] .dockico { display: inline-flex; width: 20px; height: 20px; flex: none; opacity: .85; }
  :root[data-look="reader"] .dockico svg { width: 20px; height: 20px; }
  :root[data-look="reader"] #nav-club svg { width: 20px !important; height: 20px !important; }
  /* Colors, Settings and focus sit together at the foot of the dock */
  :root[data-look="reader"] #navColors { margin-top: auto !important; }
  :root[data-look="reader"] #navColors, :root[data-look="reader"] #nav-settings, :root[data-look="reader"] #focusBtn { width: 100% !important; color: var(--ink-soft) !important; }
  :root[data-look="reader"] #navColors::after { content: 'Colors'; position: static !important; display: inline !important; background: none !important; height: auto; width: auto; font-size: 14.5px; color: inherit; }
  :root[data-look="reader"] #nav-settings::after { content: 'Settings'; position: static !important; display: inline !important; background: none !important; height: auto; width: auto; font-size: 14.5px; color: inherit; }
  :root[data-look="reader"] #focusBtn::after { content: 'Full view'; position: static !important; display: inline !important; background: none !important; height: auto; width: auto; font-size: 14.5px; color: inherit; }
  :root[data-look="reader"] .wrap, :root[data-look="reader"] main, :root[data-look="reader"] #app { max-width: 1180px; }
  :root[data-look="reader"] .calclose { right: 0; }
  body.calmax .nav, body.calpop .nav { z-index: 30 !important; }
}
/* shelves: a single flat line under each row of covers, nothing rising up */
#listgrid .covershelf { background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--sw, 100px) * 1.5 + 4px), var(--line) calc(var(--sw, 100px) * 1.5 + 4px) calc(var(--sw, 100px) * 1.5 + 5px), transparent calc(var(--sw, 100px) * 1.5 + 5px) calc(var(--sw, 100px) * 1.5 + 18px)) !important; }
.covergroup .covertile::before { display: block !important; content: ''; position: absolute; left: -11px; right: -11px; top: calc(var(--shelfh, 252px) + 4px); height: 1px; background: var(--line) !important; }
:root { --shelfh: 252px; }
@media (max-width: 599px) { :root { --shelfh: 186px; } }
.covergroup .covergrid { grid-template-columns: repeat(5, 168px) !important; }
@media (min-width: 600px) and (max-width: 1100px) { .covergroup .covergrid { grid-template-columns: repeat(4, 168px) !important; } }
@media (max-width: 599px) { .covergroup .covergrid { grid-template-columns: repeat(2, 124px) !important; } }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(580px, 100%), 1fr)) !important; }
/* the free shelves sit on the Read page itself */
#practicalBox { margin-top: 30px; }
#nowrow .nowchip { grid-template-columns: 100px minmax(0, 1fr) !important; }
@media (max-width: 599px) { #nowrow .nowchip { grid-template-columns: 76px minmax(0, 1fr) !important; } }
#listgrid .covershelf { grid-auto-rows: calc(var(--sw, 100px) * 1.5 + 18px) !important; gap: 0 12px !important; }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(540px, 100%), 1fr)) !important; column-gap: 40px !important; }
/* phones: the dock sits at the bottom, one tap from anywhere, like an app */
@media (max-width: 699px) {
  :root[data-look="reader"] body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  :root[data-look="reader"] .nav { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 45; display: grid !important; grid-template-columns: repeat(8, 1fr);
    gap: 0 !important; margin: 0 !important; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important;
    background: color-mix(in srgb, var(--bg) 88%, #000) !important; border: 0 !important; border-top: 1px solid var(--line) !important; }
  :root[data-look="reader"] .nav .navmark, :root[data-look="reader"] #navColors, :root[data-look="reader"] #focusBtn { display: none !important; }
  :root[data-look="reader"] .nav button { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 0 !important; min-width: 0; font-size: 10px !important; line-height: 1.1; color: var(--ink-faint) !important; white-space: nowrap; overflow: hidden; }
  :root[data-look="reader"] .nav button::after { display: none !important; }
  :root[data-look="reader"] .nav button[aria-current="true"] { color: var(--ink) !important; }
  :root[data-look="reader"] .nav button[aria-current="true"] .dockico, :root[data-look="reader"] #nav-club[aria-current="true"] svg { color: var(--action); }
  :root[data-look="reader"] .dockico { display: inline-flex !important; width: 22px; height: 22px; }
  :root[data-look="reader"] .dockico svg { width: 22px; height: 22px; }
  :root[data-look="reader"] #nav-club { gap: 3px; }
  :root[data-look="reader"] #nav-club svg { width: 22px !important; height: 22px !important; }
  :root[data-look="reader"] #nav-settings { font-size: 0 !important; }
  :root[data-look="reader"] #nav-settings svg { width: 22px !important; height: 22px !important; }
  :root[data-look="reader"] #nav-calc { font-size: 0 !important; }
  :root[data-look="reader"] #nav-calc::before { content: 'Clock'; font-size: 10px; order: 2; }
  :root[data-look="reader"] .tutorbar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  :root[data-look="reader"] .wordmark { margin: 8px 0 14px !important; }
}
@media (max-width: 699px) { :root[data-look="reader"] .floatbar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } }

/* ===================== v188 ===================== */
/* between phone and desktop: a slim rail of icons, so nothing runs off the window */
@media (min-width: 700px) and (max-width: 999px) {
  :root[data-look="reader"] body { padding-left: 76px !important; padding-bottom: 0 !important; }
  :root[data-look="reader"] header, :root[data-look="reader"] body > header { display: none !important; }
  :root[data-look="reader"] .nav { position: fixed !important; left: 0; top: 0; bottom: 0; width: 76px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
    margin: 0 !important; padding: calc(18px + env(safe-area-inset-top, 0px)) 8px 16px !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
    background: color-mix(in srgb, var(--bg) 82%, #000) !important; z-index: 40; }
  :root[data-look="reader"] .nav .navmark { display: none !important; }
  :root[data-look="reader"] .nav button { width: 52px !important; height: 48px; padding: 0 !important; font-size: 0 !important; display: grid !important; place-items: center; border-radius: 10px !important; }
  :root[data-look="reader"] .nav button::after { display: none !important; }
  :root[data-look="reader"] .nav button[aria-current="true"] { background: rgba(255,255,255,.07) !important; box-shadow: inset 3px 0 0 var(--action) !important; }
  :root[data-look="reader"] .dockico { display: inline-flex !important; width: 22px; height: 22px; } :root[data-look="reader"] .dockico svg { width: 22px; height: 22px; }
  :root[data-look="reader"] #nav-club svg, :root[data-look="reader"] #nav-settings svg, :root[data-look="reader"] #navColors svg, :root[data-look="reader"] #focusBtn svg { width: 22px !important; height: 22px !important; }
  :root[data-look="reader"] #navColors { margin-top: auto !important; }
  :root[data-look="reader"] #navColors::after, :root[data-look="reader"] #nav-settings::after, :root[data-look="reader"] #focusBtn::after { content: none !important; }
}
/* the name, set large and sure, the Clock in terracotta */
:root[data-look="reader"] .navmark .marktext, :root[data-look="reader"] .wordmark .readermark .marktext { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
:root[data-look="reader"] .navmark { margin-bottom: 28px !important; }
/* Shelves and Read: a straight line under the open word, square ends, never flaring up */
:root[data-look="reader"] .shelftabs button, :root[data-look="reader"][data-theme="dark"] .shelftabs button[aria-selected="true"] { box-shadow: none !important; border-radius: 0 !important; position: relative; }
:root[data-look="reader"] .shelftabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0; background: var(--action); }
/* bigger books everywhere */
:root[data-look="reader"] .nowchip { grid-template-columns: 116px minmax(0, 1fr) !important; }
/* sections fold from a small arrow at the end of their heading */
.secfold { flex: none; width: 30px; height: 30px; margin-left: 8px; border: 0 !important; background: transparent !important; cursor: pointer; border-radius: 50% !important; position: relative; }
.secfold::before { content: ''; position: absolute; left: 11px; top: 9px; width: 8px; height: 8px; border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint); transform: rotate(45deg); transition: transform .15s ease; }
.secshut .secfold::before { transform: rotate(-45deg); top: 11px; }
.secfold:hover { background: rgba(255,255,255,.06) !important; }
.secshut > *:not(.sechead):not(h2) { display: none !important; }
.secshut { padding-bottom: 14px !important; }
/* each part of the dock has its own quiet accent, on its icon */
:root[data-look="reader"] #nav-lists .dockico { color: #9dbba8; } :root[data-look="reader"] #nav-study .dockico { color: #d9b36a; }
:root[data-look="reader"] #nav-cal .dockico { color: #d08566; } :root[data-look="reader"] #nav-goals .dockico { color: #8fb39a; }
:root[data-look="reader"] #nav-speed .dockico { color: #8fb4bf; } :root[data-look="reader"] #nav-calc .dockico { color: #c9b8a8; }
/* a touch warmer and deeper, so covers and text glow a little */
:root[data-dark="harbor"] { --dark-bg: #2b3437; --dark-surface: #323c3f; --dark-surface2: #394447; }
:root[data-theme="dark"][data-dark="harbor"] { --ink: #ece2d8; --ink-soft: #bcaea6; }
.marktext .mk2 { color: var(--action); }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(640px, 100%), 1fr)) !important; }
.covergroup .covergrid { grid-template-columns: repeat(5, 180px) !important; }
@media (min-width: 600px) and (max-width: 1250px) { .covergroup .covergrid { grid-template-columns: repeat(4, 180px) !important; } }
@media (min-width: 600px) and (max-width: 999px) { .covergroup .covergrid { grid-template-columns: repeat(3, 180px) !important; } }
@media (max-width: 599px) { .covergroup .covergrid { grid-template-columns: repeat(2, 132px) !important; } }
:root { --shelfh: 270px; }
@media (max-width: 599px) { :root { --shelfh: 198px; } }
:root[data-look="reader"] .nowchip, :root[data-look="reader"] #nowrow .nowchip { grid-template-columns: 112px minmax(0, 1fr) !important; column-gap: 16px !important; }
:root[data-look="reader"] .listframe, :root[data-look="reader"] #view-detail .card, :root[data-look="reader"] #view-detail { border-left: 0 !important; box-shadow: none !important; }
@media (min-width: 700px) and (max-width: 999px) { :root[data-look="reader"] #nav-settings, :root[data-look="reader"] #focusBtn, :root[data-look="reader"] #navColors { font-size: 0 !important; } :root[data-look="reader"] #nav-settings::after, :root[data-look="reader"] #nav-settings::before { display: none !important; content: none !important; } }
:root[data-look="reader"] .listframe { border: 0 !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 700px) and (max-width: 999px) { :root[data-look="reader"] #nav-settings > :not(svg) { display: none !important; } }
@media (min-width: 600px) and (max-width: 1100px) { #nowrow { grid-auto-columns: calc((100% - 14px) / 2) !important; } }

/* ===================== v189: bring back the cards and the character ===================== */
/* Settings shows its own label once */
:root[data-look="reader"] #nav-settings::after { content: none !important; display: none !important; }
/* BOOKCLOCK in capitals, with the 5-color shelf stripe beneath it, the site's own signature */
:root[data-look="reader"] .navmark { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
:root[data-look="reader"] .navmark .marktext, :root[data-look="reader"] .wordmark .readermark .marktext {
  font-family: Newsreader, Georgia, serif !important; font-size: 25px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: none !important; color: var(--ink) !important; }
.markstripe { display: flex; width: 100%; max-width: 176px; height: 4px; border-radius: 2px; overflow: hidden; }
.markstripe i { flex: 1; } .markstripe i:nth-child(1) { background: #8ba48f; } .markstripe i:nth-child(2) { background: #d9a95a; } .markstripe i:nth-child(3) { background: #5c8f9a; } .markstripe i:nth-child(4) { background: #d08566; } .markstripe i:nth-child(5) { background: #c9b28e; }
.wordmark .readermark { flex-direction: column; align-items: flex-start; }
/* sections live in cards again: soft lifted panels, rounded but not bubbly */
:root[data-look="reader"] .card, :root[data-look="reader"] .card.learncard, :root[data-look="reader"] #goalcard, :root[data-look="reader"] .nowcard {
  background: var(--surface) !important; border: 1px solid rgba(255,255,255,.05) !important; border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px rgba(0,0,0,.18) !important;
  padding: 26px 28px !important; margin-top: 18px !important; }
@media (max-width: 599px) { :root[data-look="reader"] .card, :root[data-look="reader"] .nowcard { padding: 20px 16px !important; } }
/* things inside a card sit a step deeper, like items on a desk */
:root[data-look="reader"] .lcard, :root[data-look="reader"] .nowchip, :root[data-look="reader"] .ovcard, :root[data-look="reader"] .teachbox, :root[data-look="reader"] .decktile,
:root[data-look="reader"] .lrnprompt, :root[data-look="reader"] .lrntile, :root[data-look="reader"] .pollcard, :root[data-look="reader"] .piececard, :root[data-look="reader"] .planchip,
:root[data-look="reader"] .practbook, :root[data-look="reader"] .arow, :root[data-look="reader"] .whenbox, :root[data-look="reader"] .lookback,
:root[data-look="reader"] .listscard .clist, :root[data-look="reader"] .speedcard, :root[data-look="reader"] .ovpin, :root[data-look="reader"] .wsinvite, :root[data-look="reader"] .wsrow {
  background: rgba(0,0,0,.14) !important; border: 1px solid rgba(255,255,255,.04) !important; border-radius: 12px !important; }
/* shelf cards are their own cards on the page, each with its color on the edge the way shelves were before */
:root[data-look="reader"] #listgrid .lcard { background: var(--surface) !important; border-radius: 16px !important; box-shadow: 0 12px 30px rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.05) !important; border-top: 3px solid var(--lcf, #5c8f9a) !important; padding: 20px 22px !important; }
/* section headings keep their colored dot, which gives each part a place */
:root[data-look="reader"] h2.sec::before { display: inline-block !important; }
/* the page title strip and dock stay calm */
:root[data-look="reader"] .nav { background: color-mix(in srgb, var(--bg) 78%, #000) !important; }
@media (min-width: 1000px) { :root[data-look="reader"] #nav-settings .navlabel { display: inline !important; font-style: normal; font-size: 14.5px; color: inherit; } }
@media (min-width: 1000px) { :root[data-look="reader"] #nav-settings .navlabel { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 !important; white-space: nowrap; } }
:root[data-look="reader"] .clubmark { text-transform: uppercase; letter-spacing: .08em; font-family: Newsreader, Georgia, serif; font-weight: 600; }
:root[data-look="reader"] .clubmark i { text-transform: uppercase; letter-spacing: .14em; font-style: normal; font-family: "Plus Jakarta Sans", sans-serif; font-size: .62em; font-weight: 700; color: var(--ink-faint); margin-left: 6px; }

/* ===================== v190: one page color, painted dock pictures ===================== */
/* like the book: one background everywhere, the dock and the cards included; cards are drawn by a fine edge and soft shadow, not a different fill */
:root[data-dark="harbor"] { --dark-bg: #2f383b; --dark-surface: #2f383b; --dark-surface2: #36403f; }
:root[data-look="reader"] .nav { background: var(--bg) !important; border-right-color: rgba(255,255,255,.06) !important; }
:root[data-look="reader"] .card, :root[data-look="reader"] .card.learncard, :root[data-look="reader"] #goalcard, :root[data-look="reader"] .nowcard, :root[data-look="reader"] #listgrid .lcard {
  background: var(--bg) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 14px 34px rgba(0,0,0,.16) !important; }
:root[data-look="reader"] #listgrid .lcard { border-top: 3px solid var(--lcf, #5c8f9a) !important; }
/* painted pictures keep their own colors; the open one gets a soft glow instead of a tint */
.dockico.painted svg { width: 22px; height: 22px; }
:root[data-look="reader"] .nav button .dockico.painted { opacity: .78; color: inherit !important; }
:root[data-look="reader"] .nav button[aria-current="true"] .dockico.painted, :root[data-look="reader"] .nav button:hover .dockico.painted { opacity: 1; filter: drop-shadow(0 0 6px rgba(208,133,102,.25)); }
:root[data-look="reader"] #nav-club > svg { display: none !important; }
@media (min-width: 1000px) { :root[data-look="reader"] .dockico.painted, :root[data-look="reader"] .dockico.painted svg { width: 24px; height: 24px; } }
@media (min-width: 1000px) { :root[data-look="reader"] .dockico.painted, :root[data-look="reader"] .dockico.painted svg { width: 30px !important; height: 30px !important; } :root[data-look="reader"] .nav button { gap: 14px !important; } }
@media (max-width: 999px) { :root[data-look="reader"] .dockico.painted, :root[data-look="reader"] .dockico.painted svg { width: 26px !important; height: 26px !important; } }

/* ===================== v191 ===================== */
/* cards rise off the page: a lit top edge, a clear outline, a deeper soft shadow */
:root[data-look="reader"] .card, :root[data-look="reader"] .card.learncard, :root[data-look="reader"] #goalcard, :root[data-look="reader"] .nowcard, :root[data-look="reader"] #listgrid .lcard {
  background: linear-gradient(color-mix(in srgb, var(--bg) 94%, #fff), color-mix(in srgb, var(--bg) 97%, #fff)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.28) !important; }
:root[data-look="reader"] #listgrid .lcard { border-top: 3px solid var(--lcf, #5c8f9a) !important; }
/* the shelves are back under the books: a flat, solid shelf with a soft shadow beneath, no lip and no curls */
#listgrid .covershelf { background-image: none !important; position: relative; }
#listgrid .covershelf .cover { position: relative; z-index: 1; }
#listgrid .covershelf { --shelfslab: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, #8a7560) 0 6px, rgba(0,0,0,.22) 6px 10px, transparent 10px); }
#listgrid .covershelf { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--sw, 112px) * 1.5 - 2px), color-mix(in srgb, var(--bg) 50%, #8a7560) calc(var(--sw, 112px) * 1.5 - 2px) calc(var(--sw, 112px) * 1.5 + 5px), rgba(0,0,0,.25) calc(var(--sw, 112px) * 1.5 + 5px) calc(var(--sw, 112px) * 1.5 + 9px), transparent calc(var(--sw, 112px) * 1.5 + 9px) calc(var(--sw, 112px) * 1.5 + 18px)) !important; }
.covergroup .covertile::before { height: 7px !important; top: calc(var(--shelfh, 270px) - 2px) !important; background: color-mix(in srgb, var(--bg) 50%, #8a7560) !important; box-shadow: 0 4px 6px rgba(0,0,0,.25); border-radius: 1px; }
/* the book you are reading leads the page */
.shelfhero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; margin: 6px 0 22px; padding: 26px 28px; border-radius: 18px;
  background: linear-gradient(color-mix(in srgb, var(--bg) 92%, #fff), color-mix(in srgb, var(--bg) 96%, #fff)); border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.28); }
.shelfhero.hidden { display: none; }
.shelfhero .cover { box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.herokick { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--action); }
.shelfhero h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--ink); }
.heroby { margin: 6px 0 16px; font-size: 16px; color: var(--ink-soft); }
.herobar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 360px; }
.herobar i { display: block; height: 100%; background: var(--action); border-radius: 3px; }
.heropct { margin: 6px 0 16px; font-size: 13px; color: var(--ink-faint); }
.heroacts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.heroacts .primary { width: auto !important; margin: 0 !important; padding: 11px 28px !important; }
.heromore { font-size: 13.5px; color: var(--ink-faint); }
@media (max-width: 599px) { .shelfhero { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 18px; } .shelfhero .cover { --cw: 110px !important; width: 110px !important; } }
/* the color picker holds 12 colorways */
.colorrow { grid-template-columns: repeat(6, 1fr) !important; }
.colorpop { width: 330px; }

/* ===================== v192: depth, and a real bookcase ===================== */
/* Flat: one plane, like a printed page. Cards are drawn only by a hairline; nothing floats. */
:root[data-look="reader"][data-depth="flat"] .card, :root[data-look="reader"][data-depth="flat"] .card.learncard, :root[data-look="reader"][data-depth="flat"] #goalcard,
:root[data-look="reader"][data-depth="flat"] .nowcard, :root[data-look="reader"][data-depth="flat"] #listgrid .lcard, :root[data-look="reader"][data-depth="flat"] .shelfhero {
  background: var(--bg) !important; box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important; }
:root[data-look="reader"][data-depth="flat"] #listgrid .lcard { border-top: 3px solid var(--lcf, #5c8f9a) !important; }
:root[data-look="reader"][data-depth="flat"] .nowchip, :root[data-look="reader"][data-depth="flat"] .decktile, :root[data-look="reader"][data-depth="flat"] .lrnprompt,
:root[data-look="reader"][data-depth="flat"] .practbook, :root[data-look="reader"][data-depth="flat"] .ovcard, :root[data-look="reader"][data-depth="flat"] .teachbox,
:root[data-look="reader"][data-depth="flat"] .piececard, :root[data-look="reader"][data-depth="flat"] .pollcard, :root[data-look="reader"][data-depth="flat"] .listscard .clist,
:root[data-look="reader"][data-depth="flat"] .wsinvite, :root[data-look="reader"][data-depth="flat"] .wsrow, :root[data-look="reader"][data-depth="flat"] .speedcard {
  background: transparent !important; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important; box-shadow: none !important; }
:root[data-look="reader"][data-depth="flat"] .shelfhero .cover, :root[data-look="reader"][data-depth="flat"] .cover { box-shadow: none !important; }
/* Soft: the v190 look, one color with fine edges and a light shadow */
:root[data-look="reader"][data-depth="soft"] .card, :root[data-look="reader"][data-depth="soft"] .card.learncard, :root[data-look="reader"][data-depth="soft"] #goalcard,
:root[data-look="reader"][data-depth="soft"] .nowcard, :root[data-look="reader"][data-depth="soft"] #listgrid .lcard, :root[data-look="reader"][data-depth="soft"] .shelfhero {
  background: var(--bg) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 14px 34px rgba(0,0,0,.16) !important; }
:root[data-look="reader"][data-depth="soft"] #listgrid .lcard { border-top: 3px solid var(--lcf, #5c8f9a) !important; }
/* Raised: cards lifted, refined: a rounder light at the top edge and a longer, softer shadow */
:root[data-look="reader"][data-depth="raised"] .card, :root[data-look="reader"][data-depth="raised"] .nowcard, :root[data-look="reader"][data-depth="raised"] #goalcard, :root[data-look="reader"][data-depth="raised"] .shelfhero {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.22), 0 10px 20px rgba(0,0,0,.16), 0 28px 60px rgba(0,0,0,.22) !important; }

/* the bookcase: every shelf card shows 2 shelves of up to 5 books, each on a thick wooden board with a lit top and a shadow under it */
:root { --wood-top: #8a6f55; --wood-face: #6a5441; --wood-edge: #4e3d2f; }
#listgrid .covershelf { background: none !important; grid-auto-rows: calc(var(--sw, 112px) * 1.5 + 34px) !important; min-height: calc((var(--sw, 112px) * 1.5 + 34px) * 2) !important; row-gap: 0 !important; align-content: start;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--sw, 112px) * 1.5),
    var(--wood-top) calc(var(--sw, 112px) * 1.5) calc(var(--sw, 112px) * 1.5 + 4px),
    var(--wood-face) calc(var(--sw, 112px) * 1.5 + 4px) calc(var(--sw, 112px) * 1.5 + 16px),
    var(--wood-edge) calc(var(--sw, 112px) * 1.5 + 16px) calc(var(--sw, 112px) * 1.5 + 18px),
    rgba(0,0,0,.28) calc(var(--sw, 112px) * 1.5 + 18px) calc(var(--sw, 112px) * 1.5 + 24px),
    transparent calc(var(--sw, 112px) * 1.5 + 24px) calc(var(--sw, 112px) * 1.5 + 34px)) !important;
  background-size: 100% calc((var(--sw, 112px) * 1.5 + 34px) * 2) !important; background-repeat: no-repeat !important; padding: 0 10px !important; margin: 4px -10px 0 !important; }
#listgrid .covershelf .cover { align-self: start; }
/* open shelves: the same boards */
.covergroup .covertile::before { height: 18px !important; top: calc(var(--shelfh, 270px)) !important; left: -12px !important; right: -12px !important; border-radius: 0 !important;
  background: linear-gradient(180deg, var(--wood-top) 0 4px, var(--wood-face) 4px 16px, var(--wood-edge) 16px 18px) !important; box-shadow: 0 6px 8px rgba(0,0,0,.28) !important; }
.covergroup .covertile b { margin-top: 30px !important; }
:root[data-depth="flat"] .covergroup .covertile::before { box-shadow: none !important; }
:root[data-depth="flat"] #listgrid .covershelf { background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--sw, 112px) * 1.5), var(--wood-top) calc(var(--sw, 112px) * 1.5) calc(var(--sw, 112px) * 1.5 + 4px),
    var(--wood-face) calc(var(--sw, 112px) * 1.5 + 4px) calc(var(--sw, 112px) * 1.5 + 16px), transparent calc(var(--sw, 112px) * 1.5 + 16px) calc(var(--sw, 112px) * 1.5 + 34px)) !important; }
.colorpop > p + .unit.depthrow, .colorpop .depthrow { margin: 0 0 10px; display: flex; }
.colorpop .depthrow button { flex: 1; }
/* a bookcase is as wide as its 5 books, not the whole card; 2 bookcases sit side by side when there is room */
#listgrid .covershelf { width: max-content !important; max-width: 100%; }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)) !important; column-gap: 24px !important; }
#listgrid .lcard { padding: 20px 20px 16px !important; }
@media (min-width: 1000px) and (max-width: 1500px) { #listgrid .covershelf { grid-template-columns: repeat(5, 96px) !important; --sw: 96px !important; } #listgrid .covershelf .cover { width: 96px !important; height: 144px !important; --cw: 96px !important; } }
#listgrid { grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)) !important; column-gap: 22px !important; }
#listgrid .covershelf { column-gap: 8px !important; }

/* ===================== v193 ===================== */
/* the mark: books and a clock on a shelf, beside the name */
:root[data-look="reader"] .navmark, :root[data-look="reader"] .wordmark .readermark { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; }
.navmark .markicon, .readermark .markicon { grid-row: 1 / span 2; width: 44px !important; height: 37px !important; border-radius: 0 !important; }
.navmark .marktext, .readermark .marktext { grid-column: 2; }
.navmark .markstripe, .readermark .markstripe { grid-column: 2; max-width: 150px; }
:root[data-look="reader"] .navmark .marktext, :root[data-look="reader"] .wordmark .readermark .marktext { font-size: 22px !important; color: #f4f1ec !important; }
/* writing expanded: one color throughout, like the page */
:root[data-look="reader"] #writer.full, :root[data-look="reader"] #writer.full .writer-body, :root[data-look="reader"] #writer.full .toolbar, :root[data-look="reader"] #writer.full select,
:root[data-look="reader"] #writer.full input, :root[data-look="reader"] #writer.full .wherebar, :root[data-look="reader"] #writer.full textarea, :root[data-look="reader"] #writer.full .toolbar button[aria-pressed="true"],
:root[data-look="reader"] #writer.full .toolbar select { background: var(--bg) !important; }
:root[data-look="reader"] #writer.full { background: var(--bg) !important; }
:root[data-look="reader"] #writer.full .writer-body { border: 0 !important; }
:root[data-look="reader"] #writer.full .toolbar { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
:root[data-look="reader"] #writer.full select, :root[data-look="reader"] #writer.full input[type=text] { border: 1px solid rgba(255,255,255,.1) !important; }
/* lines are present, not hairline-thin */
:root[data-look="reader"] { --line: rgba(255,255,255,.12); }
:root[data-look="reader"][data-depth="flat"] .card, :root[data-look="reader"][data-depth="flat"] .nowcard, :root[data-look="reader"][data-depth="flat"] #goalcard, :root[data-look="reader"][data-depth="flat"] .shelfhero,
:root[data-look="reader"][data-depth="flat"] #listgrid .lcard { border: 1.5px solid rgba(255,255,255,.12) !important; }
:root[data-look="reader"][data-depth="flat"] .nowchip, :root[data-look="reader"][data-depth="flat"] .decktile, :root[data-look="reader"][data-depth="flat"] .lrnprompt, :root[data-look="reader"][data-depth="flat"] .practbook,
:root[data-look="reader"][data-depth="flat"] .ovcard, :root[data-look="reader"][data-depth="flat"] .teachbox, :root[data-look="reader"][data-depth="flat"] .piececard, :root[data-look="reader"][data-depth="flat"] .pollcard,
:root[data-look="reader"][data-depth="flat"] .listscard .clist, :root[data-look="reader"][data-depth="flat"] .wsrow, :root[data-look="reader"][data-depth="flat"] .speedcard {
  background: rgba(0,0,0,.14) !important; border: 1px solid rgba(255,255,255,.1) !important; }
/* the Read page's current book is shaded like the rest */
:root[data-look="reader"] .keepcard, :root[data-look="reader"] .libhero, :root[data-look="reader"] #libHero, :root[data-look="reader"] .herocard { background: rgba(0,0,0,.14) !important; border: 1px solid rgba(255,255,255,.1) !important; }
/* shelf cards: no colored band on top */
:root[data-look="reader"] #listgrid .lcard, :root[data-look="reader"][data-depth="flat"] #listgrid .lcard, :root[data-look="reader"][data-depth="soft"] #listgrid .lcard { border-top: 1.5px solid rgba(255,255,255,.12) !important; }
/* shelves seen from a little above: a deep lit top you can see books standing on, a slim front edge, a soft shadow; nothing jutting out */
:root { --wood-top: #7d6650; --wood-face: #5c4838; --wood-edge: #45362a; }
#listgrid .covershelf { background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--sw, 112px) * 1.5 - 8px),
    color-mix(in srgb, var(--wood-top) 70%, #000) calc(var(--sw, 112px) * 1.5 - 8px) calc(var(--sw, 112px) * 1.5 + 6px),
    var(--wood-face) calc(var(--sw, 112px) * 1.5 + 6px) calc(var(--sw, 112px) * 1.5 + 11px),
    rgba(0,0,0,.22) calc(var(--sw, 112px) * 1.5 + 11px) calc(var(--sw, 112px) * 1.5 + 16px),
    transparent calc(var(--sw, 112px) * 1.5 + 16px) calc(var(--sw, 112px) * 1.5 + 34px)) !important; }
#listgrid .covershelf .cover { margin-bottom: 0 !important; }
.covergroup .covertile::before { top: calc(var(--shelfh, 270px) - 8px) !important; height: 19px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--wood-top) 70%, #000) 0 14px, var(--wood-face) 14px 19px) !important; box-shadow: 0 5px 6px rgba(0,0,0,.2) !important; }
.covergroup .covertile .cover { z-index: 2; }
/* Shelves and Read: a clear, sizeable switch, like an app */
:root[data-look="reader"] .shelftabs { display: inline-flex !important; gap: 4px !important; padding: 5px !important; border-radius: 14px !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.1) !important; margin-bottom: 22px !important; }
:root[data-look="reader"] .shelftabs button { font-size: 22px !important; padding: 10px 26px !important; border-radius: 10px !important; color: var(--ink-soft) !important; }
:root[data-look="reader"] .shelftabs button[aria-selected="true"] { background: rgba(255,255,255,.08) !important; color: #f4f1ec !important; }
:root[data-look="reader"] .shelftabs button[aria-selected="true"]::after { left: 26px; right: 26px; bottom: 6px; }
/* Reading now: whole cards only, nothing cut off at the edge */
#nowrow { -webkit-mask-image: none !important; mask-image: none !important; grid-auto-columns: calc((100% - 28px) / 3) !important; overflow-x: auto; scroll-snap-type: x mandatory; }
@media (min-width: 600px) and (max-width: 1100px) { #nowrow { grid-auto-columns: calc((100% - 14px) / 2) !important; } }
@media (max-width: 599px) { #nowrow { grid-auto-columns: 100% !important; } }
.nowcard { overflow: hidden; }
/* highlights: a clean, full highlight over the words, soft teal that sits well on the page */
:root[data-look="reader"] .hlrow .hltext, :root[data-look="reader"] .hlrow blockquote, :root[data-look="reader"] .hlmark, :root[data-look="reader"] .hlrow .hlquote span {
  background: rgba(125, 176, 190, .28) !important; background-image: none !important; color: #f6f3ee !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 1px 3px; border-radius: 2px; }
/* no square outlines on text buttons: plain text, or a pill where a button needs a shape */
:root[data-look="reader"] .linkbtn, :root[data-look="reader"] .ovhead button, :root[data-look="reader"] .speedtoggle, :root[data-look="reader"] #ovPin .linkbtn { border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; border-radius: 999px !important; padding: 4px 10px !important; }
:root[data-look="reader"] .linkbtn:hover, :root[data-look="reader"] .ovhead button:hover { background: rgba(255,255,255,.06) !important; }
:root[data-look="reader"] button:focus { outline: none; }
:root[data-look="reader"] button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 999px; }
/* the vote leader: a soft sage mark, not a red box */
:root[data-look="reader"] .voterow.lead { border: 1px solid rgba(157,187,168,.45) !important; box-shadow: none !important; background: rgba(157,187,168,.08) !important; }
/* the calculator's By page count and By word count switch, flat and clean */
:root[data-look="reader"] #page-calc .unit, :root[data-look="reader"] .unit.modeunit { background: transparent !important; border: 1px solid rgba(255,255,255,.12) !important; }
:root[data-look="reader"] #page-calc .unit button { background: transparent !important; }
:root[data-look="reader"] #page-calc .unit button[aria-selected="true"], :root[data-look="reader"] #page-calc .unit button[aria-pressed="true"] { background: rgba(255,255,255,.08) !important; color: #f4f1ec !important; }
/* writing prompt: the down arrow for another one */
.wsprompt { padding-right: 52px !important; }
.wspromptnext { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wsline); background: transparent; cursor: pointer; }
.wspromptnext::before { content: ''; position: absolute; left: 11px; top: 9px; width: 8px; height: 8px; border-right: 1.6px solid var(--wssoft); border-bottom: 1.6px solid var(--wssoft); transform: rotate(45deg); }
.wspromptnext:hover { background: var(--wsline); }
/* focus mode: the dock steps away and your page fills the window; one small button brings it back */
body.focus .nav > *:not(#focusBtn) { display: none !important; }
body.focus .nav { position: fixed !important; left: 12px !important; top: 12px !important; bottom: auto !important; right: auto !important; width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.focus #focusBtn { display: inline-flex !important; width: auto !important; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(0,0,0,.35) !important; color: var(--ink) !important; }
body.focus #focusBtn::after { content: 'Leave focus' !important; font-size: 13.5px; margin-left: 8px; }
:root[data-look="reader"] body.focus { padding-left: 0 !important; }
body.focus header, body.focus .wordmark { display: none !important; }
body.focus .wrap { max-width: 1400px !important; }
/* highlights in Desk: a clean full-height highlight, soft sea-glass that sits well on the page, the words bright above it */
:root[data-look="reader"] .hlrow mark { background: rgba(125, 176, 190, .30) !important; background-image: none !important; color: #f6f3ee !important; padding: 2px 3px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:root[data-look="reader"] .hlrow p { font-size: 19px !important; line-height: 1.7 !important; }

/* the calendar, made for a person and a day, not a spreadsheet */
:root[data-look="reader"] .wkgrid { border: 0 !important; background: transparent !important; border-radius: 0 !important; overflow: visible; }
:root[data-look="reader"] .wkhead, :root[data-look="reader"] .wkallday { border: 0 !important; gap: 10px; grid-template-columns: 56px repeat(7, minmax(0, 1fr)) !important; }
:root[data-look="reader"] .wkday { border: 0 !important; border-radius: 16px 16px 0 0; padding: 14px 0 10px !important; background: rgba(255,255,255,.035) !important; }
:root[data-look="reader"] .wkday small { color: var(--ink-faint) !important; }
:root[data-look="reader"] .wkday b { font-size: 26px !important; color: #f4f1ec !important; }
:root[data-look="reader"] .wkday.today { background: rgba(208,133,102,.14) !important; }
:root[data-look="reader"] .wkday.today b { background: var(--action) !important; color: #fff !important; }
:root[data-look="reader"] .wkadcell { border: 0 !important; background: rgba(255,255,255,.035); }
:root[data-look="reader"] .wkbody { gap: 0 10px; grid-template-columns: 56px repeat(7, minmax(0, 1fr)) !important; background-image: none !important; }
:root[data-look="reader"] .wkcol { border: 0 !important; background: rgba(255,255,255,.035) !important; border-radius: 0 0 16px 16px;
  background-image: repeating-linear-gradient(180deg, transparent 0 43px, rgba(255,255,255,.05) 43px 44px) !important; }
:root[data-look="reader"] .wkcol.today { background-color: rgba(208,133,102,.08) !important; }
:root[data-look="reader"] .wkgutter span { color: var(--ink-faint) !important; font-size: 11.5px !important; }
:root[data-look="reader"] .wkscroll { border-radius: 0 0 16px 16px; }
/* events carry real color and sit like notes on the day */
:root[data-look="reader"] .calchip { background: color-mix(in srgb, var(--ic) 62%, var(--bg)) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
:root[data-look="reader"] .calchip .cct { color: #fbf8f3 !important; font-weight: 700 !important; }
:root[data-look="reader"] .calchip small { color: rgba(251,248,243,.82) !important; }
:root[data-look="reader"] .calchip.k-read { background: color-mix(in srgb, #5c8f9a 70%, var(--bg)) !important; }
:root[data-look="reader"] .calchip.k-club { background: color-mix(in srgb, #d08566 78%, var(--bg)) !important; }
:root[data-look="reader"] .calchip.k-plan { background: color-mix(in srgb, #d9a95a 62%, var(--bg)) !important; }
:root[data-look="reader"] .calchip.k-ext { background: color-mix(in srgb, #8f8a85 45%, var(--bg)) !important; }
.calchip.hascover { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.calchip.hascover .chipcover { grid-row: 1 / span 2; width: 30px !important; height: 45px !important; --cw: 30px !important; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.calchip.hascover .chipcover .ct, .calchip.hascover .chipcover .ca, .calchip.hascover .chipcover .artpanel { display: none !important; }
.wkev.hascover { padding: 6px 8px !important; }
:root[data-look="reader"] .mcell { background: rgba(255,255,255,.035) !important; border: 0 !important; border-radius: 12px !important; }
:root[data-look="reader"] .mcell.today { background: rgba(208,133,102,.12) !important; box-shadow: none !important; }
:root[data-look="reader"] .arow { background: rgba(255,255,255,.035) !important; border: 0 !important; border-radius: 16px !important; }
:root[data-look="reader"] .wknow { background: var(--action) !important; height: 2px; }
/* the floating bar never blocks the dock */
.floatbar, .floatrow { pointer-events: none !important; }
.floatbar .floatrow > *, .floatbar > *:not(.floatrow) { pointer-events: auto !important; }
@media (min-width: 700px) { :root[data-look="reader"] .floatbar { left: calc(50% + 116px) !important; } }

/* ===================== v194 ===================== */
/* shelves: a real board seen a little from above, light oak: you see its top, then its front edge, then a soft shadow */
.shelfcase { display: block; width: max-content; max-width: 100%; margin: 6px 0 4px; }
.shelfrow { display: flex; gap: 10px; align-items: flex-end; padding: 0 14px; min-height: calc(var(--sw, 112px) * 1.5); position: relative; z-index: 1; }
.shelfrow .cover { flex: none; margin-bottom: -6px; }
.shelfboard { position: relative; height: 26px; margin: 0 0 18px; }
.shelfboard .top { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(180deg, #d9c3a2, #c7ad88); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.shelfboard .front { position: absolute; left: 0; right: 0; top: 16px; height: 9px; background: linear-gradient(180deg, #a98a66, #917253); border-radius: 0 0 3px 3px; box-shadow: 0 8px 14px rgba(0,0,0,.28); }
:root[data-depth="flat"] .shelfboard .front { box-shadow: none; }
.shelfcase .moreshelf { align-self: center; }
/* open shelves: the same light board under each cover */
.covergroup .covertile::before { top: calc(var(--shelfh, 270px) - 10px) !important; height: 25px !important; left: -14px !important; right: -14px !important;
  background: linear-gradient(180deg, #d9c3a2 0, #c7ad88 16px, #a98a66 16px, #917253 25px) !important; box-shadow: 0 8px 14px rgba(0,0,0,.25) !important; border-radius: 0 0 3px 3px !important; }
/* Back up and Undo sit above the page on their own ground, and the page starts below them */
.topbtns { background: var(--bg); border-radius: 999px; padding: 4px; box-shadow: 0 0 0 6px var(--bg); z-index: 50 !important; }
@media (min-width: 700px) { :root[data-look="reader"] .wrap { padding-top: 64px !important; } }
/* the calculator's book rows: light, airy fields with a line beneath, not heavy dark boxes */
:root[data-look="reader"] #page-calc .bookrow input, :root[data-look="reader"] #page-calc #booklist input, :root[data-look="reader"] #page-calc .rowinput, :root[data-look="reader"] #page-calc select {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; border-radius: 0 !important; }
:root[data-look="reader"] #page-calc input:focus { border-bottom-color: var(--action) !important; }
/* the Read page's current book: one card, no second box around it */
:root[data-look="reader"] .libhero, :root[data-look="reader"] #libHero { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Read page shelf sections: deeper, richer tints */
.libshelf { background: color-mix(in srgb, color-mix(in srgb, var(--sc) 26%, var(--bg)) 82%, #000) !important; border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent) !important; border-radius: 18px !important; }
/* the logo: BOOKCLOCK, one long colored shelf beneath it, and the books and clock standing on its right end */
:root[data-look="reader"] .navmark, :root[data-look="reader"] .wordmark .readermark { display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; column-gap: 8px !important; row-gap: 0 !important; align-items: end !important; justify-content: start !important; }
.navmark .marktext, .readermark .marktext { grid-column: 1 !important; grid-row: 1 !important; padding-bottom: 6px; }
.navmark .markicon, .readermark .markicon { grid-column: 2 !important; grid-row: 1 !important; width: 46px !important; height: 36px !important; align-self: end; margin-bottom: 0; }
.navmark .markstripe, .readermark .markstripe { grid-column: 1 / -1 !important; grid-row: 2 !important; max-width: none !important; width: 100% !important; height: 5px !important; }
/* club page: Invite and More sit in the header; the tabs are rounded; fewer boxes in a row */
.clubtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clubtop .clubmark { margin-right: auto; }
.clubtoolsrow.inhead { margin: 0 !important; order: 2; }
.clubtoolsrow.inhead .primary { padding: 8px 16px !important; font-size: 14px; border-radius: 999px !important; }
.clubtoolsrow.inhead .clubmore { padding: 8px 14px !important; border-radius: 999px !important; }
.clubtop > button:last-of-type { order: 3; }
:root[data-look="reader"] .clubtabs { background: rgba(0,0,0,.16) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 999px !important; padding: 5px !important; gap: 4px !important; display: flex !important; }
:root[data-look="reader"] .clubtabs button { border-radius: 999px !important; padding: 9px 18px !important; flex: 1 1 0 !important; }
:root[data-look="reader"] .clubtabs button[aria-selected="true"] { background: rgba(255,255,255,.09) !important; box-shadow: none !important; }
/* what people are noticing: 2 even columns that never run into each other */
.ovnotes .ovquote { width: calc(50% - 7px) !important; margin: 0 14px 14px 0 !important; overflow: hidden; word-wrap: break-word; }
.ovnotes .ovquote:nth-of-type(2n) { margin-right: 0 !important; }
.ovnotes { overflow: hidden; }
@media (max-width: 700px) { .ovnotes .ovquote { width: 100% !important; margin-right: 0 !important; } }
/* the colors panel: fits, has a handle to move it, a tuck button and a close button */
.colorpop { width: 300px !important; padding: 10px 14px 14px !important; }
.colorrow { grid-template-columns: repeat(6, 34px) !important; gap: 10px !important; justify-content: space-between; }
.colordot { width: 34px !important; height: 34px !important; }
.colorhead { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.colorgrab { flex: 1; height: 18px; cursor: grab; background: radial-gradient(circle, rgba(255,255,255,.28) 1.2px, transparent 1.6px) 0 50% / 8px 8px repeat-x; }
.colormini, .colorclose { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; font-size: 16px; line-height: 26px; padding: 0; }
.colormini::before { content: ''; display: block; width: 10px; height: 1.6px; margin: 0 auto; background: currentColor; }
.colorpop.tucked { width: 44px !important; height: 44px; padding: 0 !important; border-radius: 50% !important; overflow: hidden; cursor: pointer; background: conic-gradient(#5c8f9a, #9dbba8, #d9a95a, #d08566, #8fb4bf, #5c8f9a) !important; }
.colorpop.tucked > * { display: none !important; }
:root[data-look="reader"] #rows .brow input, :root[data-look="reader"] .booklist input { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; border-radius: 0 !important; box-shadow: none !important; }
:root[data-look="reader"] .booklist input:focus { border-bottom-color: var(--action) !important; }
@media (min-width: 1000px) and (max-width: 1500px) { .shelfcase .cover { width: 92px !important; height: 138px !important; --cw: 92px !important; } .shelfrow { min-height: 138px; gap: 8px; padding: 0 10px; } }
.shelfcase { max-width: 100%; overflow: visible; }

/* ---------- Desk, Notebook and Drawer (v202) ---------- */
.dkoff { display: none !important; }
.desktabs { margin-bottom: 16px !important; }
@media (max-width: 560px) { .desktabs button { padding: 10px 16px !important; font-size: 15px !important; } }
.deskbar, .drawerhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.deskchip { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.deskchip.main { background: var(--action); border-color: var(--action); color: #fff; }
.deskadd { position: relative; }
.desktray { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(5, 84px); gap: 6px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(20,24,28,.18); }
.traybtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.traybtn:hover { background: var(--field); }
.traybtn i { display: block; width: 40px; height: 40px; border-radius: 4px; box-shadow: 0 2px 6px rgba(20,24,28,.18); }
.t-note i { background: #f1e6b8; transform: rotate(-4deg); }
.t-todo i { background: #fdfcf9 repeating-linear-gradient(transparent 0 9px, rgba(0,0,0,.12) 9px 10px); transform: rotate(2deg); }
.t-book i { width: 28px; background: #3f6f7a; border-radius: 2px 4px 4px 2px; }
.t-piece i { width: 32px; background: #fdfcf9; border-top: 4px solid #c8765a; }
.t-quote i { background: #fbfaf7; border-top: 4px solid #d9a441; transform: rotate(-2deg); }
@media (max-width: 560px) { .desktray { grid-template-columns: repeat(3, 84px); } }
.desktray.hidden, .dkdesk.hidden, .clubcomm.hidden { display: none; }
.deskcolors { display: flex; gap: 7px; margin-left: auto; }
.deskcolors button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); padding: 0; cursor: pointer; }
.deskcolors button.on { outline: 2px solid var(--c-blue); outline-offset: 2px; }
@media (max-width: 560px) { .deskcolors { margin-left: 0; width: 100%; } }
.deskouter { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: 14px; background: var(--desk); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -24px 36px -30px rgba(0,0,0,.25); touch-action: pan-x pan-y; }
.desksize { position: relative; }
.deskin { position: absolute; left: 0; top: 0; width: 1000px; transform-origin: 0 0; }
.deskempty { position: absolute; left: 0; right: 0; top: 150px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.deskempty .ghost { width: 170px; height: 150px; border: 2px dashed rgba(0,0,0,.2); border-radius: 10px; background: rgba(255,255,255,.25); font: inherit; font-size: 17px; font-weight: 600; color: rgba(0,0,0,.5); cursor: pointer; }
.deskouter.dark .deskempty .ghost { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); }
.deskempty p { flex-basis: 100%; text-align: center; margin: 10px 0 0; font-size: 17px; color: rgba(0,0,0,.45); }
.deskouter.dark .deskempty p { color: rgba(255,255,255,.5); }
.ditem { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; transition: box-shadow .15s; }
.ditem.lift { cursor: grabbing; z-index: 5; box-shadow: 0 22px 40px rgba(20,24,28,.3) !important; }
.ditem .dx { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #2f383b; color: #fff; font-size: 17px; line-height: 26px; padding: 0; cursor: pointer; opacity: 0; transition: opacity .15s; }
.ditem:hover .dx, .ditem:focus-within .dx { opacity: 1; }
@media (hover: none) { .ditem .dx { opacity: .85; width: 24px; height: 24px; line-height: 24px; } }
.d-note { width: 190px; min-height: 170px; padding: 18px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 18px rgba(20,24,28,.14); color: #2b2622; }
.dnotetext { font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.35; min-height: 130px; outline: none; cursor: text; white-space: pre-wrap; word-break: break-word; }
.dnotetext:empty::before { content: attr(data-ph); color: rgba(43,38,34,.4); font-style: italic; }
.d-todo { width: 240px; padding: 16px 16px 14px; background: #fdfcf9; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 22px rgba(20,24,28,.16); color: #2b2622; }
.dtodotitle { width: 100%; border: 0; background: transparent; font-family: Newsreader, Georgia, serif; font-size: 21px; color: #2b2622; padding: 0 0 6px; outline: none; }
.dtodorow { display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(0,0,0,.08); padding: 6px 0; }
.dtodorow input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: #2b2622; outline: none; }
.dtodorow.done input { text-decoration: line-through; color: #9a918a; }
.dck { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #b89a52; background: transparent; padding: 0; cursor: pointer; }
.dtodorow.done .dck { background: #d9a441; border-color: #d9a441; }
.d-quote { width: 290px; padding: 22px 22px 18px; background: #fbfaf7; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 22px rgba(20,24,28,.16); color: #2b2622; }
.d-quote::before { content: ''; position: absolute; left: 22px; top: 0; width: 34px; height: 5px; background: var(--hc, #d9a441); border-radius: 0 0 3px 3px; }
.d-quote blockquote { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 19px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.d-quote.open blockquote { -webkit-line-clamp: unset; }
.d-quote small { display: block; margin-top: 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #7a7168; }
.d-piece { width: 250px; padding: 20px 20px 22px; background: #fdfcf9; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 22px rgba(20,24,28,.16); color: #2b2622; }
.d-piece small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a8178; }
.d-piece b { display: block; margin: 4px 0 8px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.2; }
.d-piece p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 15px; line-height: 1.5; color: #4a443e; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.d-book .cover { box-shadow: 0 12px 24px rgba(20,24,28,.28); pointer-events: none; }
.d-book .dpct { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(20,24,28,.72); color: #fff; font-size: 12px; font-weight: 700; }
.drawertray { padding: 6px 0 20px; }
.drawerempty { padding: 48px 12px; text-align: center; color: var(--ink-faint); font-size: 16px; margin: 0; }
.drawertray h3 { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 20px; margin: 18px 0 10px; color: var(--ink); }
.drawergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dfile { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.dfile b { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfile small { font-size: 12px; color: var(--ink-faint); }
.dthumb { display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 6px; border: 0; border-radius: 10px; background: var(--field); cursor: pointer; overflow: hidden; padding: 0; }
.dthumb img { width: 100%; height: 100%; object-fit: cover; }
.dthumb span { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--c-blue); }
.dacts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.dacts button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 2px 0; border: 0; background: none; color: var(--c-blue); cursor: pointer; }
@media (max-width: 560px) { .drawergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.dviewer { display: none; }
.dviewer.show { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #1c2124; color: #e9e4dc; }
.dvtop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.dvtop b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvx { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 22px; line-height: 36px; padding: 0; cursor: pointer; }
.dvdl { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; }
.dvbody { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 16px; }
.dvbody img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dvbody iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.dvbody video { max-width: 100%; max-height: 100%; }
.dv-text { align-items: stretch; }
.dv-text pre { margin: 0; width: 100%; max-width: 760px; overflow: auto; padding: 24px; border-radius: 10px; background: #fbfaf7; color: #2b2622; white-space: pre-wrap; word-break: break-word; font: 15px/1.6 Georgia, serif; }
.dvnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; cursor: pointer; }
.dvnav.l { left: 14px; } .dvnav.r { right: 14px; }

/* ---------- Community in Clubs (v202) ---------- */
.clubswitch { margin-bottom: 16px !important; }
.commsearch { max-width: 720px; margin: 0 auto 18px; }
.commsearch input { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.commres { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.commhit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.commhit small { color: var(--ink-faint); font-size: 12.5px; }
.commhit.new b { color: var(--action); }
.commgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.commdoor { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.commdoor h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); }
.commdoor p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
.commdoor b { font-size: 16px; color: var(--ink); }
.commrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.commrow a.deskchip { text-decoration: none; }
.commlink { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--c-blue); cursor: pointer; padding: 4px; }
.commform { display: flex; flex-wrap: wrap; gap: 8px; }
.commform input { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.commsoon { color: var(--ink-faint); font-size: 12.5px; }
.d-todo input, .d-todo .dtodotitle { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; min-height: 0 !important; color: #2b2622 !important; }
.d-todo .dtodorow.done input { color: #9a918a !important; }
.d-todo input::placeholder { color: rgba(43,38,34,.4) !important; }

/* ---------- v203: quieter shelves, one tab style, the color ball ---------- */
details.pacebox.hidden, .statline.hidden { display: none !important; }
.listquiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 10px; font-size: 16px; color: var(--ink-soft); }
.listquiet .linkbtn { font-size: 14px; padding: 0; }
.listquiet .linkbtn.hidden { display: none; }
.listhead { flex-wrap: wrap !important; row-gap: 8px !important; }
.listhead .splitbtn { white-space: nowrap !important; order: 10; }
/* switches: a round pill; both sides carry weight in the wordmark's blue, the open side sits on a lifted pill with a terracotta line */
:root .shelftabs.shelftabs { display: flex !important; width: max-content !important; max-width: 100% !important; margin: 0 0 18px !important; gap: 4px !important; padding: 5px !important; border-radius: 999px !important; background: rgba(0,0,0,.16) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
:root .shelftabs.shelftabs button { font-family: Newsreader, Georgia, serif !important; font-size: 21px !important; font-weight: 500 !important; padding: 9px 26px 11px !important; min-width: 0 !important; max-width: none !important; border-radius: 999px !important; color: var(--c-blue) !important; background: transparent !important; box-shadow: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; position: relative; }
:root .shelftabs.shelftabs button[aria-selected="true"] { background: rgba(255,255,255,.09) !important; color: var(--ink) !important; box-shadow: 0 4px 12px rgba(0,0,0,.2) !important; }
:root .shelftabs.shelftabs button::after { content: none !important; }
:root .shelftabs.shelftabs button[aria-selected="true"]::after { content: '' !important; position: absolute; left: 26px; right: 26px; bottom: 5px; top: auto; height: 2px; border-radius: 2px; background: var(--action); }
:root[data-theme="light"]:not([data-look="reader"]) .shelftabs.shelftabs { background: rgba(0,0,0,.05) !important; }
:root[data-theme="light"]:not([data-look="reader"]) .shelftabs.shelftabs button[aria-selected="true"] { background: #fff !important; box-shadow: 0 2px 8px rgba(40,44,52,.12) !important; }
@media (max-width: 560px) { :root .shelftabs.shelftabs button { font-size: 18px !important; padding: 8px 16px 10px !important; } :root .shelftabs.shelftabs button[aria-selected="true"]::after { left: 16px; right: 16px; } }
body.colorball #navColors { display: none !important; }
.colorpop.tucked { touch-action: none; cursor: grab !important; box-shadow: 0 8px 22px rgba(0,0,0,.35) !important; }
.phonetop { display: none; }
@media (max-width: 699px) {
  .phonetop { display: flex; gap: 8px; position: absolute; top: 14px; left: 14px; z-index: 30; }
  .phoneread, .phonecolors { width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 1px solid var(--line); background: var(--field); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
  .phoneread svg { width: 18px; height: 18px; }
  .phoneread.cover { border-radius: 6px; width: 26px; height: 38px; margin-top: -2px; }
  .phoneread.cover img { width: 100%; height: 100%; object-fit: cover; }
  .phonecolors { background: conic-gradient(#5c8f9a, #9dbba8, #d9a441, #c8765a, #8e7aa6, #5c8f9a); border-color: rgba(255,255,255,.25); }
  body.colorball .phonecolors { display: none; }
}
body.reading .phonetop, body.wsopen .phonetop, body.insheet .phonetop, body.reading 
/* switches: every side the same width, so the pill reads as even */
:root .shelftabs.shelftabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; }
:root .shelftabs.shelftabs button { text-align: center !important; justify-content: center !important; padding-left: 22px !important; padding-right: 22px !important; }
:root .shelftabs.shelftabs button[aria-selected="true"]::after { left: 30% !important; right: 30% !important; }
@media (max-width: 560px) { :root .shelftabs.shelftabs button { padding-left: 12px !important; padding-right: 12px !important; font-size: 17px !important; } }
/* the color picker's head: a small centered handle to drag by, the 2 buttons quiet at the right */
.colorpop .colorhead { position: relative; justify-content: flex-end; height: 26px; margin: -4px 0 4px !important; }
.colorpop .colorgrab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; flex: none; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22) !important; cursor: grab; }
.colorpop .colorgrab::before { content: ''; position: absolute; inset: -12px -40px; }
.colorpop .colormini, .colorpop .colorclose { width: 24px; height: 24px; line-height: 24px; background: transparent !important; color: var(--ink-faint) !important; font-size: 15px; }
.colorpop .colormini:hover, .colorpop .colorclose:hover { color: var(--ink) !important; background: rgba(255,255,255,.07) !important; }
:root[data-theme="light"] .colorpop .colorgrab { background: rgba(0,0,0,.18) !important; }
/* shelves: each book has its own Read button, so the shelf's Read is not needed */
#listRead { display: none !important; }
:root:root .shelftabs.shelftabs.shelftabs button[aria-selected="true"] { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; box-shadow: 0 3px 10px rgba(0,0,0,.18) !important; }
:root:root[data-theme="light"]:not([data-look="reader"]) .shelftabs.shelftabs.shelftabs button[aria-selected="true"] { background: #fff !important; }
:root:root #clubSwitch.shelftabs.shelftabs, :root:root #deskTabs.shelftabs.shelftabs, :root:root #shelfTabs.shelftabs.shelftabs { width: max-content !important; max-width: 100% !important; margin-left: 0 !important; margin-right: auto !important; }

/* v205: switch ends follow the pill's curve; a middle button stays square, which marks Desk as home base */
:root:root .shelftabs.shelftabs.shelftabs > button { border-radius: 0 !important; }
:root:root .shelftabs.shelftabs.shelftabs > button:first-child { border-radius: 999px 0 0 999px !important; }
:root:root .shelftabs.shelftabs.shelftabs > button:last-child { border-radius: 0 999px 999px 0 !important; }
:root:root .shelftabs.shelftabs.shelftabs > button:first-child:last-child { border-radius: 999px !important; }
:root:root #deskTabs.shelftabs.shelftabs > button[data-dv="desk"] { font-weight: 600 !important; }

/* v205: the shelf's Share and More live in one quiet … menu */
.listframe .listfoot.top #moreOpen.shelfdots { min-width: 40px; padding: 4px 10px !important; font-size: 16px !important; line-height: 1; letter-spacing: .08em; background: transparent !important; border-color: transparent !important; color: var(--ink-soft) !important; }
.listframe .listfoot.top #moreOpen.shelfdots:hover { background: var(--surface-2) !important; }
.moremenu .moresep { display: block; height: 1px; margin: 4px 8px; background: var(--line); }
.moremenu { min-width: 220px; }

/* v205: one color control; the reader's themes and the writing papers borrow the picker while it is out */
.colorpop { --rline: var(--line); --rchip: var(--surface-2); --rink: var(--ink); --rsoft: var(--ink-faint); }
.colorpop:not([data-where="site"]) .colorsite, .colorpop[data-where="site"] .colorhere, .colorpop:not([data-where]) .colorhere { display: none !important; }
.colorpop .colorhere { margin: 0 0 4px; }
.colorpop .colorhere .rdthemes { gap: 6px; }
.colorpop .colorhere .rddot { width: 30px; height: 30px; }
.colorpop .colorhere .rdswmore { color: var(--ink-soft); }
.colorpop .colorhere .wspapers { border: 0 !important; padding: 2px 0 !important; margin: 0 !important; display: block !important; }
body.bc-rdopen .colorpop { z-index: 2147483000; }

/* v205: papers; the 3 whites carry a warmth slider, and a 4th swatch opens a paper of your own */
.wspapers { display: block !important; }
.wsswatches { display: flex; flex-wrap: wrap; gap: 10px; }
.wsswatches .wsbreak { flex-basis: 100%; height: 0; }
.wsswatch.wsown { background: conic-gradient(from 20deg, #efe3d3, #e6ecdf, #dde8ec, #e6e0ee, #f0e0e0, #efe3d3) !important; }
.wsslide { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 12px; color: var(--ink-faint); }
.wsslide span { flex: none; min-width: 34px; }
.wsslide span:last-child { text-align: right; }
.wsslide input[type="range"] { flex: 1; min-width: 0; height: 10px; border-radius: 6px; -webkit-appearance: none; appearance: none; background: var(--surface-2); border: 1px solid var(--line); padding: 0; margin: 0; }
.wsslide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--field); border: 2px solid var(--ink-soft); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
.wsslide input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--field); border: 2px solid var(--ink-soft); cursor: pointer; }
.wsown2 { display: flex; gap: 6px; margin: 10px 0 2px; }
.wsown2 button { flex: 1; padding: 5px 10px !important; border-radius: 999px !important; font-size: 13px; border: 1px solid var(--line) !important; background: transparent !important; color: var(--ink-soft) !important; }
.wsown2 button[aria-pressed="true"] { background: var(--surface-2) !important; color: var(--ink) !important; }
.colorpop .colorhere .wsswatches { gap: 8px; }
.colorpop .colorhere .wsswatch { width: 26px !important; height: 26px !important; }
.wsown2 button[aria-pressed="true"] { border-color: var(--ink-faint) !important; font-weight: 600; }
/* v206: the shelf's speed is read-only, from speed tests */
.lpspeed { display: grid; gap: 2px; align-content: start; }
.lpspeed > span { font-size: 12px; color: var(--ink-soft); }
.lpspeed p { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-family: Newsreader, Georgia, serif; font-size: 22px; color: var(--ink); }
.lpspeed .lplock { width: 15px; height: 15px; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; }
.lpspeed small { font-size: 12px; color: var(--ink-faint); }
.lpspeed .linkbtn { justify-self: start; padding: 0 !important; font-size: 13px; }

/* v207: the writing timer */
.wstimebtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; min-width: 32px; padding: 0 8px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--wssoft, var(--ink-faint)) !important; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.wstimebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; flex: none; }
.wstimebtn.on { color: var(--action, #c8765a) !important; background: rgba(200,118,90,.1) !important; }
.wstimebtn span:empty { display: none; }
.wstimepanel { position: absolute; right: 12px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 6; width: min(320px, calc(100vw - 24px)); box-sizing: border-box; padding: 14px; background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); display: grid; gap: 10px; font-family: "Plus Jakarta Sans", -apple-system, sans-serif; }
.wstimepanel.hidden { display: none; }
.wstimepanel .wtHead { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.wtchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wtchips button, .wtrow button { font: inherit; font-size: 13px; padding: 6px 12px !important; border-radius: 999px !important; border: 1px solid var(--line) !important; background: transparent !important; color: var(--ink-soft) !important; cursor: pointer; }
.wtchips button[aria-pressed="true"] { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--ink-faint) !important; }
.wtnum { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); width: 100%; box-sizing: border-box; }
.wtnum.hidden { display: none; }
.wstimepanel .wtgo { background: #c8765a !important; color: #fff !important; border-color: #c8765a !important; }
.wstimepanel .wtstart { font: inherit; font-size: 15px; font-weight: 600; padding: 10px !important; border-radius: 10px !important; border: 0 !important; cursor: pointer; }
.wtrow { display: flex; gap: 8px; flex-wrap: wrap; }
.wtgoal { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.wtgoal p, .wtstats { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.wtstats { color: var(--ink-faint); }

/* v207: the color picker stays out in the reader too, the owner's choice */
body.bc-rdopen .colorpop, body.reading .colorpop.tucked { display: block !important; }

/* v208: the timer wears the page's own paper, so it never turns into a gray box on a light paper */
.wssheet .wstimepanel { background: var(--wsbg) !important; color: var(--wsink) !important; border-color: var(--wsline, rgba(0,0,0,.1)) !important; box-shadow: 0 14px 36px rgba(0,0,0,.16), 0 0 0 1px var(--wsline, rgba(0,0,0,.08)) !important; }
.wssheet.wsdark .wstimepanel { box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) !important; }
.wssheet .wstimepanel .wtHead, .wssheet .wstimepanel .wtstats { color: var(--wssoft) !important; }
.wssheet .wstimepanel .wtgoal p { color: var(--wsink) !important; opacity: .85; }
.wssheet .wstimepanel .wtchips button, .wssheet .wstimepanel .wtrow button:not(.wtgo) { color: var(--wsink) !important; border-color: var(--wsline, rgba(0,0,0,.12)) !important; background: transparent !important; -webkit-tap-highlight-color: transparent; }
.wssheet .wstimepanel .wtchips button[aria-pressed="true"] { border-color: var(--wsink) !important; font-weight: 600; }
.wssheet .wstimepanel input.wtnum { text-align: left; font-size: 18px !important; font-weight: 600; color: var(--wsink) !important; background: transparent !important; border: 1px solid var(--wsline, rgba(0,0,0,.14)) !important; border-radius: 10px !important; padding: 8px 12px !important; }
.wssheet .wstimepanel .wtgoal { border-top-color: var(--wsline, rgba(0,0,0,.1)); }
.wssheet .wstimebtn { -webkit-tap-highlight-color: transparent; }
/* v208: phones keep only the color button in the top corner; Keep reading moved into the picker */
.phoneread { display: none !important; }
.colorpop .colorread { display: none; }
@media (max-width: 699px) {
  .colorpop .colorread:not(.colorsite-off) { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 8px !important; border-radius: 10px !important; border: 1px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  .colorpop:not([data-where="site"]) .colorread { display: none !important; }
  .colorpop .colorread img { width: 34px; height: 50px; object-fit: cover; border-radius: 3px; flex: none; }
  .colorpop .colorread svg { width: 22px; height: 22px; flex: none; }
  .colorpop .colorread span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .phonecolors { touch-action: none; -webkit-tap-highlight-color: transparent; }
  .phonecolors.placed { position: fixed; z-index: 45; }
}

/* v208: Mist, the one light theme. Wells that were darker than the page on dark themes become soft white here */
:root:root[data-light] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root:root[data-light] select, :root:root[data-light] textarea, :root:root[data-light] #synccode { background-color: #faf9f7 !important; color: var(--ink) !important; border-color: rgba(38,42,46,.14) !important; }
:root:root[data-light] .wssheet input, :root:root[data-light] .wssheet textarea { background-color: transparent !important; color: var(--wsink) !important; }
:root:root[data-light] .nowchip, :root:root[data-light] .wsrow, :root:root[data-light] .lookback, :root:root[data-light] .lrnprompt, :root:root[data-light] .decktile,
:root:root[data-light] #ovPin, :root:root[data-light] #ovTalkWrap, :root:root[data-light] #ovMeet, :root:root[data-light] #ovPeople, :root:root[data-light] #ovNotes, :root:root[data-light] #ovBook { background: #f5f4f1 !important; border-color: rgba(38,42,46,.1) !important; }
:root:root[data-light] .goalitem.won, :root:root[data-light] .wonitem { background: #eef2ec !important; color: var(--ink) !important; }
:root:root[data-light] div.tabs { background: #d9d8d3 !important; }
:root:root[data-light] #clubTabs { background: rgba(38,42,46,.06) !important; }
:root:root:root[data-light] .shelftabs.shelftabs.shelftabs { background: rgba(38,42,46,.06) !important; border-color: rgba(38,42,46,.1) !important; }
:root:root:root[data-light] .shelftabs.shelftabs.shelftabs > button { color: #3f6f7a !important; }
:root:root:root[data-light] .shelftabs.shelftabs.shelftabs > button[aria-selected="true"] { background: #fbfaf8 !important; color: var(--ink) !important; box-shadow: 0 2px 8px rgba(38,42,46,.12) !important; }
:root[data-light] .colorpop { box-shadow: 0 18px 44px rgba(38,42,46,.2); }
:root[data-light] .colorpop .colorgrab { background: rgba(38,42,46,.2) !important; }
:root:root[data-light] .wm-a { color: #3f6f7a !important; }
:root:root[data-light] .navbar .wm-a, :root:root[data-light] .nav .wm-a { color: #3f6f7a !important; }

/* v209: section dots take their section's color instead of the ink */
h2.sec.sec-blue::before { background: #8fb4bf !important; } h2.sec.sec-gold::before { background: #d9a95a !important; }
h2.sec.sec-red::before { background: #d08566 !important; } h2.sec.sec-green::before { background: #8fb39a !important; }
h2.sec.sec-sage::before { background: #9dbba8 !important; }

/* v209: the calculator's book list reads like a shelf, not a form. No boxes; a soft spine per book in the site's colors, and a shaded row while you type */
:root:root:root #buildRows .brow3 { position: relative; padding-left: 14px; gap: 6px; border-bottom: 1px solid var(--line); align-items: center; }
:root:root:root #buildRows .brow3::before { content: ''; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 4px; border-radius: 3px; background: #9dbba8; opacity: .8; }
:root:root:root #buildRows .brow3:nth-child(5n+2)::before { background: #d9b36e; }
:root:root:root #buildRows .brow3:nth-child(5n+3)::before { background: #8fb4bf; }
:root:root:root #buildRows .brow3:nth-child(5n+4)::before { background: #d49a82; }
:root:root:root #buildRows .brow3:nth-child(5n+5)::before { background: #c9b28e; }
:root:root:root #buildRows .brow3 input { background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; outline: none !important; padding: 11px 8px !important; color: var(--ink) !important; transition: background .15s ease; }
:root:root:root #buildRows .brow3 input.t { font-family: Newsreader, Georgia, serif; font-size: 17px; }
:root:root:root #buildRows .brow3 input.a { color: var(--ink-soft) !important; font-size: 14px; }
:root:root:root #buildRows .brow3 input.p { color: var(--ink-soft) !important; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
:root:root:root #buildRows .brow3 input:hover { background: rgba(143,180,191,.08) !important; }
:root:root:root #buildRows .brow3 input:focus { background: rgba(143,180,191,.18) !important; }
:root:root:root #buildRows .brow3 button { background: transparent !important; border: 0 !important; color: var(--ink-faint) !important; opacity: .7; }
:root:root:root #buildRows .brow3 button:hover { opacity: 1; }

/* v209: Mist, smoothed. Slate ink instead of black, soft teal hairlines, shaded selection instead of dark outlines */
:root[data-light] .navmark .marktext, :root[data-light] .wordmark .readermark .marktext { color: #5c8f9a !important; }
:root[data-light] .markicon circle[fill="#f4f1ec"] { fill: #fbfaf8; }
:root[data-light] .markicon circle[stroke="#e1dcd3"] { stroke: #c9b28e; }
:root[data-light] .wkday b { color: var(--ink) !important; }
:root[data-light] #unit-mpp { color: var(--ink-soft) !important; }
:root[data-light] #savepill { color: #4f8595 !important; }
:root[data-light] .dockico [fill="#ece2d8"], :root[data-light] .dockico [fill="#e8ddd3"] { fill: #d9cbbb; }
:root[data-light] .dockico [fill="#f0e2d6"] { fill: #e6d3c3; }
:root[data-light] .dockico [fill="#b9aaa2"] { fill: #a39389; }
:root[data-light] .dockico { opacity: 1 !important; }
:root[data-light] .nav { background: #e9e8e4 !important; }
:root:root[data-light] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root:root[data-light] select, :root:root[data-light] textarea, :root:root[data-light] #synccode { background-color: #fbfaf8 !important; border-color: rgba(63,111,122,.18) !important; }
:root:root[data-light] input:focus, :root:root[data-light] select:focus, :root:root[data-light] textarea:focus { outline: none !important; border-color: #8fb4bf !important; box-shadow: 0 0 0 3px rgba(143,180,191,.25) !important; }
:root[data-light] *:focus-visible { outline-color: rgba(143,180,191,.8) !important; }
:root:root[data-light] div.tabs { background: var(--tint) !important; border-color: rgba(63,111,122,.14) !important; }
:root:root[data-light] .goalitem.won, :root:root[data-light] .wonitem { border-color: rgba(95,143,108,.25) !important; }
:root:root[data-light] .card, :root:root[data-light] .nowcard, :root:root[data-light] .ovcard, :root:root[data-light] #listgrid .lcard { box-shadow: 0 1px 2px rgba(47,56,59,.04), 0 6px 18px rgba(47,56,59,.05) !important; }
:root:root[data-light] .nowchip, :root:root[data-light] .wsrow, :root:root[data-light] .lookback, :root:root[data-light] .lrnprompt, :root:root[data-light] .decktile,
:root:root[data-light] #ovPin, :root:root[data-light] #ovTalkWrap, :root:root[data-light] #ovMeet, :root:root[data-light] #ovPeople, :root:root[data-light] #ovNotes, :root:root[data-light] #ovBook { background: #fbfaf8 !important; border-color: rgba(63,111,122,.12) !important; }
:root[data-light] button.secondary, :root[data-light] .linkbtn { color: #4f8595; }
:root:root[data-light] body.nb-lined #clubNotebook, :root:root[data-light] body.nb-lined .nbtext, :root:root[data-light] .paper-lined .nbtext, :root:root[data-light] .paper-lined #clubNotebook, :root:root[data-light] .paper-lined .writer-body { background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(63,111,122,.16) 29px 30px) !important; }
:root:root[data-light] #tutorbar { background: #8fb4bf !important; }
:root:root[data-light] #tutorbar button { color: #3f6f7a !important; }
:root:root:root[data-light] .ditem input, :root:root:root[data-light] .ditem textarea, :root:root:root[data-light] .ditem [contenteditable] { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:root:root[data-light] #page-calc #unit-mpp, :root:root[data-light] #page-calc #unit-mpp * { color: var(--ink-soft) !important; }

/* ===== v210 ===== */
/* the timer panel never fades with the top bar, and its numbers use a soft teal on light papers instead of black */
.wssheet.typing .wstop > .wstimepanel { opacity: 1 !important; }
.wssheet:not(.wsdark) .wstimepanel input.wtnum, .wssheet:not(.wsdark) .wstimebtn.on { color: #4f8595 !important; }
.wssheet:not(.wsdark) .wstimebtn.on { background: rgba(143,180,191,.18) !important; }
.wssheet .wstimepanel { opacity: 1 !important; }

/* reader themes fit inside the picker, arrows included */
.colorpop .colorhere .rdthemes, .colorpop .colorhere .rdswline { width: 100% !important; max-width: 100% !important; box-sizing: border-box; min-width: 0; }
.colorpop .colorhere .rdswrow { grid-auto-columns: 20% !important; }
.colorpop .colorhere .rdswmore { width: 26px; height: 26px; font-size: 15px; }
.colorpop .colorhere .rdswline:last-of-type .rddot, .colorpop .colordot { filter: brightness(1.18); }

/* books in the picker: covers to open, and All books; in the reader the menu's Library steps aside while the picker is out */
.colorpop .colorbooks { margin: 0 0 12px; }
.colorpop .colorbooks.hidden { display: none; }
.colorpop .colorstrip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; scroll-snap-type: x proximity; }
.colorpop .colorstrip::-webkit-scrollbar { display: none; }
.colorpop .colorbook { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ink-faint) !important; font: inherit; font-size: 11px; cursor: pointer; scroll-snap-align: start; }
.colorpop .colorbook .cover { width: 46px !important; height: 69px !important; border-radius: 3px; }
.colorpop .colorbook.here { color: var(--ink) !important; font-weight: 700; }
.colorpop .colorbook.here .cover { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
.colorpop .colorbookall { flex: none; width: 46px; height: 69px; border-radius: 4px; border: 1px dashed var(--line) !important; background: none !important; color: var(--ink-soft) !important; font: inherit; font-size: 11px; line-height: 1.2; padding: 2px !important; cursor: pointer; }
body.bc-pickout.bc-rdopen #rdClose, body.bc-pickout.bc-rdopen #rdShelf { display: none !important; }


/* Mist: writing titles and other fields inside a piece stay on the paper, never a white box */
:root:root:root:root[data-light] .wssheet input:not([type=checkbox]):not([type=range]), :root:root:root:root[data-light] .wssheet textarea { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:root:root:root:root[data-light] .wssheet .wstimepanel input.wtnum { border-color: var(--wsline) !important; }

/* Mist: boxes wear light tints of the palette instead of mist on mist */
:root:root[data-light] .nowchip { background: #e7eff1 !important; }
:root:root[data-light] .wsrow:nth-child(4n+1) { background: #e7eff1 !important; } :root:root[data-light] .wsrow:nth-child(4n+2) { background: #e8f0ea !important; }
:root:root[data-light] .wsrow:nth-child(4n+3) { background: #f5e9e4 !important; } :root:root[data-light] .wsrow:nth-child(4n+4) { background: #ece8f1 !important; }
:root:root[data-light] .lookback { background: #e7eff1 !important; }
:root:root[data-light] .lrnprompt:nth-child(3n+1) { background: #e8f0ea !important; } :root:root[data-light] .lrnprompt:nth-child(3n+2) { background: #e7eff1 !important; } :root:root[data-light] .lrnprompt:nth-child(3n+3) { background: #f5e9e4 !important; }
:root:root[data-light] .decktile { background: #ece8f1 !important; }
:root:root[data-light] #ovPin { background: #f5e9e4 !important; } :root:root[data-light] #ovTalkWrap { background: #e7eff1 !important; } :root:root[data-light] #ovMeet { background: #e8f0ea !important; }
:root:root[data-light] #ovPeople { background: #ece8f1 !important; } :root:root[data-light] #ovNotes { background: #f5e9e4 !important; } :root:root[data-light] #ovBook { background: #e7eff1 !important; }
:root:root[data-light] .libshelf { background: color-mix(in srgb, var(--sc) 13%, #fbfaf8) !important; border-color: color-mix(in srgb, var(--sc) 28%, transparent) !important; }

/* Mist planner: more of the palette, so days and plans stand apart */
:root:root[data-light] #c-plan, :root:root[data-light] #c-done, :root:root[data-light] #c-miss { filter: saturate(1.2); }
:root:root[data-light] #c-plan { color: #5f8f6c !important; } :root:root[data-light] #c-done { color: #b8862f !important; } :root:root[data-light] #c-miss { color: #4f8595 !important; }
:root:root[data-light] .day-col:nth-child(7n+1), :root:root[data-light] .wkcol:nth-child(7n+1), :root:root[data-light] .glancerow:nth-child(7n+1) { background: #e7eff1 !important; }
:root:root[data-light] .day-col:nth-child(7n+2), :root:root[data-light] .wkcol:nth-child(7n+2), :root:root[data-light] .glancerow:nth-child(7n+2) { background: #e8f0ea !important; }
:root:root[data-light] .day-col:nth-child(7n+3), :root:root[data-light] .wkcol:nth-child(7n+3), :root:root[data-light] .glancerow:nth-child(7n+3) { background: #ece8f1 !important; }
:root:root[data-light] .day-col:nth-child(7n+4), :root:root[data-light] .wkcol:nth-child(7n+4), :root:root[data-light] .glancerow:nth-child(7n+4) { background: #f5e9e4 !important; }
:root:root[data-light] .day-col:nth-child(7n+5), :root:root[data-light] .wkcol:nth-child(7n+5), :root:root[data-light] .glancerow:nth-child(7n+5) { background: #e4eef0 !important; }
:root:root[data-light] .day-col:nth-child(7n+6), :root:root[data-light] .wkcol:nth-child(7n+6), :root:root[data-light] .glancerow:nth-child(7n+6) { background: #eaeee4 !important; }
:root:root[data-light] .day-col:nth-child(7n+7), :root:root[data-light] .wkcol:nth-child(7n+7), :root:root[data-light] .glancerow:nth-child(7n+7) { background: #f1e8ee !important; }
:root:root[data-light] .wkcol.today, :root:root[data-light] .day-col.today, :root:root[data-light] .glancerow.today { box-shadow: inset 0 0 0 2px rgba(200,118,90,.35) !important; }
:root:root[data-light] .session { background: rgba(255,255,255,.65) !important; border-color: transparent !important; }

/* Mist depth: Flat is one plane with hairlines, Soft a light shadow, Raised cards lifted */
:root:root[data-light][data-depth="flat"] .card, :root:root[data-light][data-depth="flat"] .nowcard, :root:root[data-light][data-depth="flat"] .ovcard, :root:root[data-light][data-depth="flat"] #listgrid .lcard, :root:root[data-light][data-depth="flat"] #goalcard { box-shadow: none !important; border: 1px solid rgba(63,111,122,.14) !important; }
:root:root[data-light][data-depth="soft"] .card, :root:root[data-light][data-depth="soft"] .nowcard, :root:root[data-light][data-depth="soft"] .ovcard, :root:root[data-light][data-depth="soft"] #listgrid .lcard, :root:root[data-light][data-depth="soft"] #goalcard { box-shadow: 0 1px 2px rgba(47,56,59,.05), 0 6px 18px rgba(47,56,59,.06) !important; border: 1px solid rgba(63,111,122,.08) !important; }
:root:root[data-light][data-depth="raised"] .card, :root:root[data-light][data-depth="raised"] .nowcard, :root:root[data-light][data-depth="raised"] .ovcard, :root:root[data-light][data-depth="raised"] #listgrid .lcard, :root:root[data-light][data-depth="raised"] #goalcard { box-shadow: 0 2px 4px rgba(47,56,59,.06), 0 16px 36px rgba(47,56,59,.12) !important; border: 1px solid transparent !important; background: #fdfcfa !important; }
.colorpop .colorbooks { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
:root[data-light] .colorpop .depthrow button[aria-selected="true"] { background: #e7eff1 !important; color: var(--ink) !important; }
:root[data-light] .colorpop .depthrow button { color: var(--ink-soft) !important; }
:root:root[data-light] .herocard { background: #e7eff1 !important; border-color: rgba(63,111,122,.12) !important; }
:root:root:root:root[data-light] .wssheet:not(.wsdark) .wstimepanel input.wtnum, :root:root:root .wssheet:not(.wsdark) .wstimepanel input.wtnum { color: #4f8595 !important; }
:root:root:root .wssheet.wsdark .wstimepanel input.wtnum { color: var(--wsink) !important; }

/* ===== v211 ===== */
/* the dock's wordmark keeps clear of the dock's edge */
:root:root[data-look="reader"] .nav .navmark .marktext { font-size: 20px !important; letter-spacing: .02em; }
:root:root[data-look="reader"] .nav .navmark .markicon { width: 40px !important; height: 32px !important; }
:root:root[data-look="reader"] .nav .navmark { max-width: calc(100% - 40px); }

/* the tray's drawn desk objects */
.traybtn i.trayico { width: 52px !important; height: 52px !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important; }
.traybtn i.trayico svg { width: 100%; height: 100%; display: block; }
.traybtn:hover i.trayico { transform: translateY(-2px) !important; transition: transform .15s ease; }

/* desk items: a quiet open arrow, and a sticky note's club link */
.ditem .dopen { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgba(0,0,0,.05); color: rgba(40,44,48,.55); cursor: pointer; opacity: .75; }
.ditem .dopen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ditem .dopen:hover { opacity: 1; background: rgba(0,0,0,.09); }
.ditem .dnotelink { display: inline-block; margin: 10px 0 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(60,50,20,.18); background: rgba(255,255,255,.45); color: #5a4d22; font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.ditem .dnotelink:not(.on) { opacity: 0; transition: opacity .15s; }
.ditem:hover .dnotelink:not(.on), .ditem:focus-within .dnotelink:not(.on) { opacity: .8; }
@media (hover: none) { .ditem .dnotelink:not(.on) { opacity: .7; } }
.ditem .dnotemenu { position: absolute; left: 10px; bottom: -6px; transform: translateY(100%); z-index: 5; display: grid; gap: 2px; padding: 6px; border-radius: 10px; background: #fffdf8; box-shadow: 0 10px 26px rgba(0,0,0,.18); min-width: 160px; }
.ditem .dnotemenu button { text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: 500 13px "Plus Jakarta Sans", sans-serif; color: #2f383b; cursor: pointer; }
.ditem .dnotemenu button:hover { background: #f1ede4; }

/* one highlight, on its own */
.hlview { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(20,24,26,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s ease; }
.hlview.in { opacity: 1; }
.hlviewcard { --hc: #8fb4bf; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; padding: 44px 44px 36px; border-radius: 18px; background: #fdfbf7; color: #2f383b; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.hlviewcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 18px 0 0 18px; background: var(--hc); }
.hlviewbook .cover { width: 120px !important; height: 180px !important; border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.hlviewmain blockquote { margin: 0; font-family: Newsreader, Georgia, serif; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.45; color: #2f383b; }
.hlviewmain blockquote::before { content: '\201C'; display: block; font-size: 64px; line-height: .6; color: var(--hc); margin-bottom: 8px; }
.hlviewsrc { margin: 20px 0 0; font: 600 12px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #7b8588; }
.hlviewnote { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #f3efe6; font: 15px/1.5 "Plus Jakarta Sans", sans-serif; color: #4a5457; }
.hlviewrow { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hlviewrow button { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(63,111,122,.25); background: transparent; color: #3f6f7a; font: 600 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.hlviewrow .hlviewread { background: #c8765a; border-color: #c8765a; color: #fff; }
@media (max-width: 600px) { .hlviewcard { grid-template-columns: 1fr; padding: 32px 24px 26px; gap: 20px; } .hlviewbook .cover { width: 84px !important; height: 126px !important; } }
.hlviewmain .hlmark { background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--hc) 30%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.hlview .hlviewmain blockquote, .hlview .hlviewmain .hlmark { color: #2f383b !important; } .hlview .hlviewsrc { color: #7b8588 !important; }

/* ===== v212 ===== */
/* Desk: a small pill that takes you back after opening something from the desk */
.deskback { display: none; position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 95; align-items: center; gap: 6px; padding: 6px 14px 6px 11px; border-radius: 999px; border: 1px solid rgba(63,111,122,.25); background: rgba(252,251,248,.94); color: #3f6f7a; font: 600 13px "Plus Jakarta Sans", sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.14); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.deskback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fromdesk .deskback { display: inline-flex; }
body.fromdesk.pg-study:not(.wsopen):not(.bc-rdopen) .deskback { display: none; }
body.bc-rdopen:not(.bc-rdchrome) .deskback { display: none !important; }
:root[data-theme="dark"]:not([data-light]) .deskback { background: rgba(47,56,59,.92); color: #cfe0e5; border-color: rgba(255,255,255,.14); }

/* desk objects that look like the real thing */
.d-note { background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 22px) !important; border-radius: 1px 1px 2px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 12px 18px -8px rgba(20,24,28,.35), 0 3px 6px rgba(20,24,28,.08) !important; }
.d-note::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.08) 50%, rgba(255,255,255,.55) 60%, rgba(0,0,0,.06)); border-radius: 0 0 2px 0; pointer-events: none; }
.d-todo { border-radius: 3px; padding-top: 26px !important; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 14px 26px -10px rgba(20,24,28,.38) !important; background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(63,111,122,.12) 29px 30px) !important; background-position: 0 44px !important; }
.d-todo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 3px 3px 0 0; background: #6d7c80; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.d-todo::after { content: ''; position: absolute; left: 22px; right: 22px; top: 4px; height: 6px; background: radial-gradient(circle, #d5d9da 2.5px, transparent 3px) 0 0 / 18px 6px repeat-x; }
.d-piece { box-shadow: 4px 4px 0 -1px #f1ece2, 4px 4px 0 0 rgba(0,0,0,.08), 8px 8px 0 -1px #e8e2d6, 8px 8px 0 0 rgba(0,0,0,.08), 0 16px 30px -10px rgba(20,24,28,.4) !important; border-radius: 1px; }
.d-quote { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 86% calc(100% - 6px), 77% 100%, 68% calc(100% - 7px), 58% 100%, 49% calc(100% - 5px), 40% 100%, 30% calc(100% - 7px), 21% 100%, 12% calc(100% - 6px), 4% 100%, 0 calc(100% - 7px)); padding-bottom: 26px !important; filter: drop-shadow(0 10px 14px rgba(20,24,28,.22)); box-shadow: none !important; }
.d-quote::before { left: 0 !important; top: 0 !important; bottom: 0; width: 5px !important; height: auto !important; border-radius: 0 !important; }
.d-book .cover { box-shadow: 1px 0 0 #e9e2d4, 2px 0 0 #d8cfbe, 3px 1px 0 #e9e2d4, 4px 1px 0 #cfc5b3, 0 18px 28px -8px rgba(20,24,28,.45) !important; }

/* Mist planner and club: fields that were squeezed get room */
.ovcard.fold.shut { min-height: 0 !important; height: auto !important; }
#ct-vote { margin-top: 26px; clear: both; }
#ct-vote .voteh { margin-top: 10px; }
.keepcard .keeprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* where we could meet: votes and Meet here */
.placescard .cplace { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.placescard .cplacetx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.placescard .cplacetx span { color: var(--ink-soft); font-size: 13.5px; }
.placescard .cplacetx small { color: var(--ink-faint); font-size: 12.5px; }
.placescard .cplaceby { font-style: italic; }
.placescard .cplaceacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.placescard .pvote { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 12.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.placescard .pvote.on { background: rgba(143,180,191,.2); color: var(--ink); border-color: rgba(143,180,191,.6); }
.placescard .cplace.top b::after { content: 'Most votes'; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(200,118,90,.14); color: #c8765a; font: 700 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.placescard .pmeet { padding: 5px 12px !important; font-size: 12.5px !important; }
.timevote { margin-top: 18px; display: grid; gap: 12px; }

/* printing the club: plain paper, full width, dark ink */
@media print {
  html:has(body.printingclub), body.printingclub { background: #fff !important; }
  body.printingclub { padding: 0 !important; margin: 0 !important; }
  body.printingclub #printBox { position: static !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
  body.printingclub #printBox, body.printingclub #printBox * { color: #1d2326 !important; background: none !important; box-shadow: none !important; border-color: #bbb !important; }
  body.printingclub #printBox h1 { font-size: 24pt; margin: 0 0 4pt; }
  body.printingclub #printBox h2 { font-size: 14pt; margin: 16pt 0 4pt; padding-bottom: 2pt; border-bottom: 1px solid #bbb; }
  body.printingclub #printBox h3 { font-size: 12pt; margin: 10pt 0 2pt; }
  body.printingclub #printBox p { margin: 2pt 0; }
}
@media print {
  :root:root:root:has(body.printingclub) { background: #fff !important; }
  :root:root:root body.printingclub { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  :root:root:root body.printingclub #printBox { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; box-sizing: border-box; padding: 0 !important; }
}
:root:root:root:root .ditem.d-todo input, :root:root:root:root .ditem.d-todo .dtodotitle { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: #2b2622 !important; }
:root:root:root:root .ditem.d-todo .dtodorow.done input { color: #9a918a !important; text-decoration: line-through; }
:root:root:root:root .ditem.d-todo .dtodotitle { font-family: Newsreader, Georgia, serif; font-size: 19px !important; }

/* ===== v213 ===== */
/* speed tests in Learn */
.speedcard2 .speedback { margin-left: auto; }
.speedcard2 .sechead { display: flex; align-items: center; gap: 12px; }

/* sticky notes: bigger, a clear link to plans, and a side tab for another sticky */
.d-note { width: 250px !important; min-height: 230px !important; padding: 20px 18px 18px !important; display: flex; flex-direction: column; }
.d-note .dnotetext { flex: 1; min-height: 140px; max-height: 320px; overflow: auto; font-family: Newsreader, Georgia, serif; font-size: 18px; line-height: 1.45; outline: none; }
.ditem .dnotelink { display: inline-flex !important; align-items: center; gap: 6px; align-self: flex-start; margin-top: 12px; padding: 6px 12px !important; border-radius: 999px; border: 1px solid rgba(60,50,20,.25) !important; background: rgba(255,255,255,.7) !important; color: #3f4a2a; font: 600 12.5px "Plus Jakarta Sans", sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ditem .dnotelink.on { background: #3f6f7a !important; border-color: #3f6f7a !important; color: #fff !important; opacity: 1 !important; }
.ditem .dnotelink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ditem .dnotelink b { font-weight: 700; }
.ditem .dnotelink.on:hover { background: #355f69 !important; }
.ditem .dnoteadd { position: absolute; right: -15px; top: 18px; width: 26px; height: 34px; border: 0; padding: 0; border-radius: 0 8px 8px 0; background: inherit; background-color: rgba(255,255,255,.55); color: rgba(60,50,20,.65); font: 700 18px/1 "Plus Jakarta Sans", sans-serif; cursor: pointer; box-shadow: 2px 2px 5px rgba(0,0,0,.12); opacity: .85; }
.ditem .dnoteadd:hover { opacity: 1; background-color: rgba(255,255,255,.85); }

/* books on the desk look bound: a spine hinge, rounded fore edge and a page block */
.d-book .cover { border-radius: 2px 6px 6px 2px !important; overflow: hidden; }
.d-book::before { content: ''; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 2px 0 0 2px; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.16) 35%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0)); }
.d-book::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: 2px 6px 6px 2px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%), linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,0) 30%); }
.d-book .cover { box-shadow: 1px 1px 0 #f3eee4, 2px 2px 0 #ded5c4, 3px 3px 0 #f3eee4, 4px 4px 0 #d3c9b6, 5px 5px 0 #efe9dc, 0 22px 30px -10px rgba(20,24,28,.5) !important; }
.d-book .dpct { z-index: 3; }

/* Plans: a small bar with Keep a copy and Other votes */
.plantop { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.plantopbtn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.plantopbtn[aria-expanded="true"] { background: rgba(143,180,191,.18); color: var(--ink); border-color: rgba(143,180,191,.5); }
.keepwrap { position: relative; }
.keepmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; width: 270px; padding: 6px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.keepmenu.hidden, .othervotes.hidden { display: none; }
.keepmenu button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.keepmenu button:hover { background: var(--surface-2); }
.keepmenu small { padding: 6px 12px 4px; color: var(--ink-faint); font-size: 12px; line-height: 1.4; }
.othervotes { margin: 0 0 18px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
.othervotes .voteh { margin-top: 0; }
.placescard .pback.on, .placescard .pmeet.on { background: rgba(143,180,191,.2) !important; color: var(--ink) !important; border-color: rgba(143,180,191,.6) !important; }
.placescard .cplace.ismeet b::before { content: 'Meeting here \00b7 '; color: #c8765a; font-size: 12px; font-weight: 700; }
.placescard .cplace.isback b::before { content: 'Backup \00b7 '; color: #3f6f7a; font-size: 12px; font-weight: 700; }

/* ===== v214 ===== */
/* Reading pace: across the whole width at the end of Learn, closed until opened */
#page-speed .speedcard2 { grid-column: 1 / -1 !important; width: auto !important; max-width: none !important; }
.speedcard2.paceshut > :not(.sechead) { display: none !important; }
.speedcard2.paceshut { padding-bottom: 14px !important; }
.speedcard2 .pacetoggle { margin-left: 8px; }
.speedcard2 .speedback + .pacetoggle, .speedcard2 .speedback.hidden + .pacetoggle { margin-left: auto; }
.speedcard2 .sechead .speedback:not(.hidden) { margin-left: auto; }

/* Compare: one box to search and drop into */
.pickermerged { display: none !important; }
.cmpfield { border: 1.5px dashed var(--line); border-radius: 14px; padding: 6px 8px; margin: 4px 0 10px; background: rgba(143,180,191,.06); }
.cmpfield #bookSearch { width: 100%; box-sizing: border-box; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 8px !important; font-size: 15px; }
.cmpfield .tray { border: 0 !important; background: transparent !important; margin: 0 !important; min-height: 0 !important; padding: 0 4px 4px !important; }
.cmpfield:focus-within { border-color: rgba(143,180,191,.8); }
#cmpPick, #cmpPanel, #pickAll { display: none !important; }
.pickhint { margin: 0 0 8px !important; }

/* desk things pop out large, looking like themselves */
.dpop { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 24px; background: rgba(20,24,26,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .18s ease; }
.dpop.in { opacity: 1; }
.dpopsheet { position: relative; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; color: #2b2622; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.dpopbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 12px 0; }
.dpopbody { padding: 8px 40px 40px; }
.dpopfull, .dpopclub { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(40,44,48,.2); background: rgba(255,255,255,.6); color: #2f383b; font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.dpopclub { background: #3f6f7a; color: #fff; border-color: #3f6f7a; margin-right: auto; }
.dpopx { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.06); color: #4a4e52; font-size: 20px; cursor: pointer; }
.dp-note { min-height: 520px; border-radius: 2px; background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 34px); }
.dpopnote { width: 100%; min-height: 420px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; resize: none; font: 24px/1.5 Newsreader, Georgia, serif; color: #2b2622 !important; padding: 0 !important; }
.dp-todo { background: #fdfcf9; border-radius: 4px; }
.dp-todo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: #6d7c80; border-radius: 4px 4px 0 0; }
.dp-todo .dpopbar { padding-top: 26px; }
.dpopinner { position: static !important; width: auto !important; transform: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; cursor: auto; }
.dpopinner::before, .dpopinner::after { display: none !important; }
.dpopinner .dtodotitle { font-size: 28px !important; margin-bottom: 10px; }
.dpopinner .dtodorow input { font-size: 18px !important; padding: 8px 0 !important; }
.dpopinner .dtodorow { border-bottom: 1px solid rgba(63,111,122,.12); }
.dp-piece { background: #fdfbf7; border-radius: 2px; box-shadow: 6px 6px 0 -1px #f1ece2, 6px 6px 0 0 rgba(0,0,0,.08), 12px 12px 0 -1px #e8e2d6, 12px 12px 0 0 rgba(0,0,0,.08), 0 30px 80px rgba(0,0,0,.35); }
.dpopkind { display: block; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a8178; }
.dpoptitle { width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 6px 0 !important; font: 500 32px/1.2 Newsreader, Georgia, serif; color: #2b2622 !important; }
.dpoptext { width: 100%; min-height: 380px; margin-top: 12px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; resize: none; padding: 0 !important; font: 19px/1.6 Newsreader, Georgia, serif; color: #3a342e !important; white-space: pre-wrap; }
@media (max-width: 600px) { .dpopbody { padding: 6px 22px 28px; } .dpopnote { font-size: 20px; } .dpoptitle { font-size: 26px; } }

/* highlight view: its note, and browsing */
.hlviewnotelab { display: grid; gap: 6px; margin-top: 18px; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a8f91; }
.hlviewnoteedit { min-height: 90px; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid rgba(63,111,122,.18) !important; background: #f6f2ea !important; color: #3a4043 !important; font: 15px/1.5 "Plus Jakarta Sans", sans-serif !important; letter-spacing: 0; text-transform: none; resize: vertical; box-shadow: none !important; }
.hlviewnav { display: inline-flex; gap: 6px; margin-right: 6px; }
.hlviewnav button { width: 38px; padding: 6px 0 !important; font-size: 20px !important; line-height: 1; }
.hlviewcard.browsing { outline: 2px dashed rgba(63,111,122,.25); outline-offset: -10px; }

/* the desk: a surface with a little depth and grain, and a front edge */
.deskouter { position: relative; background-color: var(--desk) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 18px 36px -18px rgba(0,0,0,.45) !important; border-bottom: 12px solid color-mix(in srgb, var(--desk) 72%, #000) !important; border-radius: 16px 16px 10px 10px !important; }
.deskouter::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

.deskouter.s-oak::before, .deskouter.s-walnut::before { opacity: .9;
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 22px, rgba(60,35,15,.06) 22px 24px, rgba(0,0,0,0) 24px 51px, rgba(60,35,15,.09) 51px 52px, rgba(0,0,0,0) 52px 83px, rgba(255,240,220,.06) 83px 86px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='400' height='120' filter='url(%23w)'/%3E%3C/svg%3E"); }
.deskouter.s-linen::before, .deskouter.s-sage::before { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px); opacity: 1; }
.deskouter .deskin { position: relative; z-index: 1; }

/* the desk, expanded: a large pop out, and full screen from there */
#dkDesk.deskbig { position: fixed; inset: 14px; z-index: 60; overflow: auto; padding: 16px; border-radius: 18px; background: var(--bg); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
#dkDesk.deskbig { box-shadow: 0 0 0 100vmax rgba(20,24,26,.5), 0 30px 90px rgba(0,0,0,.45) !important; }
body.deskbigon { overflow: hidden; }
:fullscreen #dkDesk.deskbig { inset: 0; border-radius: 0; }
.deskexpand { margin-left: 4px; }

/* when the color wheel is out on the desk, the desk colors live in it */
body.bc-deskpick .deskcolors { display: none !important; }
.colorpop .colordesk.hidden { display: none; }
.colorpop .colordesk > p { margin: 12px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.colorpop .deskrow .colordot { filter: none !important; }

/* a to-do list shows about 5 things before it grows */
.d-todo { width: 270px !important; min-height: 280px; }
.deskchip.deskwheel { width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; background: conic-gradient(#5c8f9a, #9dbba8, #d9a441, #c8765a, #8e7aa6, #5c8f9a) !important; border: 2px solid rgba(255,255,255,.6) !important; }
:root:root .dpop .ditem.d-todo.dpopinner { width: 100% !important; min-height: 0 !important; }
:root:root:root:root:root .dpop .dpopinner .dtodotitle { font-size: 30px !important; margin: 0 0 12px !important; width: 100%; }
:root:root:root:root:root .dpop .dpopinner .dtodorow input { font-size: 19px !important; width: 100%; }
.dpop .dpopinner .dtodorow { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.dpop .dpopinner .dtodorows { display: grid; }

/* ===== v215 ===== */
/* the Clock page: today on a quiet clock face; the reading list estimate one tap away */
#page-calc.cv-today > *:not(#clockTabs):not(#dayClock) { display: none !important; }
#page-calc.cv-est > #dayClock { display: none !important; }
.clocktabs { margin-bottom: 16px !important; }
.dayclock { padding: 22px !important; }
.dclock { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: 28px; align-items: center; }
@media (max-width: 800px) { .dclock { grid-template-columns: 1fr; } }
.dclockface { width: 100%; height: auto; display: block; touch-action: none; user-select: none; }
.dcring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.dcface { fill: #fbfaf7; stroke: #e4ded3; stroke-width: 2; filter: drop-shadow(0 10px 22px rgba(0,0,0,.18)); }
.dctick { fill: #c9c2b6; }
.dcnum { font: 500 18px Newsreader, Georgia, serif; fill: #9a938a; text-anchor: middle; }
.dcpart { font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; fill: #a79f95; text-anchor: middle; }
.dcday { font: 500 16px Newsreader, Georgia, serif; fill: #6b6560; text-anchor: middle; }
.dch { stroke: #2f383b; stroke-width: 6; stroke-linecap: round; }
.dcm { stroke: #5c8f9a; stroke-width: 4; stroke-linecap: round; }
.dcs { stroke: #d08566; stroke-width: 1.8; stroke-linecap: round; }
.dccenter { fill: #d9a441; }
.dcitem { cursor: pointer; outline: none; }
.dcitem.movable { cursor: grab; }
.dcdot { fill: #fbfaf7; stroke: var(--ic); stroke-width: 3; transition: stroke .3s; }
.dcitem.past .dcdot { stroke: #8fb39a; stroke-dasharray: 4 3; }
.dcitem.done .dcdot { fill: #eef5ef; stroke: #6f9a80; stroke-dasharray: none; stroke-width: 3.5; }
.dcitem:focus-visible .dcdot, .dcitem:hover .dcdot { stroke-width: 4.5; }
.dcico { fill: none; stroke: var(--ic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dcitem.done .dcico { stroke: #6f9a80; }
.dcck { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 0 1.5px #6f9a80) drop-shadow(0 0 1.5px #6f9a80); }
.dcghost { font: 600 14px "Plus Jakarta Sans", sans-serif; fill: #c8765a; text-anchor: middle; }
.dclockside { display: grid; gap: 6px; align-content: start; }
.dclockside h2 { margin: 0 0 6px; }
.dcrow { display: grid; grid-template-columns: 24px 74px 1fr; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-left: 3px solid var(--ic); }
.dcrow:hover { background: rgba(143,180,191,.1); }
.dcrow .dct { color: var(--ink-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.dcrow .dcc { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-faint); display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; }
.dcrow.done .dcc { background: #6f9a80; border-color: #6f9a80; }
.dcrow.done .dcn { color: var(--ink-faint); }
.dcsum { margin: 6px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.dcyearh { margin-top: 18px !important; }
.dcyear { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.dcyt { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--ic) 14%, transparent); display: grid; gap: 2px; }
.dcyt b { font: 600 26px Newsreader, Georgia, serif; color: var(--ink); }
.dcyt span { font-size: 12.5px; color: var(--ink-soft); }

/* pace: the tests lay out across the card, a single chevron opens it */
.speedcard2 { display: block !important; text-align: left !important; align-items: stretch !important; }
.speedcard2 > p.pane-note { text-align: left !important; }
.speedcard2 .speedgrid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; width: 100% !important; margin: 12px 0 0 !important; justify-items: stretch !important; }
.speedcard2 .speedgrid > * { width: auto !important; max-width: none !important; margin: 0 !important; }
.speedcard2 .sechead { justify-content: flex-start !important; }
.speedcard2 .pacetoggle { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; position: relative; flex: none; }
.speedcard2 .pacetoggle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s; }
.speedcard2 .pacetoggle[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); }
.speedcard2 .speedback:not(.hidden) + .pacetoggle { margin-left: 8px; }
.speedrun { z-index: 92 !important; }

/* pop out writing: plain paper, ink you can read, no boxes */
:root:root:root:root:root .dpop textarea, :root:root:root:root:root .dpop input[type="text"], :root:root:root:root:root .dpop input:not([type]), :root:root:root:root:root .dpop .dpoptitle, :root:root:root:root:root .hlview textarea { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: #2b2622 !important; border-radius: 0 !important; -webkit-text-fill-color: #2b2622; }
:root:root:root:root:root .dpop textarea::placeholder, :root:root:root:root:root .dpop input::placeholder, :root:root:root:root:root .hlview textarea::placeholder { color: rgba(43,38,34,.4) !important; -webkit-text-fill-color: rgba(43,38,34,.4); }
:root:root:root:root:root .hlview .hlviewnoteedit { background: #f6f2ea !important; background-image: repeating-linear-gradient(180deg, transparent 0 26px, rgba(63,111,122,.14) 26px 27px) !important; border: 1px solid rgba(63,111,122,.16) !important; border-radius: 10px !important; padding: 8px 14px !important; line-height: 27px !important; font: 16px/27px Newsreader, Georgia, serif !important; color: #3a4043 !important; -webkit-text-fill-color: #3a4043; }
.dp-note { width: min(760px, 100%) !important; min-height: min(760px, calc(100vh - 48px)) !important; }
.dpopnote { min-height: min(620px, calc(100vh - 180px)) !important; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(60,50,20,.1) 35px 36px) !important; line-height: 36px !important; font-size: 24px !important; }
.dp-piece { width: min(760px, 100%) !important; min-height: min(760px, calc(100vh - 48px)); }
.dpoptext { min-height: min(560px, calc(100vh - 260px)) !important; }

/* notes on the desk are full sheets, the same size as other writing */
.d-piece { min-height: 300px; }

/* Compare: your writing and your books wait under the box, ready to drag in */
.pickh { margin: 14px 0 8px; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pickdocs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.pickdoc { flex: none; width: 150px; min-height: 86px; padding: 12px; border-radius: 3px; background: #fdfbf7; color: #2b2622; box-shadow: 3px 3px 0 -1px #efe9dd, 3px 3px 0 0 rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.3); cursor: grab; display: grid; align-content: start; gap: 4px; }
.pickdoc small { font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a8178; }
.pickdoc b { font: 500 15px/1.3 Newsreader, Georgia, serif; }

/* the desk as a list, like an index card */
.deskouter.listmode { padding: 28px !important; }
.desklist { max-width: 720px; margin: 0 auto; padding: 26px 30px 30px 64px; background: #fdfbf6; color: #2b2622; border-radius: 3px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.4); background-image: linear-gradient(90deg, transparent 46px, rgba(200,118,90,.35) 46px 47px, transparent 47px), repeating-linear-gradient(180deg, transparent 0 43px, rgba(63,111,122,.16) 43px 44px); background-position: 0 0, 0 58px; }
.desklisth { margin: 0 0 12px; font: 500 24px Newsreader, Georgia, serif; }
.dlrow { width: 100%; min-height: 44px; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 12px; padding: 0 6px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: 6px; }
.dlrow:hover { background: rgba(143,180,191,.12); }
.dlrow small { font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a8178; }
.dlrow b { font: 400 17px Newsreader, Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlrow span { font-size: 12.5px; color: #8a8178; white-space: nowrap; }
.dlempty { color: #8a8178; font-style: italic; }
@media (max-width: 600px) { .desklist { padding: 20px 16px 20px 44px; background-image: linear-gradient(90deg, transparent 30px, rgba(200,118,90,.35) 30px 31px, transparent 31px), repeating-linear-gradient(180deg, transparent 0 43px, rgba(63,111,122,.16) 43px 44px); } .dlrow { grid-template-columns: 1fr; gap: 0; padding: 6px; } }

/* ===== v216 ===== */
/* Clock tabs: Today, Timer, Pace */
#page-calc.cv-today > *:not(#clockTabs):not(#dayClock), #page-calc.cv-timer > *:not(#clockTabs):not(#clockTimer), #page-calc.cv-est > #clockTimer, #page-calc:not(.cv-timer) > #clockTimer { display: none !important; }

/* the face fills the frame; plans sit on it as colored circles */
.dclock { grid-template-columns: minmax(300px, 560px) 1fr !important; align-items: start !important; }
.dclockleft { display: grid; gap: 14px; }
.dcface { fill: #fbfaf7 !important; stroke: none !important; filter: drop-shadow(0 14px 30px rgba(0,0,0,.22)); }
.dcrim { fill: none; stroke: #ece6db; stroke-width: 1.5; }
.dctick { stroke: #d8d1c5; stroke-width: 1.2; stroke-linecap: round; }
.dctick.big { stroke: #b9b0a3; stroke-width: 2.2; }
.dcnum { font: 500 22px Newsreader, Georgia, serif !important; fill: #8f877d !important; }
.dcguide { fill: none; stroke: #f0ebe2; stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }
.dcpart { fill: #b0a79b !important; }
.dcday { fill: #5e5852 !important; font-size: 17px !important; }
.dchands { pointer-events: none; }
.dch { stroke: #2f383b !important; stroke-width: 7 !important; }
.dcm { stroke: #5c8f9a !important; stroke-width: 4.5 !important; }
.dcs { stroke: #d08566 !important; stroke-width: 2 !important; }
.dccenter { fill: #d9a441 !important; }
.dcdot { fill: var(--ic) !important; stroke: #fbfaf7 !important; stroke-width: 3 !important; stroke-dasharray: none !important; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.dcitem.due .dcdot { stroke: #fbfaf7 !important; }
.dcitem.due .dcwin { stroke: color-mix(in srgb, var(--ic) 55%, transparent); stroke-width: 2; stroke-dasharray: 3 4; }
.dcico { stroke: #fff !important; stroke-width: 1.9 !important; fill: none; }
.dcwin { fill: none; stroke: transparent; stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.dcitem.done .dcwin { stroke: #5f9a72; stroke-dasharray: none; }
.dcitem.done .dcdot { fill: var(--ic) !important; }
.dcitem.done .dcico { stroke: #fff !important; }
.dcbadge { fill: #5f9a72; stroke: #fbfaf7; stroke-width: 2; }
.dcck { stroke: #fff !important; stroke-width: 2 !important; filter: none !important; }
.dcitem:hover .dcdot, .dcitem:focus-visible .dcdot { transform: scale(1.08); }
.dcitem.just .dcwin { animation: dcwin .7s cubic-bezier(.2,.9,.3,1.4); }
.dcitem.just .dcdot { animation: dcpop .5s cubic-bezier(.2,.9,.3,1.4); }
.dcspark { fill: #d9a441; transform-box: fill-box; transform-origin: center; animation: dcspark .8s ease-out forwards; }
.dcspark:nth-of-type(2n) { fill: #c8765a; } .dcspark:nth-of-type(3n) { fill: #5c8f9a; }
@keyframes dcwin { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dcpop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes dcspark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dcitem.just .dcwin, .dcitem.just .dcdot, .dcspark { animation: none; } .dcspark { display: none; } }

/* the week as 7 rings */
.dcweek { display: flex; justify-content: center; gap: 12px; }
.dcwd { display: grid; justify-items: center; gap: 2px; }
.dcwd svg { width: 34px; height: 34px; }
.dcwd .wbg { fill: none; stroke: var(--line); stroke-width: 4; }
.dcwd .warc { fill: none; stroke: #c8765a; stroke-width: 4; stroke-linecap: round; }
.dcwd small { font-size: 11px; color: var(--ink-faint); font-weight: 600; }
.dcwd.today small { color: var(--ink); }
.dcwd.today .wbg { stroke: rgba(200,118,90,.3); }

/* today list, look back */
.dcrow { border-left-width: 4px !important; }
.dcrow.done .dcc { background: #5f9a72 !important; border-color: #5f9a72 !important; }
.dcplan { justify-self: start; margin-top: 4px; }
.dclook { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(217,164,65,.1); border: 1px solid rgba(217,164,65,.25); display: grid; gap: 6px; }
.dclookh { margin: 0; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9a24e; }
.dclookt { margin: 0; font: 500 18px Newsreader, Georgia, serif; color: var(--ink); }
.dclooki { border: 0 !important; border-bottom: 1px solid rgba(217,164,65,.4) !important; border-radius: 0 !important; background: transparent !important; padding: 6px 0 !important; box-shadow: none !important; }

/* This year: a warmer, more present card */
.yearcard { margin-top: 20px; padding: 18px; border-radius: 18px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), rgba(217,164,65,.07); border: 1px solid rgba(217,164,65,.22); display: grid; gap: 12px; }
.yearhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.yearhead h2 { margin: 0 !important; }
.yeartotal { margin: 0; color: var(--ink-soft); font-size: 14px; }
.yeartotal b { font: 600 22px Newsreader, Georgia, serif; color: #d9a441; margin-right: 2px; }
.yearcard .dcyear { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.yearcard .dcyt { position: relative; padding: 14px 14px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ic) 16%, transparent); overflow: hidden; }
.yearcard .dcyt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ic); }
.yearcard .dcyt b { font-size: 30px !important; line-height: 1; }
.dcdots { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dcdots small { font-size: 12px; color: var(--ink-faint); }
.dcdotrow { display: inline-flex; gap: 6px; }
.dcdotrow i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); }
.dcdotrow i.on { background: #d9a441; border-color: #d9a441; }
.goalsyear .yearcard { margin-top: 0; }

/* Timer: colored discs that shrink as the time runs */
.clocktimer { padding: 22px !important; }
.timergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.timercard { --tc: #c8765a; display: grid; gap: 10px; justify-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--line); }
.timercard.main { grid-column: span 2; }
@media (max-width: 600px) { .timercard.main { grid-column: auto; } }
.timerdisc { width: 100%; max-width: 360px; height: auto; touch-action: none; cursor: pointer; }
.timercard:not(.main) .timerdisc { max-width: 220px; }
.timercard.running .timerdisc { cursor: default; }
.tface { fill: #fbfaf7; filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); }
.ttick { stroke: #d8d1c5; stroke-width: 1; } .ttick.big { stroke: #b9b0a3; stroke-width: 2; }
.twedge { fill: var(--tc); transition: fill .3s; }
.thub { fill: #fbfaf7; stroke: #ece6db; }
.ttime { font: 600 17px "Plus Jakarta Sans", sans-serif; fill: #3a4043; text-anchor: middle; font-variant-numeric: tabular-nums; }
.timercard.finished { animation: tdone 1.4s ease; }
@keyframes tdone { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 40%, transparent); } }
.tlabel { width: 100%; max-width: 360px; text-align: center; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 6px 0 !important; font: 500 17px Newsreader, Georgia, serif !important; }
.tpresets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tpresets button { min-width: 42px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.tpresets button[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 22%, transparent); border-color: var(--tc); color: var(--ink); }
.tcolors { display: flex; gap: 8px; }
.tcolors button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.tcolors button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-soft); }
.tacts { display: flex; gap: 8px; }
.tacts button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.tacts .tgo { background: var(--tc); border-color: var(--tc); color: #fff; min-width: 110px; }
.taddbtn { margin-top: 14px; padding: 8px 16px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-soft); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }

/* Compare: headings and writing cards across the full width, matching the book cards */
#picker .pickh, #picker .pickdocs, #picker .pickhint { grid-column: 1 / -1; }
#picker .pickh { margin: 6px 0 0 !important; }
#picker .pickdocs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; overflow: visible; padding: 0; }
#picker .pickdoc { width: auto; min-height: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: none !important; border-left: 4px solid #d9a441; }
#picker .pickdoc small { color: var(--ink-faint) !important; }
#picker .pickdoc b { color: var(--ink); font-size: 17px; }

/* the desk list: what each thing is reads clearly */
.dlrow small { justify-self: start; padding: 3px 8px; border-radius: 999px; font-size: 10.5px !important; color: #fff !important; background: #8a8178; letter-spacing: .1em !important; }
.dl-note small { background: #c9a24e; } .dl-todo small { background: #6d7c80; } .dl-quote small { background: #5c8f9a; } .dl-piece small { background: #c8765a; } .dl-book small { background: #7f9c86; }
@media (max-width: 800px) { .dclock { grid-template-columns: 1fr !important; } .dclockleft { max-width: 100%; min-width: 0; } }
.dclock > * { min-width: 0; }
:root:root:root:root:root .timercard .tlabel, :root:root:root:root:root .dclook .dclooki { background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
:root:root:root:root:root .dclook .dclooki { border-bottom-color: rgba(217,164,65,.45) !important; }

/* ===== v217 ===== */
/* lighter dark colors */
.colorpop .colorlift { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; font-size: 12.5px; color: var(--ink-faint); }
.colorpop .colorlift input[type="range"] { flex: 1; min-width: 0; height: 8px; -webkit-appearance: none; appearance: none; border-radius: 6px; background: linear-gradient(90deg, #263033, #6b7678) !important; border: 0 !important; padding: 0 !important; }
.colorpop .colorlift input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fbfaf7; border: 2px solid var(--ink-soft); cursor: pointer; }
.colorpop .liftreset { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.colorpop .liftreset.hidden { display: none; }
:root[data-light] .colorpop .colorlift { display: none !important; }

/* clock: small numbers at the rim, plans toward the edge, the hands take the color of what is happening now */
.dcnum { font-size: 15px !important; fill: #a79f95 !important; }
.dclockface.hasnow .dch { stroke: var(--nowc) !important; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nowc) 60%, transparent)); }
.dclockface.hasnow .dcrim { stroke: var(--nowc); stroke-width: 4; opacity: .5; }
.dcitem.now .dcwin { stroke: var(--ic); stroke-width: 3; stroke-dasharray: none; animation: dcnow 2.4s ease-in-out infinite; }
@keyframes dcnow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.dclockface.landed .dcitem { animation: dcin .5s ease both; }
@keyframes dcin { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.dclockface .dcitem { transform-box: fill-box; transform-origin: center; }
.dcvol { display: grid; gap: 6px; }
.dcvoll { margin: 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.dcvolbar { display: flex; gap: 3px; height: 14px; border-radius: 8px; overflow: hidden; }
.dcvolbar i { background: color-mix(in srgb, var(--ic) 45%, transparent); min-width: 6px; }
.dcvolbar i.done { background: var(--ic); }

/* the logo's clock falling to the face, and the empty spot it leaves on the shelf */
.clockghost { position: fixed; z-index: 70; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }
.clockghost svg { width: 100%; height: 100%; display: block; }
.markicon > g > circle, .markicon > g > g { transition: opacity .35s ease; }
body.clockdown .markicon > g > circle, body.clockdown .markicon > g > g { opacity: 0; }

/* timer: full screen */
.timercard { position: relative; }
.tfullbtn { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.tfullbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tfull { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; background: var(--bg); color: var(--ink); }
.tfulldisc { width: min(78vmin, 640px); height: auto; }
.tfull .thubdot { fill: #2f383b; }
.tfulllab { margin: 0; font: 500 clamp(22px, 3.4vw, 34px) Newsreader, Georgia, serif; text-align: center; }
.tfulltime { margin: 0; font: 600 clamp(28px, 5vw, 52px) "Plus Jakarta Sans", sans-serif; font-variant-numeric: tabular-nums; text-align: center; color: var(--ink-soft); }
.tfullrow { display: flex; gap: 10px; justify-content: center; }
.tfullrow button { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 15px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.tfullrow .tgo { background: var(--tc); border-color: var(--tc); color: #fff; min-width: 130px; }
.tfull.finished .tfulldisc { animation: tdone 1.4s ease 2; border-radius: 50%; }

/* the photo on the desk, and its editor */
.d-photo { width: 230px; padding: 12px 12px 34px; background: #fdfbf7; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 28px -10px rgba(20,24,28,.45); border-radius: 2px; }
.dphotoframe { width: 100%; overflow: hidden; background: #e9e4da; }
.dphotoframe img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.dphotoframe.empty::after { content: 'Add a photo'; display: grid; place-items: center; height: 100%; min-height: 200px; color: #8a8178; font: 500 15px Newsreader, Georgia, serif; }
.dphotolock { position: absolute; right: 10px; bottom: 8px; width: 18px; height: 18px; color: #8a8178; }
.dphotolock svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dp-photo { width: min(920px, 100%) !important; background: #fdfbf7; border-radius: 16px; }
.phtitle { margin: 0 auto 0 12px; font: 500 22px Newsreader, Georgia, serif; color: #2b2622; }
.phbody { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: 26px; padding: 8px 28px 28px; }
@media (max-width: 720px) { .phbody { grid-template-columns: 1fr; padding: 6px 18px 22px; } }
.phframe { position: relative; width: 100%; max-height: 70vh; overflow: hidden; border-radius: 4px; background: #ece6db; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); align-self: start; }
.phframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phframe.empty { min-height: 320px; display: grid; place-items: center; }
.phpick { padding: 12px 22px; border-radius: 999px; border: 1px dashed #b9b0a3; background: #fdfbf7; color: #3f6f7a; font: 600 15px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.phtools { display: grid; gap: 12px; align-content: start; color: #2b2622; }
.phslide { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font: 600 13px "Plus Jakarta Sans", sans-serif; color: #5b5550; }
.phslide input[type="range"] { width: 100%; accent-color: #4d8f9c; border: 0 !important; }
.phchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 13px "Plus Jakarta Sans", sans-serif; color: #5b5550; }
.phchips span { width: 76px; }
.phchips button { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(63,111,122,.25); background: transparent; color: #3f4a4c; font: 600 12.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.phchips button[aria-pressed="true"] { background: #3f6f7a; border-color: #3f6f7a; color: #fff; }
.phacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.phbtn { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(63,111,122,.3); background: transparent; color: #3f6f7a; font: 600 13.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.phbtn:disabled { opacity: .55; cursor: default; }
.phbtn.phmain { background: #c8765a; border-color: #c8765a; color: #fff; }
.phnote { margin: 0; font-size: 13px; line-height: 1.5; color: #7b746c; }
.ovphoto { margin: 0 0 14px; border-radius: 16px; overflow: hidden; position: relative; }
.ovphoto.hidden { display: none; }
.ovphoto img { width: 100%; max-height: 340px; object-fit: cover; display: block; }
.ovphoto figcaption { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(20,24,26,.55); color: #fff; font-size: 12px; }

/* drawer: borrowed and shared, as concepts */
.dxh { display: flex; align-items: center; gap: 10px; margin-top: 26px !important; }
.dxtag { padding: 2px 8px; border-radius: 999px; background: rgba(143,180,191,.2); color: var(--ink-soft); font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.dxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dxcard { display: grid; gap: 4px; text-align: left; padding: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; }
.dxart { display: grid; place-items: end start; height: 110px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.dxart.k-film::before { content: '\25b6'; position: relative; font-size: 22px; margin-bottom: 30px; }
.dxcard b, .dxcard small, .dxdue { padding: 0 12px; }
.dxcard b { font: 500 17px Newsreader, Georgia, serif; }
.dxcard small { color: var(--ink-faint); font-size: 12.5px; }
.dxdue { color: #c8765a; font: 600 12px "Plus Jakarta Sans", sans-serif; }
.dconcept .dcstage { flex: 1; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; }
.dcplayer { width: min(860px, 92vw); aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, var(--c1), var(--c2)); display: grid; align-content: end; padding: 22px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.dcplayer.audio { aspect-ratio: 3 / 1; }
.dcptitle { margin: 0 0 16px; font: 500 clamp(22px, 3.5vw, 40px) Newsreader, Georgia, serif; color: #fff; }
.dcpctl { display: flex; align-items: center; gap: 12px; color: #fff; font: 600 13px "Plus Jakarta Sans", sans-serif; }
.dcpbtn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; }
.dcpbar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.dcpbar i { display: block; width: 18%; height: 100%; border-radius: 2px; background: #fff; }
.dcpnote { max-width: 640px; margin: 0; text-align: center; color: #c9c3ba; line-height: 1.55; }

/* concept: watch and clock */
.bcdevices { margin: 34px 0 10px; padding: 26px; border-radius: 20px; border: 1px solid var(--line); }
.bcdk { margin: 0; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bcdh { margin: 6px 0 8px; font: 500 28px Newsreader, Georgia, serif; }
.bcdp { margin: 0 0 18px; max-width: 680px; color: var(--ink-soft); line-height: 1.55; }
.bcdp.small { margin: 18px 0 0; font-size: 13.5px; }
.bcdgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.bcdgrid figure { margin: 0; padding: 18px; border-radius: 16px; background: rgba(143,180,191,.08); display: grid; gap: 12px; justify-items: center; }
.bcdgrid svg { width: 100%; max-width: 280px; height: auto; }
.bcdgrid figcaption { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.bcdgrid figcaption b { display: block; margin-bottom: 4px; font: 500 20px Newsreader, Georgia, serif; color: var(--ink); }
#modal:not(.hidden) { z-index: 140 !important; }

/* v218: shelves scroll sideways. The row of shelves steps to the next shelf, and a full shelf scrolls inside its own card */
#listgrid { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  gap: 22px !important; padding: 4px 2px 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#listgrid > .lcard { flex: 0 0 min(560px, 88%); scroll-snap-align: start; display: block; text-align: left; cursor: pointer; min-width: 0; }
#listgrid > .lcard:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
#listgrid .shelfscroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; margin: 0 -6px; padding: 0 6px; -webkit-overflow-scrolling: touch; }
#listgrid .shelfcase { width: max-content; min-width: 100%; max-width: none !important; }
#listgrid .shelfrow .cover { scroll-snap-align: start; }
.gridnav { display: inline-flex; gap: 4px; margin-left: 6px; }
.gridnav button { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .gridnav { display: none; } #listgrid > .lcard { flex-basis: 88%; } .coverlook > span { display: none; } }
@media (max-width: 600px) { #view-grid .sortbar { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; } #view-grid .sortbar .coverlook { margin-right: 0; flex-basis: 100%; width: max-content; max-width: max-content; } }

/* v218 timer modes */
.tmodes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.tmodes button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: 600 13px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); cursor: pointer; min-height: 0; }
.tmodes button[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--ink); }
.tbase { transition: fill .3s; }
.twedge { transition: none; }
.tsub { font: 600 9px "Plus Jakarta Sans", sans-serif; fill: #6b7275; text-anchor: middle; letter-spacing: .04em; }
.tm-interval .ttime { font-size: 15px; }
.tivals { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tivals label { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-soft); }
.tivals input { width: 72px; text-align: center; padding: 6px 8px; }
.tbface { fill: color-mix(in srgb, var(--tc) 10%, #fbfaf7); }
.tblob { transition: none; }
.tblob.b1 { fill: color-mix(in srgb, var(--tc) 30%, #fbfaf7); }
.tblob.b2 { fill: color-mix(in srgb, var(--tc) 55%, #fbfaf7); opacity: .8; }
.tblob.b3 { fill: var(--tc); opacity: .55; }
.tglint { fill: #fff; }
.tbtime { fill: #2f383b; font-size: 15px; }
.tm-breathe { cursor: default; touch-action: auto; }
.tfulldisc .thub, .tfulldisc .ttime, .tfulldisc .tsub { display: none; }
.tfullsub { margin: -8px 0 0; font: 500 clamp(16px, 2.4vw, 22px) Newsreader, Georgia, serif; color: var(--ink-soft); text-align: center; min-height: 1.2em; }
.timercard { align-content: start; } .timercard .tacts button { align-self: start; }
.clockshadow { position: fixed; height: 26px; z-index: 69; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(30,25,20,.55), rgba(30,25,20,0)); opacity: 0; transform-origin: 50% 50%; }

/* v218 posting the desk to the wall */
.wallpost { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(20,24,26,.45); backdrop-filter: blur(4px); }
.wallsheet { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: 20px; padding: 20px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.wallhead { display: flex; align-items: center; justify-content: space-between; }
.wallhead h2 { margin: 0; font: 500 26px Newsreader, Georgia, serif; }
.wallline { margin: 4px 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.wallwrap { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.2fr); gap: 18px; align-items: start; }
@media (max-width: 700px) { .wallwrap { grid-template-columns: 1fr; } }
.wallrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.wallrow label { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; cursor: pointer; }
.wallsheet { overflow-x: hidden; } .walllist { min-width: 0; }
.wallrow label input { width: 18px; height: 18px; flex: none; accent-color: var(--action); }
.wallrow label span { display: flex; flex-direction: column; min-width: 0; }
.wallrow b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallrow small { font-size: 12px; color: var(--ink-soft); }
.wallrow.off b { color: var(--ink-faint, #999); font-weight: 500; }
.wallwords { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; min-height: 0; }
.wallwords[aria-pressed="true"] { border-color: var(--action); color: var(--ink); }
.wallboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px; border-radius: 14px; background: #efe7dc; border: 5px solid #dccbb2; }
.wallcard { background: #fbf8f3; color: #2f383b; border-radius: 5px; padding: 9px 10px; box-shadow: 0 3px 8px rgba(60,40,20,.14); min-width: 0; }
.wallcard:nth-child(3n+1) { transform: rotate(-.8deg); } .wallcard:nth-child(3n+2) { transform: rotate(.6deg); }
.wallcard small { display: block; font: 700 9px "Plus Jakarta Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3f6f7a; }
.wallcard.wk-note { background: #e4ecdf; } .wallcard.wk-note small { color: #5f8a70; }
.wallcard.wk-quote small { color: #c8765a; } .wallcard.wk-todo small { color: #5f8a70; } .wallcard.wk-piece small { color: #8a6f93; }
.wallcard b { display: block; margin-top: 3px; font: 500 15px/1.2 Newsreader, Georgia, serif; overflow-wrap: anywhere; }
.wallcard p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; white-space: pre-line; color: #4a5256; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wallquiet { color: #7a8285 !important; font-size: 12px; }
.wallfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wallfoot button { width: auto; padding: 10px 20px; border-radius: 999px; }
.wallfoot button:not(.primary) { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.commwall { margin-top: 22px; }
.commwall .sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wallpostcard { margin: 10px 0 16px; }
.wallwho { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.bcdfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 20px 0 6px; }
.bcdfeat h3 { margin: 0 0 6px; font: 500 19px Newsreader, Georgia, serif; color: var(--ink); }
.bcdfeat ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.bcdfeat li { margin: 0 0 6px; }
/* v218 photo editor */
.dp-photo { width: min(1180px, 100%) !important; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.dp-photo .dpopbar { flex-wrap: wrap; gap: 10px; }
.phtiers { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(63,111,122,.25); margin-right: auto; }
.phtiers button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: 600 13px "Plus Jakarta Sans", sans-serif; color: #5b5550; cursor: pointer; min-height: 0; }
.phtiers button[aria-selected="true"] { background: #3f6f7a; color: #fff; }
.dp-photo .phbody { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); overflow: hidden; min-height: 0; flex: 1; }
.phleft { display: grid; gap: 8px; align-content: start; min-width: 0; }
.dp-photo .phframe { position: relative; max-height: none; touch-action: none; display: grid; place-items: center; background: transparent; box-shadow: none; overflow: visible; aspect-ratio: auto !important; }
.phcanvas { display: block; max-width: 100%; max-height: 64vh; width: auto; height: auto; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); border-radius: 3px; }
@media (max-width: 720px) { .phcanvas { max-height: 50vh; } }
.phframe.phpaint, .phframe.phheal, .phframe.phradial { cursor: crosshair; }
.phring { position: absolute; transform: translate(-50%, -50%); border: 2px dashed rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.phhisto { width: 100%; height: 56px; border-radius: 6px; background: #f1ede6; }
.phtime { margin: 0; font-size: 12.5px; color: #7b746c; }
.dp-photo .phtools { overflow-y: auto; max-height: calc(100vh - 150px); padding-right: 6px; gap: 6px; }
.phgroup { padding: 10px 0 12px; border-top: 1px solid rgba(0,0,0,.08); display: grid; gap: 6px; }
.phgroup h4 { margin: 0 0 2px; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3f6f7a; }
.phtool { display: grid; gap: 1px; }
.dp-photo .phslide { grid-template-columns: 92px 1fr 34px; gap: 8px; }
.phslide output { font: 600 11.5px "Plus Jakarta Sans", sans-serif; color: #8a8178; text-align: right; font-variant-numeric: tabular-nums; }
.phlesson { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: #857d74; }
.phrow { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-photo .phbtn { padding: 7px 14px; font-size: 13px; }
.dp-photo .phchips span { width: 92px; }
.phhues { display: flex; gap: 6px; flex-wrap: wrap; }
.phhues button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; min-height: 0; }
.phhues button.on { border-color: #2f383b; box-shadow: 0 0 0 2px #fdfbf7 inset; }
.phcurve { width: 100%; max-width: 300px; height: auto; aspect-ratio: 13 / 10; border-radius: 8px; background: #f4f0ea; touch-action: none; cursor: pointer; }
.phgrade { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: #3f4a4c; }
.phsw { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
@media (max-width: 720px) { .dp-photo .phbody { grid-template-columns: 1fr; overflow-y: auto; } .dp-photo .phtools { max-height: none; overflow: visible; } .phframe { max-height: 52vh; } .phtiers { order: 3; margin: 0 auto; } }
.phcvw { position: relative; display: inline-block; max-width: 100%; line-height: 0; }

/* v219 the Clock: plans as circles you drop, move and size; days you can step through */
.dcrow { position: relative; border-left: 0 !important; padding-left: 20px !important; border-radius: 8px; }
.dcrow::before { content: ''; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 6px; border-radius: 3px; background: var(--ic); }
.dcrow.done::before { opacity: .55; }
.dcnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
.dcstep { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.dcnavday { min-width: 150px; text-align: center; font: 500 18px Newsreader, Georgia, serif; color: var(--ink); }
.dctoday { border: 0; background: transparent; color: var(--c-blue); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; padding: 4px 6px; min-height: 0; }
.dcfacewrap { position: relative; }
.dcdigital { font: 600 17px "Plus Jakarta Sans", sans-serif; fill: #5b6468; text-anchor: middle; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dcdigital.moving { fill: #2f383b; font-size: 19px; }
.dchands.away { opacity: .22; }
.dcdrop { position: absolute; right: 2%; bottom: 2%; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px dashed var(--ink-faint); background: var(--surface); color: var(--ink-soft); cursor: grab; touch-action: none; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.dcdrop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dcdropghost { position: fixed; z-index: 90; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(111,154,166,.35); border: 2px dashed #6f9aa6; pointer-events: none; transition: transform .12s; }
.dcdropghost.on { background: rgba(111,154,166,.75); transform: scale(1.12); }
.dcitem.sel .dcdot { stroke: #2f383b; stroke-width: 2.5; }
.dchandle { fill: #fbfaf7; stroke: #2f383b; stroke-width: 2; cursor: ew-resize; }
.dcsheet { margin: 10px auto 0; max-width: 460px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; }
.dcsheeth { margin: 0; font: 500 18px Newsreader, Georgia, serif; color: var(--ink); }
.dckinds { display: flex; flex-wrap: wrap; gap: 6px; }
.dckinds button { padding: 5px 11px; min-height: 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: 600 12.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.dckinds button[aria-pressed="true"] { background: var(--ic); border-color: var(--ic); color: #fff; }
.dcnote { width: 100%; }
.dclen { display: inline-flex; align-items: center; gap: 6px; }
.dclen button { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.dclen span { min-width: 76px; text-align: center; font: 600 13.5px "Plus Jakarta Sans", sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.dcsheetrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dcsheetrow > button { width: auto; padding: 8px 16px; min-height: 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 13.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.dcsheetrow > button.primary { background: var(--action, #c8765a); border-color: var(--action, #c8765a); color: #fff; }
.dcsheetrow > button.dcisdone { background: #5f9a72; border-color: #5f9a72; color: #fff; }
.dcrepeat, .dctip { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
button.dcwd { border: 0; background: transparent; padding: 0; min-height: 0; cursor: pointer; font: inherit; color: inherit; }
.tivline, .trestline { margin: 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.tbgroup { will-change: transform; }
.tm-rest .twedge { fill: color-mix(in srgb, var(--tc) 70%, #8fb4bf); }
.tivals.hidden { display: none !important; }
.tmodes { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.timercard:not(.main) .tmodes button { padding: 5px 9px; font-size: 12px; }
.phsum { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 2px 0 8px; font-size: 12px; color: #857d74; }
.phsum span { margin-right: 4px; }
.phsum button { padding: 3px 9px; min-height: 0; border-radius: 999px; border: 1px solid rgba(63,111,122,.3); background: rgba(63,111,122,.08); color: #3f6f7a; font: 600 11.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }

/* v219 the color ball docks inside windows */
.colordock { width: 30px; height: 30px; min-height: 0; padding: 0; flex: none; border-radius: 50%; border: 0; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%), conic-gradient(#5c8f9a, #9dbba8, #d9a95a, #d08566, #8fb4bf, #5c8f9a); box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 3px 10px rgba(0,0,0,.28); transition: transform .15s; }
.colordock:hover { transform: scale(1.08); }
body.bc-pickout .colordock:not(.pulling), body.colorball .colordock:not(.pulling) { visibility: hidden; pointer-events: none; }
.colordock.pulling { opacity: 0; }
body.bc-balldrag .colordock { visibility: visible !important; pointer-events: auto; opacity: 1; background: radial-gradient(circle, rgba(255,255,255,.08) 52%, rgba(143,180,191,.55) 54%, rgba(143,180,191,.15) 70%, transparent 72%); border: 0; box-shadow: 0 0 0 1px rgba(143,180,191,.5), 0 0 14px rgba(143,180,191,.55); animation: dockglow 1.4s ease-in-out infinite alternate; }
@keyframes dockglow { to { box-shadow: 0 0 0 1px rgba(143,180,191,.8), 0 0 22px rgba(143,180,191,.8); } }
.deskbar .colordock { margin-left: 4px; align-self: center; }
.rddock { position: absolute; z-index: 3; left: calc(58px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); opacity: .7; }
.rddock:hover { opacity: 1; }
.wstop .colordock { width: 26px; height: 26px; margin: 0 4px; }

/* v220 Read: shelves of more than 8 books run in 2 rows that swipe sideways; sections move up and down */
.byshelf .libgrid.two { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 164px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px; scrollbar-width: thin; }
.byshelf .libgrid.two > * { scroll-snap-align: start; }
@media (max-width: 600px) { .byshelf .libgrid.two { grid-auto-columns: calc(50% - 4px); } }
.libmove { display: inline-flex; gap: 2px; margin-left: auto; margin-right: 6px; }
.libmove button { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 14px; cursor: pointer; }
/* v220 highlights and notes: filters, a control row on each, and the workbench */
.hlfilt { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 4px; }
.hlfilt button { padding: 4px 10px; min-height: 0; border-radius: 999px; border: 1px solid var(--rline, var(--line)); background: transparent; color: var(--rsoft, var(--ink-soft)); font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.hlfilt button[aria-pressed="true"] { background: var(--rchip, rgba(143,180,191,.2)); color: var(--rink, var(--ink)); }
.hldot { width: 18px; height: 18px; min-height: 0; padding: 0 !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer; flex: none; }
.hldot.on { box-shadow: 0 0 0 2px var(--rink, var(--ink)); }
.hldot.sm { width: 15px; height: 15px; }
.hltagf { font-weight: 500 !important; }
.hlctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.hlctl button { min-height: 0; }
.hlstar { border: 0; background: transparent; color: var(--rsoft, var(--ink-soft)); font-size: 16px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.hlstar.on { color: #d9a441; }
.hlpal { display: inline-flex; gap: 4px; align-items: center; }
.hlpal.fold { display: none; }
.hltagbtn, .hlact { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rline, var(--line)); background: transparent; color: var(--rsoft, var(--ink-soft)); font: 600 11.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.hlrm { margin-left: auto; }
.hlrm:hover { color: #c0564a; border-color: #c0564a; }
.rdsideitem { display: block; text-align: left; }
.rdsidebody { display: block; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.rdsidebody p { margin: 4px 0 0; }
.rdsideq { display: block; font-style: italic; opacity: .75; border-left: 3px solid var(--hc, var(--rline)); padding-left: 8px; }
.rdsideitem.target { outline: 2px solid var(--hc, var(--c-blue)); outline-offset: 2px; border-radius: 10px; }
.rdsidetarget { position: relative; padding: 8px 30px 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hc) 20%, transparent); border-left: 4px solid var(--hc); margin-bottom: 6px; }
.rdsidetarget p { margin: 0; font-style: italic; font-size: 13.5px; line-height: 1.4; max-height: 5.6em; overflow: hidden; }
.rdsidetarget small { display: block; margin-top: 4px; opacity: .8; }
.rdsidetarget .rdx { position: absolute; right: 4px; top: 4px; }
.rdsidehead .rdexpand { margin-left: auto; }
.rdcardwrap { margin-bottom: 10px; }
.rdcardwrap .rdcard { margin-bottom: 0; }
.rdfootrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hlbench { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(20,24,26,.5); backdrop-filter: blur(4px); }
.hlbenchsheet { width: min(1100px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: 20px; padding: 18px 20px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.hlbenchhead { display: flex; align-items: center; gap: 12px; }
.hlbenchhead > div { margin-right: auto; } .hlbenchhead small { color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hlbenchhead h2 { margin: 2px 0 0; font: 500 24px Newsreader, Georgia, serif; }
.hlbenchhead select { width: auto; }
.hlbenchsheet .hlfilt button { border-color: var(--line); color: var(--ink-soft); }
.hlbenchsheet .hlfilt button[aria-pressed="true"] { background: color-mix(in srgb, var(--c-blue) 18%, transparent); color: var(--ink); }
.hlbenchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.hlbcard { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid var(--hc); background: var(--field); }
.hlbcard.star { box-shadow: inset 0 0 0 1px #d9a441; }
.hlbcard small { color: var(--ink-soft); font-size: 11.5px; }
.hlbq { margin: 6px 0; font: italic 15px/1.45 Newsreader, Georgia, serif; }
.hlbcard.hl .hlbq { background: color-mix(in srgb, var(--hc) 16%, transparent); padding: 4px 6px; border-radius: 6px; }
.hlbnote { width: 100%; min-height: 64px; font-size: 14px; }
.hlbcard .hlctl button { border-color: var(--line); color: var(--ink-soft); }
.hlbcard .hlctl .hlgo { color: var(--c-blue); }

/* v220 the Clock fits the window, and fills the screen when asked */
#dayClock { position: relative; }
.dclockface { max-height: calc(100vh - 250px); width: auto !important; max-width: 100%; margin: 0 auto; }
.dcfacewrap { display: flex; justify-content: center; }
.dcyearrow { margin-top: 22px; }
.dcfullbtn { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.dcfullbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#dayClock.dcfull { position: fixed; inset: 0; z-index: 95; margin: 0; border-radius: 0; overflow: auto; background: var(--bg); padding: 22px 28px !important; }
#dayClock.dcfull .dclock { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr) !important; height: 100%; align-items: center !important; }
#dayClock.dcfull .dclockface { max-height: calc(100vh - 150px); }
@media (max-width: 800px) { #dayClock.dcfull .dclock { grid-template-columns: 1fr !important; height: auto; } }
body.dcfullon .phonetop, body.dcfullon .tutorbar { display: none !important; }
.dcnum { font-size: 15px; }
.dcitem.sel .dcdot { stroke: var(--ic) !important; stroke-width: 3 !important; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic) 70%, transparent)); }
.dchandle { fill: #fbfaf7 !important; stroke: var(--ic) !important; stroke-width: 2.5 !important; cursor: ew-resize; }
.dccheck { color: var(--ink-soft) !important; }
.dccheck.on { color: #5f9a72 !important; border-color: #5f9a72 !important; }
.dcnowline { position: relative; height: 18px; margin: 2px 0; display: flex; align-items: center; }
.dcnowline::before { content: ''; flex: 1; height: 2px; border-radius: 1px; background: var(--action, #c8765a); opacity: .8; }
.dcnowline span { order: -1; margin-right: 8px; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--action, #c8765a); }
.dcrow.now { background: color-mix(in srgb, var(--ic) 22%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ic) 50%, transparent); }
.dcrow.now .dcn { font-weight: 600; }
.dcrow.sel { background: color-mix(in srgb, var(--ic) 12%, transparent); }
.dclockside { gap: 4px; }
.dcrow { padding-top: 7px !important; padding-bottom: 7px !important; }

/* v220 Breathe: animated by the browser itself, so it stays smooth */
.tbwrap { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto;
  background: color-mix(in srgb, var(--tc) 9%, #fbfaf7); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.timercard:not(.main) .tbwrap { max-width: 220px; }
.tfull .tbwrap.tfulldisc { width: min(70vmin, 600px); max-width: none; }
.tbsea { position: absolute; inset: 0; transform: scale(.78); will-change: transform; }
.tbwrap.on .tbsea { animation: tbbreath 12s infinite; }
@keyframes tbbreath { 0% { transform: scale(.6); animation-timing-function: cubic-bezier(.45,0,.55,1); } 33.333% { transform: scale(.97); animation-timing-function: cubic-bezier(.45,0,.55,1); } 100% { transform: scale(.6); } }
.tbl { position: absolute; left: 50%; top: 50%; display: block; will-change: transform; }
.tbl.b1 { width: 92%; height: 90%; margin: -45% 0 0 -46%; background: color-mix(in srgb, var(--tc) 26%, #fbfaf7); border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; animation: tbdrift 38s linear infinite; }
.tbl.b2 { width: 76%; height: 78%; margin: -39% 0 0 -38%; background: color-mix(in srgb, var(--tc) 45%, #fbfaf7); border-radius: 55% 45% 48% 52% / 46% 55% 45% 54%; animation: tbdrift 29s linear infinite reverse; opacity: .85; }
.tbl.b3 { width: 58%; height: 56%; margin: -28% 0 0 -29%; background: color-mix(in srgb, var(--tc) 70%, #fbfaf7); border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%; animation: tbdrift 23s linear infinite; opacity: .75; }
.tbl.b4 { width: 38%; height: 38%; margin: -19% 0 0 -19%; background: var(--tc); border-radius: 52% 48% 45% 55% / 48% 54% 46% 52%; animation: tbdrift 31s linear infinite reverse; opacity: .45; }
@keyframes tbdrift { to { transform: rotate(360deg); } }
.tbglint { position: absolute; left: 36%; top: 30%; width: 22%; height: 9%; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(4px); animation: tbglint 17s ease-in-out infinite alternate; }
@keyframes tbglint { to { transform: translate(40%, 30%) rotate(12deg); opacity: .6; } }
.tbtime { position: absolute; inset: 0; display: grid; place-items: center; font: 600 17px "Plus Jakarta Sans", sans-serif; color: #2f383b; font-variant-numeric: tabular-nums; pointer-events: none; }
.tfull .tbtime { display: none; }
@media (prefers-reduced-motion: reduce) { .tbwrap.on .tbsea, .tbl, .tbglint { animation: none !important; } }
.tset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 360px; }
.tset select { width: auto; min-width: 0; font-size: 13.5px; padding: 6px 28px 6px 10px; }
.tset input[type="range"] { flex: 1; min-width: 110px; accent-color: var(--tc); }
.tset output { min-width: 62px; font: 600 12.5px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* v220 photo sliders: a clear teal on a light track */
.dp-photo input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px !important; border-radius: 2px !important; border: 0 !important; padding: 0 !important; margin: 8px 0; background: #e4e0d8; outline: none; }
.dp-photo input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #4d8f9c; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
.dp-photo input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #4d8f9c; cursor: pointer; }
.dp-photo input[type="range"]::-moz-range-track { background: transparent; }
.timercard .tmodes { margin: 0 36px; }
.rdsideitem.hl .rdsidebody p { background: color-mix(in srgb, var(--hc) 20%, transparent) !important; border-left: 3px solid var(--hc); padding: 3px 8px; border-radius: 4px; }

/* v221 desk: resize from a corner (a faint fold shows there), pinch, or trackpad pinch */
.ditem { transform-origin: 0 0; }
.ditem::after { content: ''; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; opacity: 0; pointer-events: none; transition: opacity .15s;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.18) 50%); border-radius: 0 0 3px 0; }
.ditem.corner::after { opacity: 1; }
.ditem.corner { cursor: nwse-resize; }
.ditem.lift { transition: none !important; }

/* v221 photo editor full screen, and keeping a photo */
.phfull { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(63,111,122,.25); background: transparent; color: #3f6f7a; display: grid; place-items: center; cursor: pointer; }
.phfull svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dpop.phbigov { padding: 0 !important; }
.dp-photo.phbig { width: 100vw !important; max-width: none !important; height: 100vh; max-height: 100vh !important; border-radius: 0 !important; }
.dp-photo.phbig .phbody { grid-template-columns: minmax(0, 1fr) 340px; }
.dp-photo.phbig .phcanvas { max-height: calc(100vh - 150px); }
.dp-photo.phbig .phtools { max-height: calc(100vh - 90px); }
@media (max-width: 720px) { .dp-photo.phbig .phbody { grid-template-columns: 1fr; } .dp-photo.phbig .phcanvas { max-height: 60vh; } }
.phlock { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: #7b746c; }
.phlock select { width: auto; font-size: 13px; padding: 6px 28px 6px 10px; }
/* v222 the Clock is one screen: face on the left, the day's panel on the right; nothing spills below */
.dcband { fill: none; stroke: var(--ic); stroke-width: 16; stroke-linecap: round; opacity: .42; }
.dcitem.done .dcband { opacity: .18; }
@media (min-width: 801px) {
  #dayClock:not(.dcfull) { display: flex; flex-direction: column; overflow: hidden; }
  #dayClock .dclock { flex: 1; min-height: 0; height: 100%; grid-template-columns: minmax(0, 1fr) minmax(290px, 380px) !important; align-items: stretch !important; gap: 24px; }
  #dayClock .dclockleft { min-height: 0; display: flex !important; flex-direction: column; justify-content: center; }
  #dayClock .dcfacewrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  #dayClock .dclockface { max-height: 100% !important; height: 100%; width: auto !important; max-width: 100%; }
  #dayClock .dclockside { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; align-content: start; scrollbar-width: thin; }
}
#dayClock.dcfull .dclock { height: 100%; }
#dayClock.dcfull .dclockleft { height: calc(100vh - 44px); display: flex !important; }
#dayClock.dcfull .dcfacewrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#dayClock.dcfull .dclockface { max-height: 100% !important; height: 100%; width: auto !important; }
#dayClock.dcfull .dclockside { max-height: calc(100vh - 44px); overflow-y: auto; }
.dclockside .dcnav { justify-content: space-between; margin: 0 40px 4px 0; }
.dcflip { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); margin: 4px 0 8px; width: max-content; }
.dcflip button { border: 0; background: transparent; padding: 5px 14px; min-height: 0; border-radius: 999px; font: 600 13px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); cursor: pointer; }
.dcflip button[aria-selected="true"] { background: color-mix(in srgb, var(--c-blue) 22%, transparent); color: var(--ink); }
.dcpane { display: grid; gap: 4px; align-content: start; }
.dcpane .dcweek { margin-top: 10px; }
.dcpane .yearcard { margin-top: 4px; }
.dclockside .dcsheet { margin: 6px 0 10px; max-width: none; }
.dcdrop { right: 4%; bottom: 3%; }

@media (min-width: 801px) {
  #clockTimer { display: flex; flex-direction: column; overflow: hidden; }
  #clockTimer .timergrid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; scrollbar-width: thin; padding: 2px; }
  #clockTimer .timercard.main .timerdisc, #clockTimer .timercard.main .tbwrap { max-width: min(360px, 44vh); }
}
#clockTimer .sechead { display: flex; align-items: center; gap: 10px; }
.taddbtn { width: 32px; height: 32px; min-height: 0; padding: 0 !important; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; margin: 0 !important; }

/* v222 Breathe as a glow */
.tbwrap { background: radial-gradient(circle, color-mix(in srgb, var(--tc) 8%, #1d2426) 0%, #1a2022 70%) !important; }
.tbwrap > .tbl, .tbwrap > .tbsea { display: none; }
.tbglow, .tbcore, .tbring { position: absolute; left: 50%; top: 50%; border-radius: 50%; display: block; will-change: transform, opacity; }
.tbglow { width: 86%; height: 86%; margin: -43% 0 0 -43%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 85%, #fff) 0%, color-mix(in srgb, var(--tc) 55%, transparent) 38%, color-mix(in srgb, var(--tc) 18%, transparent) 62%, transparent 72%); filter: blur(2px); transform: scale(.72); }
.tbcore { width: 30%; height: 30%; margin: -15% 0 0 -15%; background: radial-gradient(circle, rgba(255,255,255,.85), color-mix(in srgb, var(--tc) 40%, #fff) 60%, transparent 72%); opacity: .7; }
.tbring { width: 88%; height: 88%; margin: -44% 0 0 -44%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); opacity: .5; transition: box-shadow .6s, opacity .6s; }
.tbwrap.holding .tbring { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, transparent), 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent); opacity: .9; }
.tbwrap .tbtime { color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
@media (min-width: 801px) { body.pg-calc.cvfit .wrap { padding-bottom: 0 !important; } body.pg-calc.cvfit #page-calc > *:last-child { margin-bottom: 0 !important; } }
.tbglow { background: radial-gradient(circle, color-mix(in srgb, var(--tc) 60%, #fff) 0%, color-mix(in srgb, var(--tc) 85%, transparent) 30%, color-mix(in srgb, var(--tc) 35%, transparent) 55%, transparent 71%) !important; filter: blur(3px) !important; }
.wordmark, .navmark { cursor: pointer; }

.dpopbody .dpopclub { display: inline-block; margin: 10px 0 0; padding: 5px 12px; font-size: 12.5px; background: transparent; color: #3f6f7a; border-color: rgba(63,111,122,.35); }
.phview { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; background: rgba(15,18,20,.82); backdrop-filter: blur(6px); padding: 24px; }
.phview img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 3px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fdfbf7; padding: 10px; }
.phviewbar { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; align-items: center; }
.phviewed { padding: 8px 18px; border-radius: 999px; border: 0; background: #fdfbf7; color: #2f383b; font: 600 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; }

.dp-photo .phframe { overflow: hidden !important; border-radius: 4px; }
.phcanvas { transform-origin: center center; will-change: transform; }
.phframe.zoomed { cursor: grab; }
.phzoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(253,251,247,.9); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.phzoom button { min-width: 30px; height: 28px; min-height: 0; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #2f383b; font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.dp-photo.phbig .phhisto { height: 40px; }
.dp-photo.phbig .phcanvas { max-height: calc(100vh - 120px) !important; }

/* v222 the Planner keeps its colors: each plan tinted by its own color; today is marked softly in teal */
.session[style*="--ic"] { background: color-mix(in srgb, var(--ic) 17%, var(--field)) !important; }
.session.done[style*="--ic"] { background: color-mix(in srgb, var(--ic) 8%, var(--field)) !important; }
.gchip[style*="--ic"] { background: color-mix(in srgb, var(--ic) 20%, var(--field)) !important; }
.gchip.done[style*="--ic"] { opacity: .6; }
.gchip .kicon, .session .kicon { background: color-mix(in srgb, var(--ic) 30%, transparent) !important; color: var(--ic) !important; }
.glancerow.today { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-blue) 55%, transparent) !important; background: color-mix(in srgb, var(--c-blue) 9%, var(--field)) !important; }
.glancerow.today .gnum { background: var(--c-blue) !important; color: #fff; }
/* v222 raised depth: the year and look-back cards drop the gold wash and sit like the other cards */
:root[data-depth="raised"] .yearcard, :root[data-depth="raised"] .dclook { background: color-mix(in srgb, var(--field) 70%, transparent) !important; border-color: var(--line) !important; box-shadow: none !important; }
:root[data-depth="raised"] .yearcard .dcyt { background: color-mix(in srgb, var(--ic) 10%, var(--field)) !important; }
:root[data-depth="raised"] .yearcard .dcyt::before { width: 0; }
:root[data-depth="raised"] .yearcard .dcyt b { color: var(--ic) !important; }
.ovqgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ovqgrid .ovquote { width: auto !important; margin: 0 !important; display: block !important; min-width: 0; }

/* v223 shelf cards: pages of 2 shelves; the next pair sits to the side */
#listgrid .shelfcase { display: flex !important; gap: 0; width: max-content; min-width: 100%; }
#listgrid .shelfpage { flex: none; width: var(--pagew, auto); scroll-snap-align: start; }
#listgrid .shelfcase.paged .shelfpage { width: calc(var(--sw, 84px) * 5 + 10px * 4 + 28px); }
@media (max-width: 600px) { #listgrid .shelfcase.paged .shelfpage { width: calc(var(--sw, 64px) * 4 + 10px * 3 + 28px); } }
#listgrid .shelfscroll { scroll-snap-type: x mandatory; }
#listgrid .shelfrow .cover { scroll-snap-align: none; }

.byshelf .libgrid.libpaged { display: flex !important; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 0; padding-bottom: 8px; scrollbar-width: thin; }
.byshelf .libpage { flex: 0 0 100%; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px 14px; scroll-snap-align: start; align-content: start; padding-right: 2px; }
@media (max-width: 600px) { .byshelf .libpage { gap: 14px 8px; } }

/* v223 checking a plan off: its circle keeps its color, gains the green ring and check, and sends out 2 soft ripples in its own color */
.dcripple { fill: none; stroke: var(--ic); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: dcripple 1.1s ease-out both; pointer-events: none; }
.dcripple.two { animation-delay: .18s; stroke-width: 2; }
@keyframes dcripple { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.dclockface.alldone .dcface { stroke: #5f9a72; stroke-width: 3; filter: drop-shadow(0 0 14px rgba(95,154,114,.45)); animation: dcalldone 2.4s ease-out 1; }
@keyframes dcalldone { from { filter: drop-shadow(0 0 28px rgba(95,154,114,.9)); } to { filter: drop-shadow(0 0 14px rgba(95,154,114,.45)); } }
@media (prefers-reduced-motion: reduce) { .dcripple, .dclockface.alldone .dcface { animation: none !important; } .dcripple { display: none; } }

.tmoderow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 36px; }
.timercard .tmoderow .tmodes { margin: 0; }
.tsaved { width: auto; font-size: 12.5px; padding: 5px 26px 5px 10px; border-radius: 999px; }

/* Publishers' covers: a book whose cover has not arrived wears a plain cloth binding, not a painted scene, so the two styles never mix */
body.pubcovers .cover:not(:has(img)) .artsvg { display: none !important; }
body.pubcovers .cover:not(:has(img)) { background: color-mix(in srgb, var(--cc, #5f7f7a) 78%, #1f2426) !important; }
body.pubcovers .cover:not(:has(img)) .ct, body.pubcovers .cover:not(:has(img)) .ca { display: -webkit-box !important; visibility: visible !important; opacity: 1 !important; position: relative; z-index: 1; color: #f4efe6 !important; }
body.pubcovers .cover:not(:has(img)) .ca { display: block !important; opacity: .8 !important; }
body.pubcovers .cover:not(:has(img)) .artpanel { background: transparent !important; color: #f4efe6 !important; inset: auto 0 0 0; top: auto !important; height: auto !important; padding: 10% 9% !important; }
body.pubcovers .cover:not(:has(img)) .artpanel * { color: #f4efe6 !important; }

/* v224 clock: no dotted halos, thicker bands, a clearer now line; year cards in neutral with the shelf stripe */
.dcitem.due .dcwin { stroke: transparent !important; stroke-dasharray: none !important; }
.dcband { stroke-width: 12 !important; opacity: .55 !important; }
.dcitem.done .dcband { opacity: .28 !important; }
.dcguide { stroke-dasharray: none !important; opacity: .35; }
.dcnowline::before { height: 3px !important; opacity: 1 !important; }
.dcnowline span { font-size: 12px !important; }
.yearcard, .dclook { background: color-mix(in srgb, var(--field) 80%, transparent) !important; border: 1px solid var(--line) !important; position: relative; overflow: hidden; }
.yearcard::before, .dclook::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #9dbba8 0 20%, #d9a441 20% 40%, #5c8f9a 40% 60%, #d08566 60% 80%, #c9b28e 80%); }
.dclookh { color: var(--c-blue) !important; }
.yearcard .dcyt { background: color-mix(in srgb, var(--ic) 14%, var(--field)) !important; }
.yearcard .dcyt::before { width: 0 !important; }
.yearcard .dcyt b { color: var(--ic) !important; }
.dclooki { border-bottom-color: var(--line) !important; }

/* v224 Breathe: warm light that fills the whole circle on the in-breath and gathers back to the middle */
.tbwrap { background: radial-gradient(circle, color-mix(in srgb, var(--tc) 30%, #2b201c) 0%, #231b18 72%) !important; box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 40px rgba(0,0,0,.25) !important; }
.tbglow { width: 100% !important; height: 100% !important; margin: -50% 0 0 -50% !important; filter: blur(6px) !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 35%, #fff1dc) 0%, color-mix(in srgb, var(--tc) 80%, #ffd9b0) 30%, var(--tc) 55%, color-mix(in srgb, var(--tc) 55%, transparent) 68%, transparent 71%) !important; }
.tbcore { background: radial-gradient(circle, rgba(255,246,232,.95), rgba(255,226,190,.55) 55%, transparent 72%) !important; }
.tbring { box-shadow: inset 0 0 0 1px rgba(255,220,180,.18) !important; }
.tbwrap.holding .tbring { box-shadow: inset 0 0 0 2px rgba(255,220,180,.45), 0 0 26px rgba(255,190,140,.35) !important; }
.tbwrap .tbtime { color: #fff6ea !important; }

.phviewed { display: inline-flex !important; align-items: center; gap: 8px; padding: 11px 22px !important; background: linear-gradient(135deg, #d08566, #c8765a) !important; color: #fff !important; font-size: 15px !important; box-shadow: 0 8px 24px rgba(200,118,90,.45); animation: phedit 2.2s ease-in-out 2; }
.phviewed svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes phedit { 50% { box-shadow: 0 8px 30px rgba(200,118,90,.8); transform: translateY(-1px); } }
/* v225 the clock, calmer: each plan a soft filled circle in its own color with a white icon, a slim arc for its length, no rings of white */
.dclockface .dcdot { fill: color-mix(in srgb, var(--ic) 88%, #fff) !important; stroke: none !important; stroke-dasharray: none !important; filter: drop-shadow(0 2px 4px rgba(30,40,45,.22)); }
.dclockface .dcico { color: #fff !important; stroke: #fff !important; }
.dclockface .dcico path, .dclockface .dcico circle, .dclockface .dcico rect { stroke: #fff !important; }
.dclockface .dcitem.done .dcdot { fill: color-mix(in srgb, var(--ic) 55%, #fff) !important; }
.dclockface .dcwin { stroke: transparent !important; animation: none !important; }
.dclockface .dcitem.now .dcwin { stroke: var(--ic) !important; stroke-width: 2 !important; opacity: .7; animation: dcnow 2.4s ease-in-out infinite !important; }
.dclockface .dcitem.sel .dcdot { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 7px color-mix(in srgb, var(--ic) 85%, transparent)) !important; }
.dclockface .dcband { stroke-width: 5 !important; opacity: .45 !important; }
.dclockface .dcitem.done .dcband { opacity: .22 !important; }
.dclockface .dcguide { opacity: 0 !important; }
.dclockface .dcbadge { fill: #5f9a72 !important; stroke: #fff; stroke-width: 1.5; }
/* timer faces: a soft face in both themes, never a harsh white */
.tface { fill: #ece6dc !important; }
:root:not([data-theme="light"]) .tface { fill: #3a4346 !important; }
:root:not([data-theme="light"]) .ttick { stroke: rgba(255,255,255,.28) !important; }
:root:not([data-theme="light"]) .thub { fill: #2f373a !important; stroke: rgba(255,255,255,.12) !important; }
:root:not([data-theme="light"]) .ttime { fill: #eee7dc !important; }
/* This year: plain tiles, a small colored dot, numbers in ink */
.yearcard::before, .dclook::before { display: none !important; }
.yearcard .dcyt { background: var(--field) !important; border: 1px solid var(--line); }
.yearcard .dcyt b { color: var(--ink) !important; }
.yearcard .dcyt::after { content: ''; position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ic); }
/* Breathe: one solid circle of color that grows and shrinks */
.tbwrap { background: color-mix(in srgb, var(--tc) 14%, var(--field)) !important; box-shadow: none !important; }
.tbglow { background: var(--tc) !important; filter: none !important; width: 76% !important; height: 76% !important; margin: -38% 0 0 -38% !important; border-radius: 50%; opacity: 1 !important; }
.tbcore, .tbring { display: none !important; }
.tbwrap .tbtime { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.25); }

.phbar { padding: 6px 14px; min-height: 0; border-radius: 999px; border: 1px solid rgba(63,111,122,.3); background: transparent; color: #3f6f7a; font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.phbar:disabled { opacity: .4; cursor: default; }
.phhshapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.phhshapes figure { margin: 0; text-align: center; }
.phhshapes svg { width: 100%; height: 30px; background: #f1ede6; border-radius: 4px; }
.phhshapes path { fill: rgba(77,143,156,.55); }
.phhshapes figcaption { font-size: 10.5px; color: #857d74; margin-top: 2px; }
.ditem.turner { cursor: grab; }
.ditem.turner::before { content: '\21bb'; position: absolute; left: 3px; top: 1px; z-index: 5; font-size: 14px; line-height: 1; color: rgba(0,0,0,.35); pointer-events: none; }

/* v226 One book, first in Pace */
#page-calc:not(.cv-est) > #bookPace { display: none !important; }
.bookpace { display: grid; gap: 12px; }
.bphead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bphead select { width: auto; max-width: 100%; }
.bpbody { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 1fr); gap: 20px; align-items: center; }
@media (max-width: 700px) { .bpbody { grid-template-columns: auto 1fr; } .bpresult { grid-column: 1 / -1; } }
.bpform { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bpform label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.bpform input { width: 100%; }
.bpfact { margin: 0; font-size: 14px; color: var(--ink); }
.bpcount { justify-self: start; align-self: end; }
.bpbig { margin: 0; font: 500 30px/1.1 Newsreader, Georgia, serif; color: var(--ink); }
.bpsmall { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

/* v226 */
.griddots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.griddots button { width: 8px; height: 8px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.griddots button.on { background: var(--c-blue); width: 18px; border-radius: 4px; }
.dclockface .dcdigital.moving { fill: #5b6468 !important; font-size: 17px !important; }
.taddbtn { display: grid !important; place-items: center; padding: 0 0 2px 0 !important; }
.timerdisc { overflow: visible; }
.tface { fill: color-mix(in srgb, var(--ink) 7%, var(--surface)) !important; filter: drop-shadow(0 6px 14px rgba(0,0,0,.14)) !important; }
.ttick { stroke: color-mix(in srgb, var(--ink) 35%, transparent) !important; }
.thub { fill: var(--surface) !important; stroke: var(--line) !important; }
.ttime { fill: var(--ink) !important; }
#dayClock.dcfull .dcdock { position: absolute; top: 14px; right: 56px; z-index: 3; }
.tfullrow .colordock { align-self: center; }
.d-photo { padding: 7px !important; }
.d-photo .dphotoframe { border-radius: 0; }
.phdone { padding: 7px 18px; min-height: 0; border-radius: 999px; border: 0; background: #3f6f7a; color: #fff; font: 600 13.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.phcurve { max-width: 320px !important; aspect-ratio: 5 / 4 !important; cursor: crosshair !important; }

#calPrintSheet { display: none; }
.calnav { display: inline-grid !important; place-items: center; padding: 0 !important; line-height: 0 !important; }
.calnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.booklife { margin: 14px 0 4px; }
.booklife .bl-state { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.booklife .bl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.booklife .bl-bar button { width: auto; margin: 0; }
.booklife .bl-place { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.booklife .bl-place input { width: 5.5em; margin: 0; }
.booklife .bl-count { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.tsavewrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tsavebtn { width: auto; margin: 0; font-size: 12.5px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.tsavenote { font-size: 12px; color: var(--ink-soft); }
.calwhen { display: block; font: 600 11px/1.3 system-ui, sans-serif; background: var(--ink, #222); color: var(--card, #fff); border-radius: 6px; padding: 2px 6px; margin-bottom: 3px; width: max-content; }
.calresize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.calresize::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.wkev .calwhen { position: absolute; left: 4px; bottom: -22px; z-index: 5; }
.movesheet { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.35); display: grid; place-items: center; padding: 16px; }
.movecard { background: var(--card); color: var(--ink); border-radius: 18px; padding: 20px; width: min(360px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.movecard h3 { margin: 0 0 14px; font-size: 18px; }
.moverow { display: flex; gap: 8px; } .moverow input { flex: 1; min-width: 0; margin: 0; }
.movebar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .movebar button { width: auto; margin: 0; }
body.caldragging, body.caldragging * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing; }
.calghost { min-width: 150px; }
.calghost .calwhen { white-space: nowrap; }
/* clock face colors (v231) */
#dayClock .dcface { fill: var(--dcf, #fbfaf7) !important; }
#dayClock .dcnum, #dayClock .dcday, #dayClock .dcdigital, #dayClock .dcn { fill: var(--dci, #5e5852) !important; }
#dayClock .dctick, #dayClock .dcm { stroke: var(--dci, #5e5852) !important; opacity: .55; }
#dayClock .dch, #dayClock .dcs { stroke: var(--dchand, #2f383b) !important; }
#dayClock .dchandle { fill: var(--dcf, #fbfaf7) !important; }
#dayClock .dcdot { stroke: var(--dcf, #fbfaf7) !important; }
#dayClock .dcguide { stroke: color-mix(in srgb, var(--dci, #5e5852) 18%, transparent) !important; }
#dayClock.dcfull { background: var(--dcbg, var(--bg)) !important; }
#dayClock.dcfull.dcdark { color: var(--dchand); }
.dcfaces { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dcfaces button { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(128,128,128,.35); cursor: pointer; }
.dcfaces button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-soft); }
/* timers sit on linen */
.timercard { background: #f1ebe0; border-color: #e3dacb; color: #3f3a35; }
:root[data-theme="dark"] .timercard { background: #2c2a27; border-color: #3a3733; color: #d9d0c5; }
/* the Colors picker inside the reader */
.colorpop.inreader { background: var(--cpchip) !important; color: var(--cpink) !important; border-color: color-mix(in srgb, var(--cpink) 18%, transparent) !important; }
.colorpop.inreader .colortitle, .colorpop.inreader p, .colorpop.inreader span, .colorpop.inreader button { color: var(--cpink) !important; }
.colorpop.inreader.tucked { background: conic-gradient(#5c8f9a, #9dbba8, #d9a95a, #d08566, #8fb4bf, #5c8f9a) !important; box-shadow: 0 8px 22px rgba(0,0,0,.35) !important; }
/* the book menu button on each cover */
.covertile { position: relative; }
.covermore { position: absolute; top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(20,22,24,.62); color: #fff; font: 700 16px/30px system-ui, sans-serif; cursor: pointer; }
@media (hover: hover) { .covertile .covermore { opacity: 0; transition: opacity .15s; } .covertile:hover .covermore, .covertile:focus-within .covermore { opacity: 1; } }
.ebookgrid .ebook, .ebookgrid > * { position: relative; }
.ebookgrid .covermore { top: 8px; right: 8px; }
.ebstate { display: inline-block; margin-top: 4px; font: 600 11px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .02em; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-blue, #3f6f7a) 16%, transparent); color: var(--ink); }
/* the year as a field of days */
.yearartbox { margin: 14px 0 6px; }
.yearartscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.yearart { display: block; min-width: 680px; width: 100%; height: auto; }
.yearart .yaday { fill: color-mix(in srgb, var(--ink, #333) 7%, transparent); }
.yearart .yaday.later { fill: color-mix(in srgb, var(--ink, #333) 3%, transparent); }
.yearart .yaday.missed { fill: none; stroke: color-mix(in srgb, var(--ink, #333) 28%, transparent); stroke-width: 1; }
.yearart .yaday.today { stroke: var(--ink, #333); stroke-width: 1.4; }
.yearart .yamonth, .yearart .yawd { font: 600 9px "Plus Jakarta Sans", sans-serif; fill: var(--ink-soft, #888); letter-spacing: .04em; }
.yearartcap { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
#goalsYear, #goalsYear .yearcard, .yearcard, .yearartbox { min-width: 0; max-width: 100%; }
.yearcard { overflow: hidden; }
.yearcard .yearhead { flex-wrap: wrap; row-gap: 2px; }
.yearcard .dcyear { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
/* Take out and Put back across Shelves (v233) */
.takepill.isout { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.putbackpill { width: auto; margin: 0; font: 600 12px "Plus Jakarta Sans", sans-serif; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.outtag { display: inline-block; margin-top: 4px; font: 600 11px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); }
.covertile .covermore { opacity: 1 !important; }
/* shelves: 2 to a row, 1 on phones; the page scrolls down, never sideways through every shelf (v234) */
#listgrid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow-x: visible !important; flex-wrap: wrap !important; gap: 22px !important; scroll-snap-type: none !important; }
#listgrid > .lcard { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; }
@media (max-width: 760px) { #listgrid { grid-template-columns: minmax(0, 1fr) !important; } }
#gridPrev, #gridNext, #gridDots { display: none !important; }
/* Keep reading inside the Taken out box */
.nowcard .shelfhero { margin: 4px 0 16px; box-shadow: none !important; border: 0 !important; }
.dputback { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; width: auto; margin: 0; font: 600 12px "Plus Jakarta Sans", sans-serif; padding: 5px 12px; border-radius: 999px; border: 0; background: rgba(20,22,24,.72); color: #fff; cursor: pointer; white-space: nowrap; }
#nowrow { column-gap: 14px !important; gap: 14px !important; padding-left: 0 !important; padding-right: 0 !important; }
.heroacts .putbackpill { align-self: center; }
#nowrow > .nowchip { min-width: 0 !important; width: auto !important; max-width: none !important; box-sizing: border-box; }
#nowrow > .nowchip > div { min-width: 0; }
/* desk list: reorder and export (v235) */
.dlwrap { display: flex; align-items: stretch; gap: 6px; }
.dlwrap > .dlrow { flex: 1; min-width: 0; }
.dlwrap.dragging { opacity: .45; } .dlwrap.over { box-shadow: 0 -2px 0 var(--c-blue, #3f6f7a); }
.dlarrows { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.dlarrows button { width: 28px; height: 22px; min-height: 0; padding: 0; margin: 0; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 12px; }
.dlarrows button:disabled { opacity: .3; cursor: default; }
.dllayout { margin-top: 12px; }
.exportcard { width: min(460px, 100%); }
.exportlist { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.exportrow { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.exportrow input { width: 18px; height: 18px; margin: 0; }
.exportrow small { color: var(--ink-soft); font-size: 12px; } .exportrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v236: solid sheets, desk order grip, taken out in one row, shelf-card Take out */
.movesheet { background: rgba(10,12,14,.55) !important; }
.movecard { background: var(--surface, #fbfaf7) !important; color: var(--ink) !important; border: 1px solid var(--line); }
:root[data-theme="dark"] .movecard { background: #2b3336 !important; }
.dlarrows { display: none !important; }
.dlgrip { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 2px; cursor: grab; touch-action: none; user-select: none; color: var(--ink-soft); }
.dlnum { min-width: 18px; text-align: right; font: 600 13px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); }
.dldots { width: 10px; height: 16px; background-image: radial-gradient(currentColor 1.2px, transparent 1.4px); background-size: 5px 5px; opacity: .55; }
.dlwrap.dragging { opacity: .85; z-index: 5; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,.18); background: var(--surface, #fff); border-radius: 10px; }
.dlwrap.over { box-shadow: 0 -3px 0 var(--c-blue, #3f6f7a); }
.shelfcell { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
.celltake { width: auto; min-height: 0; margin: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--field, transparent); color: var(--ink); font: 600 11px "Plus Jakarta Sans", sans-serif; cursor: pointer; white-space: nowrap; }
.celltake.isout { background: #c8765a; border-color: #c8765a; color: #fff; }
/* v237: Taken out cards keep their words tidy */
#nowrow .nowchip b, #nowrow .nowchip .nowtitle, #nowrow .nowchip h4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#nowrow .nowchip .readpill, #nowrow .nowchip .putbackpill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nowrow .nowchip > div { overflow: hidden; }
/* Plan sheet (v237) */
.movecard.plancard { width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.planhead { display: flex; align-items: center; justify-content: space-between; }
.planchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.planchips button { width: auto; margin: 0; min-height: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.planchips button[aria-pressed="true"] { background: #3f6f7a; border-color: #3f6f7a; color: #fff; }
.planrange { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); } .planrange input { width: auto; margin: 0; padding: 5px 8px; }
.plandays { overflow: auto; display: grid; gap: 16px; padding-right: 4px; }
.planday h4 { margin: 0 0 6px; font: 600 15px Newsreader, Georgia, serif; }
.planlist { display: grid; gap: 6px; }
.planitem { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, transparent); }
.planitem.cut .plantext { text-decoration: line-through; opacity: .5; } .planitem.sent { border-color: color-mix(in srgb, #5f9a72 55%, var(--line)); }
.planitem.dragging { position: relative; z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.planmain { flex: 1; min-width: 0; display: grid; gap: 6px; }
.planline, .plandet { display: flex; gap: 6px; } .planline input, .plandet input { margin: 0; min-width: 0; }
.plantext { flex: 1; font-weight: 600; } .planline input[type=time] { width: 7.5em; flex: none; }
.plandet input { flex: 1; font-size: 13px; padding: 5px 8px; }
.plancut { width: auto; margin: 0; min-height: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 12px; cursor: pointer; white-space: nowrap; }
.planadd { margin: 6px 0 0; width: 100%; }
@media (max-width: 600px) { .planline, .plandet { flex-wrap: wrap; } .plancard { max-height: 94vh; } }
/* Plans page (v238) */
.plansview { display: block !important; }
.planlabel { font: 600 13px "Plus Jakarta Sans", sans-serif; color: var(--ink-soft); margin-right: 4px; }
.plangrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.plancardbtn { display: grid; gap: 4px; text-align: left; width: auto; margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface, transparent); color: var(--ink); cursor: pointer; }
.plancardbtn b { font: 600 17px Newsreader, Georgia, serif; } .plancardbtn span { font-size: 13px; color: var(--ink-soft); }
.plantop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.planname { flex: 1; min-width: 180px; margin: 0; font: 600 20px Newsreader, Georgia, serif; }
.plansview .plandays { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; overflow: visible; }
.plansview .planday { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface, transparent); }
.plandet { flex-wrap: wrap; } .plandet select { flex: 1 1 140px; margin: 0; font-size: 13px; padding: 5px 8px; min-width: 0; }
.planopen { justify-self: start; font-size: 13px; }
.planaddrow { display: flex; gap: 6px; margin-top: 8px; } .planaddrow .planadd { margin: 0; flex: 1; } .planaddbtn { width: auto; margin: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.planfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; } .planfoot .primary { width: auto; margin: 0; }
/* v238 */
.gvoff { display: none !important; }
#goalsTabs { margin-bottom: 16px; }
/* a finished book wears a small gold ribbon at its corner */
.covertile.done, .shelfcell .cover.done, .cover.done { position: relative; }
.cover.done::after, .covertile.done::after { content: ''; position: absolute; top: 0; right: 10%; width: 14px; height: 22px; background: linear-gradient(#d9a441, #c8913a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); box-shadow: 0 1px 2px rgba(0,0,0,.2); pointer-events: none; }
.plansview .planday { min-width: 0; }
.planitem, .planmain, .planline, .plandet { min-width: 0; }
.planline .plantext { width: 100%; min-width: 0; }
.plandet input { width: 100%; flex: 1 1 120px; }
.plancut { flex: none; }
.plansview .plandays { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.plandet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
.plandet input, .plandet select { width: 100% !important; min-width: 0 !important; flex: none !important; }
.plandet select:last-child { grid-column: 1 / -1; }
@media (max-width: 480px) { .plandet { grid-template-columns: 1fr; } }
/* v239: a calmer clock; no box behind the Today view */
#dayClock .dctick:not(.big) { display: none !important; }
#dayClock .dcs, #dayClock .dcpart { display: none !important; }
#dayClock .dctick.big { opacity: .35 !important; }
#dayClock .dcnum { opacity: .55; }
#dayClock .dclock > *, #dayClock .dclockleft, #dayClock .dcfacewrap { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#dayClock .dcfaces { margin: 14px 0 0; }
#dayClock.dcfull .dcfaces { position: static; }
/* preview: a small bar that never sits on top of things */
.tutorbar { max-width: min(440px, calc(100vw - 24px)) !important; font-size: 12px !important; padding: 5px 5px 5px 12px !important; }
body:has(#tutorbar:not(.hidden)) .wrap { padding-bottom: 96px !important; }
/* the note under a highlight: a quiet line to write on */
:root:root:root:root:root .hlview .hlviewnoteedit, .hlviewnoteedit { background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important; border-radius: 0 !important; min-height: 44px !important; padding: 6px 2px !important; resize: none; box-shadow: none !important; }
/* desk: Put back is small and shows only on hover */
.dputback { font-size: 10.5px !important; padding: 3px 8px !important; bottom: 6px !important; opacity: .0; transition: opacity .15s; }
@media (hover: hover) { .ditem:hover .dputback, .dputback:focus { opacity: 1; } }
@media (hover: none) { .dputback { opacity: .75; } }
/* Planner day view: every plan in its own color */
.dayview .dayitem { border-left: 4px solid var(--ic, #8fb4bf) !important; background: color-mix(in srgb, var(--ic, #8fb4bf) 13%, var(--surface, transparent)) !important; }
.dayview .dayitem .db b { color: var(--ink); }
.dayview .dayitem .dt { color: color-mix(in srgb, var(--ic, #8fb4bf) 70%, var(--ink)); }
/* today in the week is marked in teal, never red */
.day-col.today { box-shadow: 0 0 0 2px color-mix(in srgb, #3f6f7a 55%, transparent) !important; }
.wkcol.today { background: color-mix(in srgb, #3f6f7a 6%, transparent) !important; }
.wkday.rest, .day-col.rest { background-image: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, #9dbba8 16%, transparent) 8px 9px) !important; }
:root #week.dayview .dayitem { background: color-mix(in srgb, var(--ic, #8fb4bf) 16%, var(--surface, #2f383b)) !important; border-left: 4px solid var(--ic, #8fb4bf) !important; }
:root #week.dayview .dayitem .dt { color: color-mix(in srgb, var(--ic, #8fb4bf) 75%, var(--ink)) !important; }
/* v240: no card around the clock; Morning and Afternoon come back */

#dayClock .dcpart { display: inline !important; }
#dayClock.dcfull { background: var(--dcbg, var(--bg)) !important; }
/* Planner day view: a straight line for color, never a curve */
:root #week.dayview .dayitem { border-left: 0 !important; position: relative; padding-left: 18px !important; }
:root #week.dayview .dayitem::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 0; background: var(--ic, #8fb4bf); }
/* desk: Put back and the percent only while the pointer rests on the book */
.ditem.d-book .dpct { opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .ditem.d-book:hover .dpct { opacity: 1; } }
/* rest day chooser */
.restcard { width: min(560px, 100%); }
.restlist { display: grid; gap: 8px; max-height: 55vh; overflow: auto; margin: 6px 0; }
.restrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.restlab { display: grid; gap: 2px; min-width: 0; } .restlab small { color: var(--ink-soft); font-size: 12px; }
.restseg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.restseg button { width: auto; margin: 0; min-height: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.restseg button[aria-pressed="true"] { background: #3f6f7a; border-color: #3f6f7a; color: #fff; }
.restseg input { width: auto; margin: 0; padding: 4px 8px; }
/* the full note on a highlight */
.hlnotecard { width: min(640px, 100%); }
.hlnoteq { margin: 0 0 6px; font: 20px/1.5 Newsreader, Georgia, serif; border-left: 0; padding: 0; }
.hlnotebook { margin: 0 0 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.hlnotebig { width: 100%; min-height: 40vh; margin: 0; border: 0 !important; background: transparent !important; font: 17px/1.7 Newsreader, Georgia, serif; resize: vertical; outline: none; box-shadow: none !important; }
.hlnotewc { margin-right: auto; color: var(--ink-soft); }
.hlnoteexp { font-size: 13px; margin-top: 4px; }
/* v241: the clock keeps its card; the shadow around the face goes */
#dayClock .dcface { filter: none !important; }
/* List on the desk itself */
#deskOuter { position: relative; }
.deskonbtn { position: absolute; top: 12px; right: 12px; z-index: 6; width: auto; margin: 0; min-height: 0; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(20,22,24,.45); color: #fff; font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; backdrop-filter: blur(4px); }
/* screenplay scene list */
.scenelist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.scenelist small { font: 600 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.scenelist button { width: auto; margin: 0; min-height: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 12px "Courier Prime", "Courier New", monospace; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v242 */
.hlnoteexp { width: auto !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--c-blue, #3f6f7a) !important; font: 600 13px "Plus Jakarta Sans", sans-serif !important; cursor: pointer; }
:root:root:root:root:root .hlview .hlviewnoteedit, .hlviewnoteedit { min-height: 120px !important; }
/* the Today clock: a little smaller on the page, larger in full screen */

#dayClock.dcfull .dclockface { max-height: calc(100vh - 90px) !important; max-width: 62vw !important; }
.sptp { margin: 0 0 10px; font-size: 13px; } .sptp summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.sptp label { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--ink-soft); } .sptp input { flex: 1; margin: 0; padding: 5px 8px; }
.spsugg { position: absolute; z-index: 20; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.spsugg button { width: auto; margin: 0; min-height: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 13px "Courier Prime", "Courier New", monospace; cursor: pointer; }
.uprow { grid-template-columns: auto 120px minmax(0, 1fr) !important; } .uprow select { margin: 0; padding: 4px 6px; font-size: 13px; }
.dlfmt { margin: 10px 0 0; }
/* v243 */
/* Today: the clock takes the room, the day list is quieter and smaller */
@media (min-width: 900px) { #dayClock:not(.dcfull) .dclock { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr) !important; } #dayClock:not(.dcfull) .dclockface { max-height: calc(100vh - 220px) !important; } }
#dayClock:not(.dcfull) .dcrow, #dayClock:not(.dcfull) .dclist li, #dayClock:not(.dcfull) .dcitemrow { font-size: 14px !important; }
#dayClock:not(.dcfull) .dclockright { font-size: 14px; }
/* light mode: the chosen tab keeps readable text */
:root:not([data-theme="dark"]) .shelftabs button[aria-selected="true"], :root:not([data-theme="dark"]) .unit button[aria-selected="true"] { color: #2f383b !important; background: #ffffff !important; }
/* light mode day view: soft ink, not black */
:root:not([data-theme="dark"]) #week.dayview .dayitem .db b { color: #4a4541 !important; font-weight: 600; }
:root:not([data-theme="dark"]) #week.dayview .dayitem { color: #5a5550; }
/* Write header: Upload and Download match; + Highlight note sits with the kinds */
#wsUpload, #wsAllWord { background: none !important; border: 0 !important; padding: 0 !important; color: var(--c-blue, #3f6f7a) !important; font: 600 14px "Plus Jakarta Sans", sans-serif; }
#wsUpload { margin-right: 14px; }
.wshlchip { color: #d9a441 !important; }
/* Goals: the two buttons together */
.goalbtns { display: inline-flex; gap: 8px; margin-left: auto; }
/* scheduling: the opened day in blue, added days in ochre */
.scheddays button.extra, .scheddays button[aria-pressed="true"]:not(.me) { background: #d9a441 !important; border-color: #d9a441 !important; color: #fff !important; }
.scheddays button.me { background: #6f9aa6 !important; color: #fff !important; }
/* week grid: centered, with arrows beside it */
.wkgutter { width: 44px !important; min-width: 44px !important; }
body.wksides #week { position: relative; padding-left: 40px !important; padding-right: 40px !important; }
body.wksides #calPrev, body.wksides #calNext { visibility: hidden; }
.wkside { position: absolute; top: 140px; z-index: 6; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wkside.prev { left: 0; } .wkside.next { right: 0; }
.wkside svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Groups: All groups on the left, easy to find */
.clubtop { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px; }
#clubBack { font-size: 15px !important; padding: 8px 16px !important; }
.nearyou { margin-top: 16px; } .nearrow input { width: 100%; margin: 0 0 10px; }
.nearlinks { display: flex; flex-wrap: wrap; gap: 8px; } .nearlinks a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
/* writer sheets */
.verrow { grid-template-columns: minmax(0, 1fr) auto !important; }
.findcase { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); margin: 6px 0; } .findcase input { width: auto; margin: 0; }
.targetrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; } .targetrow input { width: 8em; margin: 0; }
.targetprog p { margin: 10px 0 4px; font-size: 14px; } .tbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .tbar i { display: block; height: 100%; background: #5f9a72; }
.comq { font: italic 15px Newsreader, Georgia, serif; color: var(--ink-soft); } .comin { width: 100%; min-height: 70px; margin: 0 0 8px; }
.comlist { display: grid; gap: 8px; margin-top: 12px; max-height: 40vh; overflow: auto; } .comrow { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; } .comrow small { color: var(--ink-soft); font-style: italic; } .comrow p { margin: 4px 0; } .comrow.done { opacity: .5; }
.binderrow .dlrow { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.dlfmt { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); } .dlfmt select { width: auto; margin: 0; }
.clockshadow, .clockghost, [class*='clockghost'] { pointer-events: none !important; }
.pqitem { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; margin: 4px 0; }
.planaddrow input[type=time] { width: 7.5em; flex: none; margin: 0; }
.pqmore { margin: 8px 0 0; text-align: right; } .dccount { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; color: var(--ink-soft); } .dccount select { width: auto; margin: 0; }
/* the wall: a plaster wall with framed pieces */
.wallboard { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 60%), #ece6dc; padding: 22px !important; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
:root[data-theme="dark"] .wallboard { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.05), transparent 60%), #2a2724; }
.wallcard.framed { background: #fbf8f2; color: #3f3a35; border: 10px solid #6b4f3a; outline: 1px solid rgba(0,0,0,.15); outline-offset: -4px; box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 0 0 8px #f3ede3; padding: 18px !important; max-width: 240px; cursor: zoom-in; border-radius: 2px; }
.wallcard.framed.wk-quote { border-color: #2f383b; font-family: Newsreader, Georgia, serif; }
.wallcard.framed.wk-note { border-color: #c9b28e; } .wallcard.framed.wk-todo { border-color: #8a9a86; } .wallcard.framed.wk-piece { border-color: #3f6f7a; }
.wallcard.framed.wk-book { border-color: #1f1c1a; text-align: center; }
.wallcover { margin: 0 auto 8px; }
.wallzoom { display: grid; place-items: center; cursor: zoom-out; } .wallcard.zoomed { max-width: min(520px, 90vw); transform: none; font-size: 17px; }
.selsearch { display: block; width: 100%; margin: 0 0 6px !important; }
/* v245 */
/* the Today list: tighter and the same size on the page and in full screen */
#dayClock .dclockright, #dayClock .dcside { font-size: 13.5px !important; }
#dayClock .dcside li, #dayClock .dcrow, #dayClock [class*="dcitemrow"] { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 0 !important; }
/* light themes (like Mist): the chosen tab stays readable */
:root[data-light] .shelftabs button[aria-selected="true"], :root[data-light] .unit button[aria-selected="true"], :root:not([data-theme="dark"]) .unit button[aria-selected="true"] { color: #2f383b !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
:root[data-light] .shelftabs button[aria-selected="true"] *, :root[data-light] .unit button[aria-selected="true"] * { color: #2f383b !important; }
/* the Today list is tighter */
#dayClock .dclockside { font-size: 13.5px !important; } #dayClock .dcrow { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; } #dayClock.dcfull .dclockside { font-size: 13.5px !important; }
/* attachments */
.attrow, .planhand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .planhand { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; } .planhand small { font-weight: 600; color: var(--ink-soft); margin-right: 6px; }
.attchips { display: flex; flex-wrap: wrap; gap: 6px; } .attchip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
.attopen { width: auto; margin: 0; padding: 0; min-height: 0; border: 0; background: none; color: var(--c-blue, #3f6f7a); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.attx { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.attlist { max-height: 50vh; }
/* how a group runs */
.govcard .govline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; } .govline span { color: var(--ink-soft); font-size: 14px; } .govline input, .govline select { width: auto; min-width: 180px; margin: 0; }
.govlist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; } .govlist > small { width: 100%; font-weight: 600; color: var(--ink-soft); } .govlist > input { flex: 1 1 200px; margin: 0; }
.govlead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .govlead input { flex: 1 1 120px; margin: 0; } .govlead input[type=date] { flex: 0 0 auto; }
.govdue { width: 100%; color: #c8765a; } .govsplit { width: auto !important; margin: 0 !important; }
/* v246 */
#calPlan { display: none !important; }
.lookback { display: none !important; }
.reviewbtn { margin-left: 8px; }
.plansec { margin: 20px 0 6px; font: 600 15px Newsreader, Georgia, serif; }
.wsupdown { display: inline-flex; gap: 14px; margin-left: auto; }
#dayClock .dclockside { font-size: 12.5px !important; } #dayClock .dclockside .dcrow { font-size: 13px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
#dayClock .dclockside .dct { font-size: 12px !important; }
#dayClock.dcfull .dclockside, #dayClock.dcfull .dclockside .dcrow, #dayClock.dcfull .dclockside * { color: var(--ink) !important; }
:root:not([data-theme="dark"]) [role="tablist"] [aria-selected="true"], :root[data-light] [role="tablist"] [aria-selected="true"], :root:not([data-theme="dark"]) #clockTabs button[aria-selected="true"], :root[data-light] #clockTabs button[aria-selected="true"] { color: #2f383b !important; background: #ffffff !important; -webkit-text-fill-color: #2f383b; }
.colordot, .dcfaces button { box-shadow: inset 0 0 0 1px rgba(0,0,0,.22) !important; }
#picker .pickdoc { border-left: 1px solid var(--line) !important; position: relative; padding-left: 20px !important; }
#picker .pickdoc::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 3px; background: #d9a441; }
.pagedlist { display: grid; gap: 4px; margin: 8px 0; } .pagedrow { width: 100%; margin: 0; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 14px; } .pagedrow.on { border-color: #3f6f7a; }
.pagednav { display: flex; align-items: center; justify-content: center; gap: 12px; } .pagednav button { width: auto; margin: 0; }
.wallexcerpt { font-size: 13px; line-height: 1.5; max-height: 9.5em; overflow: hidden; }
.govdet summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; } .govcard { padding-top: 10px !important; padding-bottom: 10px !important; }
/* v247: Plans = ideas, buckets, groups */
.ideaadd { display: flex; gap: 8px; margin: 0 0 10px; } .ideaadd input { flex: 1; margin: 0; font-size: 16px; } .ideaadd .primary { width: auto; margin: 0; }
.idealist { display: grid; gap: 6px; margin: 10px 0; }
.idearow { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface, transparent); } .idearow.sent { border-color: color-mix(in srgb, #5f9a72 50%, var(--line)); }
.ideatop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ideatop input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.ideat { flex: 1 1 200px; margin: 0; border: 0 !important; background: transparent !important; font-weight: 600; font-size: 15px; }
.ideatop input[type=date], .ideatop input[type=time] { width: auto; margin: 0; padding: 4px 6px; font-size: 13px; }
.ideasend { width: auto; margin: 0; padding: 5px 12px; border-radius: 999px; border: 0; background: #c8765a; color: #fff; font: 600 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; } .idearow.sent .ideasend { background: #5f9a72; }
.ideamore { width: auto; margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.ideadet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .ideadet > input, .ideadet > select { margin: 0; font-size: 13px; padding: 5px 8px; min-width: 0; }
.ideadet .ideatimes, .ideadet .attrow, .ideadet > .linkbtn, .ideadet .ideadel { grid-column: 1 / -1; } .ideawhen { display: flex; gap: 6px; margin: 3px 0; } .ideawhen input { margin: 0; font-size: 13px; padding: 4px 6px; min-width: 0; } .ideawhen input[type=text] { flex: 1; }
.ideadel { color: #c8765a !important; justify-self: start; }
.ideabar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.18); } .ideabar button, .ideabar select { width: auto; margin: 0; }
.igroup { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; background: var(--surface, transparent); } .igroup.nested { margin: 4px 0; padding: 8px; }
.igrouphead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .igname { flex: 1 1 180px; margin: 0; font: 600 16px Newsreader, Georgia, serif; } .igrouphead select { width: auto; margin: 0; font-size: 13px; }
.igstart { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--ink-soft); } .igstart input { width: auto; margin: 0; } .iglen { font-weight: 600; }
.igitems { display: grid; gap: 4px; margin: 8px 0; } .igstep { display: flex; align-items: flex-start; gap: 6px; } .igbody { flex: 1; min-width: 0; } .igdur { width: 4.5em; margin: 0; padding: 4px 6px; font-size: 13px; } .igstep small { align-self: center; color: var(--ink-soft); font-size: 12px; }
.mode-stack .dlnum { min-width: 62px; text-align: left; font-size: 12px; }
.igplus { justify-self: center; width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 1px dashed var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.igfoot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; } .igfoot .linkbtn { margin-right: auto; } .igfoot button { width: auto; margin: 0; }
.ignest { font-size: 12px !important; }
/* wall: 5 lines in the frame, the full piece when tapped */
.wallexcerpt { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; max-height: none !important; white-space: pre-line; }
.wallread { width: min(640px, 100%) !important; max-height: 88vh; overflow: auto; } .wallreadbody { white-space: pre-wrap; font: 17px/1.7 Newsreader, Georgia, serif; margin-top: 10px; } .wallreadk { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.wsallh { margin: 18px 0 8px; font: 600 17px Newsreader, Georgia, serif; }
/* v248 */
.ideasta { width: 100%; min-height: 160px; margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.ideaweek { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 8px 0; } .ideaweek > small { width: 100%; color: var(--ink-soft); font-weight: 600; }
.ideawd { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .ideawd button { width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } .ideawd.on button { background: #6f9aa6; color: #fff; border-color: #6f9aa6; }
.ideawd input { width: 7.2em; margin: 0; padding: 3px 5px; font-size: 12px; }
.dsatt { margin-top: 6px; }
.wsdrive { margin: 6px 0 14px; } .drivetools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .drivetools input { flex: 1 1 220px; margin: 0; } .drivetools select { width: auto; margin: 0; }
.driveact { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; background: color-mix(in srgb, #3f6f7a 10%, transparent); font-size: 14px; }
.drivelist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.driverow { display: grid; grid-template-columns: 24px minmax(0, 1fr) 100px 90px 110px; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 14px; } .driverow:first-child { border-top: 0; } .driverow.on { background: color-mix(in srgb, #3f6f7a 8%, transparent); }
.driverow input { width: 16px; height: 16px; margin: 0; } .drivetitle { width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: 500 14px Newsreader, Georgia, serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drivekind { font-size: 12px; color: var(--k, var(--ink-soft)); } .drivewords, .drivedate { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 600px) { .driverow { grid-template-columns: 24px minmax(0, 1fr) 80px; } .drivewords, .drivedate { display: none; } }
/* v249: Learn and Goals are set aside for now */
#nav-goals, #nav-speed, #tabGoals, #tabSpeed, label:has(> #tabGoals), label:has(> #tabSpeed) { display: none !important; }

/* ---------- phone fixes (v250) ---------- */
@media (max-width: 640px) {
  .inner { padding-top: 4px !important; }
  .wordmark { margin-top: 2px !important; }
  .colorpop.tucked { width: 40px !important; height: 40px !important; }
  .clubtabs { display: flex !important; overflow-x: auto; gap: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .clubtabs::-webkit-scrollbar { display: none; }
  .clubtabs button { flex: none !important; overflow: visible; text-overflow: clip; padding: 8px 12px; }
  .ovcard.plancard { min-height: 0 !important; }
  .ovcard.plancard:empty, .listscard:has(.listgrid2:empty) { display: none; }
  .selpop { max-width: calc(100vw - 16px); left: 8px; right: 8px; transform: none; box-sizing: border-box; }
  .selpop .seltop, .selpop .selrow, .selpop .selcolors { flex-wrap: wrap; }
  .dclockface { width: 100% !important; height: auto !important; max-height: none !important; }
  #dayClock.dcfull { padding: 12px !important; }
  #dayClock.dcfull .dclock { grid-template-columns: 1fr !important; }
}
.libmarq { pointer-events: none; }
@media (pointer: coarse) { .libmarq { display: none !important; } }
.lookupbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .lookupbox a, .lookupbox button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: var(--field); color: var(--ink); border: 1px solid var(--line); text-decoration: none; } .lookupbox button { background: var(--action, #c8765a); color: #fff; border: 0; }

/* ---------- phone fixes (v251) ---------- */
.readfoot { grid-template-columns: minmax(0, 1fr) !important; } .readfoot > * { min-width: 0; max-width: 100%; }
.rdplace #rdPlaceText[hidden] { display: none; }
.shelfhero .cover { aspect-ratio: 2 / 3; height: auto !important; } .shelfhero .cover img { width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 640px) {
  .bpbody { grid-template-columns: minmax(0, 1fr) !important; }
  .bpbody > * { min-width: 0; max-width: 100%; }
  .bpform { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bpform input, .bpform select { width: 100% !important; min-width: 0; box-sizing: border-box; }
}
#bookPace { grid-template-columns: minmax(0, 1fr) !important; } #bookPace > * { min-width: 0; max-width: 100%; }
.readfoot .rdswline { max-width: 100%; box-sizing: border-box; overflow: hidden; } .readfoot .rdswmore { margin-right: 2px; }

.rdsit { display: block; margin-top: 2px; font-size: 12.5px; color: var(--rink, var(--ink)); opacity: .75; } .rdsit[hidden] { display: none; }
.rdfocus { position: absolute; inset: 0; z-index: 120; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px)); cursor: pointer; }
.rdfocustext { max-width: 640px; font: 400 clamp(22px, 5.2vw, 30px)/1.6 Georgia, serif; }
.rdfocustext span { transition: background .25s, color .25s; border-radius: 4px; padding: 0 1px; opacity: .55; } .rdfocustext span.read { opacity: 1; } .rdfocustext span.now { opacity: 1; background: rgba(233, 162, 59, .32); }
.rdfocusbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rdfocusbar button { font: 600 13.5px "Plus Jakarta Sans", sans-serif; padding: 9px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; opacity: .75; cursor: pointer; } .rdfocusbar button.on { opacity: 1; background: rgba(233, 162, 59, .25); }

/* ---------- v252 ---------- */
@media (max-width: 800px) {
  #dayClock.dcfull { display: flex !important; flex-direction: column; padding: 60px 14px 20px !important; }
  #dayClock.dcfull .dclock { display: flex !important; flex-direction: column; height: auto !important; gap: 14px; }
  #dayClock.dcfull .dclockleft { width: 100% !important; height: auto !important; flex-direction: column; }
  #dayClock.dcfull .dcfacewrap { width: 100% !important; height: auto !important; justify-content: center; flex: none; }
  #dayClock.dcfull .dclockface { width: min(88vw, 64vh) !important; max-width: none !important; height: auto !important; max-height: none !important; flex: none; }
  #dayClock.dcfull .dcdock { position: absolute; left: 14px !important; right: auto !important; top: 12px !important; max-width: calc(100% - 80px); display: flex; flex-wrap: wrap; gap: 6px; }
}
body.dcfullon .colorpop.tucked { display: none !important; }
.hlthread { margin: 8px 0 4px; display: grid; gap: 4px; } .hlthread p { margin: 0; font-size: 14px; } .hlthread input { margin-top: 4px; }
.remindrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .remindrow select { width: auto; }
.tutorbar, #tutorFloat { max-width: min(560px, calc(100vw - 24px)); }

.nowback { margin-top: 16px; } .nowbackhead { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.nowbackrow { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .nowbackrow::-webkit-scrollbar { display: none; }
.nowbackitem { display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-soft); font: 600 12px "Plus Jakarta Sans", sans-serif; }
.cover { cursor: pointer; }

.rdbreathe { position: absolute; inset: 0; z-index: 120; display: grid; grid-template-rows: 1fr auto auto; place-items: center; padding: 30px 20px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
.rdorb { width: min(56vw, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(233,162,59,.55), rgba(92,143,154,.25) 62%, transparent 70%); }
.rdbsay { margin: 0; font: 400 24px Georgia, serif; } .rdbctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rdbctl select { width: auto; } .rdbctl button { font: 600 14px "Plus Jakarta Sans", sans-serif; padding: 9px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.calmbig { width: 100%; padding: 14px; border-radius: 14px; border: 0; background: var(--rline); color: var(--rink); font: 600 16px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.calmhead { margin: 14px 0 8px; font-size: 13px; font-weight: 600; opacity: .75; } .calmgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .calmgrid button { padding: 10px 6px; border-radius: 12px; border: 1px solid var(--rline); background: none; color: var(--rink); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; } .calmgrid button.on { background: var(--rline); }

/* ---------- v253: phone header and bottom bar ---------- */
/* the color wheel lives in the bottom bar as its own tab; minimizing the picker returns it there */

@media (max-width: 700px) {
  .inner { padding-top: 10px !important; } header, .hero, .top { padding-top: 0 !important; margin-top: 0 !important; }
  #nav, :root[data-look="reader"] #nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 !important;
    display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; grid-template-columns: none !important; align-items: center !important; justify-items: center !important;
    padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important; gap: 0 !important; }
  #nav > * { min-width: 0 !important; width: 100% !important; margin: 0 !important; justify-self: stretch !important; }
  #nav .navcolors { display: grid !important; place-items: center; }
  #nav .navcolors::before { content: ''; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#5c8f9a, #9dbba8, #d9a441, #c8765a, #8e7aa6, #5c8f9a); }
}
:root[data-look="reader"] #nav #navColors, body.colorball #nav #navColors { display: grid !important; place-items: center; }
#navColors::before { content: ''; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#5c8f9a, #9dbba8, #d9a441, #c8765a, #8e7aa6, #5c8f9a); }
#navColors > * { display: none !important; }

/* v254: the wheel lives in the bottom bar; minimized it floats until closed; the old top ball is gone; buttons tuck top right so the title sits high */
.phonecolors { display: none !important; }
@media (max-width: 700px) {
  .topbtns { position: absolute !important; top: calc(8px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; margin: 0 !important; z-index: 5; }
  .inner { padding-top: 12px !important; }
  .wordmark { margin-top: 44px !important; }
}

/* v255: one color wheel, ever. It sits in the bar with its label beside it like every tab; minimized it leaves the bar and floats; closed it returns */
.deskchip.deskwheel { display: none !important; }
#nav #navColors, :root[data-look="reader"] #nav #navColors, body.colorball #nav #navColors { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; place-items: initial; }
#navColors::before { flex: none; width: 24px; height: 24px; }
body:has(.colorpop.tucked) #nav #navColors { display: none !important; }
html { scrollbar-gutter: stable; }
@media (max-width: 700px) {
  #nav #navColors, :root[data-look="reader"] #nav #navColors { flex-direction: column; justify-content: center; gap: 4px; }
}
@media (max-width: 700px) { body.pg-cal .wrap { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; } }

/* Columbus events (Community tab) */
.cbus { margin-top: 16px; }
.cbusnote { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
.cbusbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cbusbar input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.cbusbar select { flex: 0 1 200px; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.cbuschips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cbuschips .deskchip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cbuscount { display: block; color: var(--ink-faint); font-size: 12.5px; margin: 4px 0 8px; }
.cbuslist { display: flex; flex-direction: column; }
.cbusday { margin: 14px 0 4px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 18px; color: var(--ink); }
.cbusev { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cbustxt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cbusadd { flex: 0 0 auto; font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.cbusadd[aria-pressed="true"] { background: var(--c-sage, #7fae8e); color: #fff; border-color: transparent; }
.cbuswhen { color: var(--c-sage); font-size: 12.5px; font-weight: 600; }
.cbusname { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.cbusname:hover { text-decoration: underline; }
.cbuswhere { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.cbusmore { margin-top: 10px; align-self: flex-start; }
.cbusmore.hidden { display: none; }
.cbusbad { display: block; min-height: 1.2em; margin-top: 6px; color: var(--c-rose, #b4533c); font-size: 13px; }

/* v256: phone header and bottom bar */
@media (max-width: 700px) {
  /* the logo sits at the top of the page, with Back up and undo on the same line at the right */
  .wrap { padding-top: 0 !important; }
  header { position: relative !important; padding-top: 0 !important; margin-top: 0 !important; }
  header .topbtns, .topbtns { position: absolute !important; top: 26px !important; right: 12px !important; left: auto !important; margin: 0 !important; align-self: auto !important; z-index: 5 !important; }
  .wordmark { margin-top: 0 !important; }
  /* the color wheel and Settings are tabs like the rest: a small icon with its name under it */
  #nav #navColors, :root[data-look="reader"] #nav #navColors { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important; font-size: 10px !important; }
  #nav #navColors::before { width: 22px !important; height: 22px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  #nav #navColors, :root[data-look="reader"] #nav #navColors { height: auto !important; align-self: stretch !important; overflow: visible !important; }
  #nav #navColors::after, :root[data-look="reader"] #nav #navColors::after { content: 'Colors' !important; display: block !important; position: static !important; font-size: 10px !important; line-height: 1.2; color: inherit; background: none !important; width: auto !important; height: auto !important; }
  #nav #nav-settings { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important; font-size: 10px !important; }
  #nav #nav-settings .navlabel { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 !important; display: block !important; font-style: normal; font-size: 10px; line-height: 1.2; color: inherit; }
  /* Groups is only highlighted when it is the page you are on */
  :root[data-look="reader"] #nav #nav-club:not([aria-current="true"]), :root[data-look="reader"][data-theme="dark"] .nav #nav-club:not([aria-current="true"]) { color: var(--ink-faint) !important; font-weight: 500 !important; }
  /* nothing hides behind the floating Preview button */
  body:has(.floatbar:not(.hidden)) .wrap { padding-bottom: 170px !important; }
}
@media (max-width: 400px) { header .topbtns, .topbtns { transform: scale(.88); transform-origin: right center; } .wordmark { transform: scale(.86); transform-origin: left center; } }

/* v257: nothing to count, sort or share until the first book is added */
body.nobooks #allsum, body.nobooks #view-grid .sortbar, body.nobooks #shareHead, body.nobooks #shareGrid { display: none; }
.daynote { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.daynote span { color: var(--ink-faint); font-size: 13px; font-weight: 600; }
.daynote input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
/* v258: on touch screens the book frame lets touches through to the reader, which selects and turns pages itself */
.bc-touch #readerView iframe { pointer-events: none !important; }