/* Notes is a small writing desk: one manuscript sheet, a brass clock, and a pinboard. */
body[data-page="calendar"] .app-shell {
  background: radial-gradient(ellipse 75% 36% at 50% 7%, #fff8e8 0%, transparent 100%),
    linear-gradient(120deg, #e9d9bd, #f3e9d4 42%, #e7d6b8);
}
body[data-page="calendar"] .app-shell::before,
body[data-page="calendar"] .app-shell::after { display: none; }
body[data-page="calendar"] .main-content {
  min-width: 0;
  padding: clamp(26px, 5vw, 62px) 16px 70px;
}
body[data-page="calendar"] .page-container {
  max-width: 850px;
  padding: clamp(22px, 4vw, 52px);
  border: 1px solid #cbb38a;
  border-radius: 8px 28px 8px 28px;
  background: linear-gradient(150deg, rgba(255,253,246,.98), rgba(250,242,224,.98));
  box-shadow: 0 24px 70px rgba(92,62,29,.14), inset 0 0 0 6px rgba(255,255,255,.3);
}
body[data-page="calendar"] .page-container::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(167,124,66,.25);
  border-radius: 3px 20px 3px 20px;
  pointer-events: none;
}
body[data-page="calendar"] .page-header {
  margin-bottom: 25px;
  padding-bottom: 22px;
  border-bottom: 1px solid #dac5a3;
  text-align: center;
}
body[data-page="calendar"] .notes-eyebrow,
body[data-page="calendar"] .notes-section-kicker,
body[data-page="calendar"] .clock-kicker {
  display: block;
  color: #85623a;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
}
body[data-page="calendar"] .page-title { justify-content: center; gap: 9px; margin: 9px 0 3px; color: #513621; }
body[data-page="calendar"] .page-title img { width: 54px; height: 54px; }
body[data-page="calendar"] .page-intro { max-width: none; margin: 0; color: #705b49; font-family: var(--font-display); font-size: 16px; }

body[data-page="calendar"] .clock-card {
  position: relative;
  margin: 0 0 40px;
  padding: 26px 30px 0;
  overflow: hidden;
  border: 1px solid #c6a977;
  border-radius: 20px 5px 20px 5px;
  background: radial-gradient(circle at 12% 20%, rgba(255,250,229,.95), transparent 55%), #f4e8ce;
  background-image: radial-gradient(circle at 12% 20%, rgba(255,250,229,.95), transparent 55%);
  box-shadow: 0 9px 22px rgba(99,65,31,.1), inset 0 0 0 5px rgba(255,251,238,.52);
  text-align: left;
}
body[data-page="calendar"] .clock-card::after { content: none; }
html body[data-page="calendar"] .app-shell .clock-card { background-image: radial-gradient(circle at 12% 20%, rgba(255,250,229,.95), transparent 55%); }
body[data-page="calendar"] .clock-layout { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 55px); }
body[data-page="calendar"] .notes-clock {
  position: relative;
  flex: 0 0 146px;
  width: 146px;
  height: 146px;
  border: 8px solid #a77a42;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 65%, #e8d6b5 100%);
  box-shadow: 0 0 0 2px #ead4a9, 0 8px 14px rgba(87,54,24,.2), inset 0 0 0 2px #d3b98a, inset 0 0 0 6px #fff8e8;
}
body[data-page="calendar"] .notes-clock::before {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(123,88,49,.26);
  border-radius: 50%;
}
body[data-page="calendar"] .clock-roman { position: absolute; z-index: 1; color: #594029; font: 600 11px/1 var(--font-display); }
body[data-page="calendar"] .clock-xii { top: 17px; left: 50%; transform: translateX(-50%); }
body[data-page="calendar"] .clock-iii { right: 15px; top: 50%; transform: translateY(-50%); }
body[data-page="calendar"] .clock-vi { bottom: 16px; left: 50%; transform: translateX(-50%); }
body[data-page="calendar"] .clock-ix { left: 15px; top: 50%; transform: translateY(-50%); }
body[data-page="calendar"] .clock-hand {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2px);
  width: 4px;
  border-radius: 5px;
  background: #5e3b23;
  transform-origin: 50% 100%;
}
body[data-page="calendar"] .clock-hour { height: 34px; }
body[data-page="calendar"] .clock-minute { height: 47px; width: 3px; left: calc(50% - 1.5px); }
body[data-page="calendar"] .clock-second { height: 53px; width: 1px; left: calc(50% - .5px); background: #a75437; }
body[data-page="calendar"] .clock-pin { position: absolute; z-index: 2; top: calc(50% - 5px); left: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #fff5dc; border-radius: 50%; background: #9b5c30; }
body[data-page="calendar"] .clock-copy { min-width: 0; }
body[data-page="calendar"] .clock-time { display: block; margin: 6px 0 1px; color: #50351f; font: 500 clamp(45px, 8vw, 71px)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: lining-nums tabular-nums; }
body[data-page="calendar"] .clock-date { margin: 0; color: #6c5743; font-size: 14px; }
body[data-page="calendar"] .clock-foot { display: flex; align-items: center; gap: 8px; margin-top: 23px; padding: 13px 0; border-top: 1px solid rgba(155,113,64,.32); color: #7b6146; font: italic 14px var(--font-display); }
body[data-page="calendar"] .clock-foot-leaf { color: #a67b45; font-size: 16px; }
body[data-page="calendar"] .self-wake-badge { margin-left: auto; padding: 5px 0 5px 9px; border: 0; background: transparent; color: #784c2d; font: 600 12px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body[data-page="calendar"] .self-wake-badge:hover { color: #a65e35; }
body[data-page="calendar"] .self-wake-note { margin: 0 -30px; padding: 14px 30px 18px; border-top: 1px solid rgba(155,113,64,.25); background: rgba(255,249,230,.7); color: #624a37; font-size: 13px; line-height: 1.65; }
body[data-page="calendar"] .self-wake-note[hidden] { display: none; }

body[data-page="calendar"] .sticky-section { margin: 0; }
body[data-page="calendar"] .notes-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
body[data-page="calendar"] .sticky-section h2 { margin: 5px 0 0; color: #543823; font-size: 25px; }
body[data-page="calendar"] #import-fox-btn { padding: 7px 11px; border: 1px solid #c9ad81; border-radius: 5px; color: #704b2e; background: #f7edda; font-size: 12px; }
body[data-page="calendar"] #import-fox-btn:hover { background: #ead6b3; }
body[data-page="calendar"] .sticky-form { gap: 10px; align-items: stretch; margin: 0 0 18px; }
body[data-page="calendar"] .sticky-input { min-height: 74px; padding: 15px 17px; border: 1px solid #cbb48e; border-radius: 5px; background: #fffaf0; color: #4d3828; line-height: 1.5; box-shadow: inset 3px 0 #dcb980; }
body[data-page="calendar"] .sticky-input:focus { outline: 2px solid #a7713d; outline-offset: 2px; }
body[data-page="calendar"] .sticky-add-btn { min-width: 112px; border: 1px solid #875033; border-radius: 5px; background: #965d3c; color: #fff8eb; font-family: var(--font-display); font-size: 16px; }
body[data-page="calendar"] .sticky-add-btn:hover { background: #77462f; opacity: 1; }
body[data-page="calendar"] .sticky-board {
  min-height: 400px;
  overflow: auto;
  border: 1px solid #c4a679;
  border-radius: 3px;
  background: linear-gradient(transparent 31px, rgba(135,104,61,.1) 32px) 0 0 / 100% 32px,
    linear-gradient(145deg, #f1dfb9, #e9d2a6 70%, #e4cca0);
  box-shadow: inset 0 0 0 8px rgba(255,247,223,.37), inset 0 0 24px rgba(97,59,25,.1);
}
body[data-page="calendar"] .sticky-board::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(126,83,38,.22); pointer-events: none; }
body[data-page="calendar"] .sticky-empty { display: flex; flex-direction: column; gap: 12px; padding: 35px; color: #785d3e; font: italic 17px/1.5 var(--font-display); text-align: center; }
body[data-page="calendar"] .sticky-empty::before { content: ''; width: 100px; height: 100px; background: url('../icons/nav/diary-cutout-v2.webp') center / contain no-repeat; }
body[data-page="calendar"] .sticky-note { --note-paper: color-mix(in srgb, var(--note-bg, #f6e7c9) 65%, #fff9ed); border: 1px solid rgba(111,76,34,.2); border-radius: 3px; background: var(--note-paper); box-shadow: 2px 5px 12px rgba(73,45,19,.18); }
body[data-page="calendar"] .sticky-note::before { background: linear-gradient(transparent, var(--note-paper)); }
body[data-page="calendar"] .sticky-note::after { border-width: 0 0 13px 13px; border-color: transparent transparent rgba(75,48,20,.12) transparent; }
body[data-page="calendar"] .sticky-note-text,
body[data-page="calendar"] .sticky-note-title { font-family: var(--font-display); }

html[data-theme="dark"] body[data-page="calendar"] .app-shell { background: radial-gradient(ellipse 75% 36% at 50% 7%, #554532, transparent), linear-gradient(120deg, #30271f, #3d3228 45%, #2b2620); }
html[data-theme="dark"] body[data-page="calendar"] .main-content { background-image: none; }
html[data-theme="dark"] body[data-page="calendar"] .page-container { border-color: #806343; background: linear-gradient(150deg, #42372c, #342d27); box-shadow: 0 24px 70px rgba(0,0,0,.27), inset 0 0 0 6px rgba(230,180,111,.025); }
html[data-theme="dark"] body[data-page="calendar"] .page-container::before { border-color: rgba(213,167,100,.21); }
html[data-theme="dark"] body[data-page="calendar"] .page-header { border-color: #715943; }
html[data-theme="dark"] body[data-page="calendar"] :is(.notes-eyebrow, .notes-section-kicker, .clock-kicker) { color: #d1ac73; }
html[data-theme="dark"] body[data-page="calendar"] :is(.page-title, .sticky-section h2) { color: #f6e9d1; }
html[data-theme="dark"] body[data-page="calendar"] .page-intro { color: #d7c3a6; }
html[data-theme="dark"] body[data-page="calendar"] .clock-card { border-color: #9b7852; background: radial-gradient(circle at 12% 20%, #514434, transparent 60%), #47392d; box-shadow: 0 9px 22px rgba(0,0,0,.25), inset 0 0 0 5px rgba(238,198,136,.04); }
html[data-theme="dark"] body[data-page="calendar"] .clock-time { color: #fff2d9; }
html[data-theme="dark"] body[data-page="calendar"] .clock-date,
html[data-theme="dark"] body[data-page="calendar"] .clock-foot { color: #e1c7a4; }
html[data-theme="dark"] body[data-page="calendar"] .clock-foot { border-color: #856845; }
html[data-theme="dark"] body[data-page="calendar"] .self-wake-badge { color: #e6be8a; }
html[data-theme="dark"] body[data-page="calendar"] .self-wake-note { border-color: #856845; background: #3c3026; color: #ebd7bc; }
html[data-theme="dark"] body[data-page="calendar"] #import-fox-btn { border-color: #92704d; background: #4b3b2c !important; color: #f3dcbb !important; }
html[data-theme="dark"] body[data-page="calendar"] .sticky-input { border-color: #896a48; background: #342b23; color: #f5e6cf; box-shadow: inset 3px 0 #a57542; }
html[data-theme="dark"] body[data-page="calendar"] .sticky-add-btn { border-color: #bb8456; background: #aa6d44; }
html[data-theme="dark"] body[data-page="calendar"] .sticky-board { border-color: #8a6945; background: linear-gradient(transparent 31px, rgba(229,190,128,.1) 32px) 0 0 / 100% 32px, linear-gradient(145deg, #493b2d, #3d3025); box-shadow: inset 0 0 0 8px rgba(246,202,140,.04), inset 0 0 24px rgba(0,0,0,.15); }
html[data-theme="dark"] body[data-page="calendar"] .sticky-board::before { border-color: rgba(220,172,109,.18); }
html[data-theme="dark"] body[data-page="calendar"] .sticky-empty { color: #dfc4a0; }

@media (max-width: 580px) {
  body[data-page="calendar"] .main-content { padding: 18px 10px 40px; background: none; }
  body[data-page="calendar"] .page-container { padding: 24px 18px; }
  body[data-page="calendar"] .page-container::before { inset: 7px; }
  body[data-page="calendar"] .clock-card { padding: 20px 17px 0; }
  body[data-page="calendar"] .clock-layout { justify-content: flex-start; gap: 18px; }
  body[data-page="calendar"] .notes-clock { flex-basis: 108px; width: 108px; height: 108px; border-width: 6px; }
  body[data-page="calendar"] .clock-roman { font-size: 8px; }
  body[data-page="calendar"] .clock-xii { top: 11px; }
  body[data-page="calendar"] .clock-iii { right: 9px; }
  body[data-page="calendar"] .clock-vi { bottom: 10px; }
  body[data-page="calendar"] .clock-ix { left: 9px; }
  body[data-page="calendar"] .clock-hour { height: 25px; }
  body[data-page="calendar"] .clock-minute { height: 34px; }
  body[data-page="calendar"] .clock-second { height: 39px; }
  body[data-page="calendar"] .clock-time { font-size: clamp(40px, 12vw, 55px); }
  body[data-page="calendar"] .clock-date { font-size: 12px; }
  body[data-page="calendar"] .clock-foot { flex-wrap: wrap; font-size: 13px; }
  body[data-page="calendar"] .self-wake-note { margin-inline: -17px; padding-inline: 17px; }
  body[data-page="calendar"] .notes-section-head { align-items: center; }
  body[data-page="calendar"] .sticky-section h2 { font-size: 22px; }
  body[data-page="calendar"] .sticky-add-btn { min-width: 86px; font-size: 14px; }
  body[data-page="calendar"] .sticky-board { min-height: 360px; }
}
@media (max-width: 360px) {
  body[data-page="calendar"] .main-content { padding-inline: 8px; }
  body[data-page="calendar"] .page-container { padding-inline: 14px; }
  body[data-page="calendar"] .clock-card { padding-inline: 12px; }
  body[data-page="calendar"] .clock-layout { gap: 11px; }
  body[data-page="calendar"] .notes-clock { flex-basis: 90px; width: 90px; height: 90px; }
  body[data-page="calendar"] .clock-hour { height: 21px; }
  body[data-page="calendar"] .clock-minute { height: 28px; }
  body[data-page="calendar"] .clock-second { height: 32px; }
  body[data-page="calendar"] .clock-time { font-size: 37px; }
  body[data-page="calendar"] .clock-kicker { font-size: 9px; letter-spacing: .12em; }
  body[data-page="calendar"] .self-wake-note { margin-inline: -12px; padding-inline: 12px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body[data-page="calendar"] .header-nav { display: none; }
}