*{box-sizing:border-box} :root{font-family:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif;color:#303e3b;background:#f7f8f5;font-synthesis:none}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #3f8173;outline-offset:3px}header{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e7e1;background:#fff}.brand{color:inherit;text-decoration:none;font-weight:700;letter-spacing:.05em;display:flex;align-items:center;gap:12px}.private{font-size:12px;color:#698071}main{width:100%;padding:16px 16px 24px}.intro{display:flex;align-items:center;justify-content:flex-end;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#6a8878;font-weight:700;margin:0 0 12px}h1{font-size:30px;letter-spacing:.025em;margin:0;font-weight:650;line-height:1.6}.sub{font-size:13px;color:#7a8580;line-height:1.8}.primary{background:#4c7565;color:white;border:0;border-radius:9px;padding:13px 23px;white-space:nowrap}.primary:hover{background:#3a6152}.stats{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:0;background:#edf1e9;border:1px solid #e3e8df;border-radius:14px;margin:29px 0;padding:24px 10px}.stats>div{padding:0 25px;border-right:1px solid #d9e1d5}.stats>div:last-child{border:0}.stats span{display:block;color:#718075;font-size:12px}.stats strong{display:block;font-size:29px;font-weight:550;margin-top:7px;font-variant-numeric:tabular-nums}.stats small{font-size:13px;font-weight:400}.stat-note{font-size:13px;line-height:1.9;align-content:center;color:#778774}.calendar-panel{background:white;border:1px solid #e0e6df;border-radius:15px;overflow:hidden;box-shadow:0 4px 20px #344a3503}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;padding:25px 26px 18px}.month-nav{display:flex;align-items:center;gap:10px;width:100%}.month-nav h2{margin-right:auto}h2{font-size:21px;margin:0 14px 0 0}.month-nav>button:not(.text-button){background:white;border:1px solid #e0e6df;border-radius:7px;width:30px;height:30px;font-size:22px;color:#657369}.text-button{background:transparent;border:0;color:#637d6f;font-size:12px;padding:9px}.text-button:hover{background:#edf2eb;border-radius:6px}.mood{font-size:11px;padding:4px 10px;border-radius:5px;font-weight:500}.high{background:#f7e1d4;color:#a2633c}.up{background:#f6ecd4;color:#92763a}.steady{background:#e4eddf;color:#527747}.down{background:#e2ecf4;color:#5c7c98}.low{background:#e9e4f2;color:#7f6c9a}.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekdays{border-top:1px solid #e8ece6;background:#fafbf9;text-align:center;font-size:12px;color:#89938c;padding:12px 0}.weekdays span:first-child{color:#ba8582}.weekdays span:last-child{color:#8299b0}.day{border:0;border-top:1px solid #e8ece6;border-right:1px solid #e8ece6;background:white;min-height:130px;text-align:left;vertical-align:top;padding:12px;color:inherit;display:flex;flex-direction:column;gap:7px;position:relative}.day:nth-child(7n){border-right:0}.day:hover{background:#f7faf5}.day.outside{background:#fafbf9;color:#b7bfb8}.date-number{font-size:13px;width:25px;height:25px;display:grid;place-items:center}.today .date-number{background:#547a67;border-radius:50%;color:white}.day .mood{align-self:flex-start}.times{display:flex;gap:7px;flex-wrap:wrap;font-size:11px;font-variant-numeric:tabular-nums;color:#7c877e}.day-note{font-size:10px;color:#859086;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.empty-plus{color:#d4dcd3;font-size:20px;align-self:center;margin:auto}.calendar-footer{padding:16px 24px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e8ece6;font-size:11px;color:#939c95}footer{display:flex;align-items:center;justify-content:flex-end;gap:15px;margin-top:20px}footer p{font-size:11px;color:#919b94;line-height:1.9}footer>div{display:flex;flex-shrink:0}.mobile{display:none}dialog{border:1px solid #e0e6df;border-radius:18px;width:480px;max-width:calc(100% - 28px);max-height:90vh;padding:28px;color:#303e3b;box-shadow:0 20px 90px #233e3326}dialog::backdrop{background:#263c3659;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.close{border:0;background:transparent;font-size:28px;color:#7a8780;padding:0 5px}fieldset{border:0;padding:0;margin:0 0 25px}legend,.sleep-inputs label,.day-offset,.note-label{font-size:13px;font-weight:600}legend{margin-bottom:12px}.mood-options{display:flex;gap:6px}.mood-options label{flex:1;text-align:center;border-radius:8px;padding:12px 2px;font-size:12px;cursor:pointer;position:relative;border:2px solid transparent}.mood-options input{display:block;margin:0 auto 7px;accent-color:#4c7565}.mood-options label:has(input:checked){border-color:currentColor}.sleep-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}input[type=time],select,textarea{display:block;width:100%;border:1px solid #dbe2d9;border-radius:7px;background:#fafbf9;padding:10px;color:inherit;margin-top:8px}.day-offset{display:block;margin-top:18px}select{font-size:12px}.note-label{display:block;margin-top:24px}.note-label span{font-size:11px;font-weight:400;color:#9ba59e}textarea{resize:vertical;font-weight:400}.dialog-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.danger{background:none;border:0;color:#ad7772;font-size:12px}#form-error{color:#b05849;font-size:12px}
button { touch-action: manipulation; }
header { height: auto; min-height: 84px; gap: 16px; flex-wrap: wrap; padding: 16px; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-actions button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; flex: 0 0 44px; border-radius: 9px; }
.header-actions svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.times > span { white-space: nowrap; }
.mood.unrecorded { visibility: hidden; }
.times { flex-direction: column; }
.nap-start-time, .nap-end-time { color: #637d6f; }
.day:focus-visible { outline-offset: -3px; z-index: 1; }

@media (max-width: 760px) {
  header {
    height: auto;
    min-height: 70px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    gap: 12px;
    flex-wrap: wrap;
  }
  .brand { font-size: 15px; gap: 8px; }
  
  .private { font-size: 11px; margin-left: auto; color: #536c5b; }
  main {
    padding: 22px max(8px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .intro { display: block; padding: 0 8px; margin-bottom: 0; }
  .intro .eyebrow { display: none; }
  h1 { font-size: 22px; line-height: 1.55; }
  .mobile { display: initial; }
  .sub { font-size: 13px; line-height: 1.8; margin: 10px 0 0; }
  .header-actions { gap: 6px; }
  .stats { margin: 20px 0; padding: 16px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; }
  .stats > div { padding: 0 8px; min-width: 0; }
  .stats > div:nth-child(3) { border: 0; }
  .stats span { font-size: 11px; color: #586e5f; }
  .stats strong { font-size: clamp(16px, 4.5vw, 23px); line-height: 1.5; overflow-wrap: anywhere; }
  .stats .stat-note { display: none; }
  .calendar-panel { border-radius: 12px; }
  .calendar-toolbar { padding: 12px 10px; }
  .month-nav { width: 100%; gap: 6px; }
  .month-nav h2 { flex: 1; font-size: 18px; margin: 0; }
  .month-nav > button:not(.text-button) { width: 44px; height: 44px; font-size: 26px; }
  .month-nav .text-button { min-width: 44px; min-height: 44px; padding: 7px; font-size: 13px; }
  
  
  
  
  .weekdays { font-size: 12px; padding: 10px 0; }
  .day { min-width: 0; min-height: 124px; padding: 7px 2px; gap: 5px; align-items: center; }
  .date-number { font-size: 14px; width: 28px; height: 28px; }
  .day .mood { align-self: stretch; text-align: center; font-size: 11px; padding: 4px 0; white-space: nowrap; letter-spacing: -.3px; }
  .times { flex-direction: column; align-items: center; gap: 4px; font-size: clamp(10px, 2.7vw, 12px); line-height: 1.3; letter-spacing: -.3px; }
  .time-icon { display: inline; }
  .wake-time { color: #805b2d; }
  .bed-time { color: #5b6485; }
  .day-note { font-size: 10px; width: 100%; text-align: center; color: #627468; }
  .empty-plus { font-size: 18px; }
  .calendar-footer { padding: 12px; font-size: 12px; line-height: 1.7; flex-direction: column; gap: 3px; color: #69796f; }
  footer { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 8px; }
  footer p { font-size: 12px; color: #69796f; }
  footer > div { gap: 10px; }
  footer .text-button { flex: 1; min-height: 46px; font-size: 13px; background: #edf1e9; border-radius: 9px; }
  
  
  dialog {
    position: fixed;
    inset: auto 0 0;
    margin: 0 auto;
    width: 100%;
    max-width: 560px;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    padding: 24px max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 20px;
  }
  body:has(dialog[open]) { overflow: hidden; }
  .dialog-header { margin-bottom: 20px; align-items: center; }
  .dialog-header h2 { font-size: 20px; }
  .close { min-width: 44px; min-height: 44px; background: #f0f3ed; border-radius: 50%; }
  legend, .sleep-inputs label, .day-offset, .note-label { font-size: 14px; }
  .mood-options { gap: 5px; }
  .mood-options label { font-size: 13px; min-height: 70px; padding: 12px 0; }
  .mood-options input { width: 18px; height: 18px; }
  .sleep-inputs { gap: 12px; }
  .sleep-inputs label { min-width: 0; }
  input[type=time], select, textarea { min-width: 0; max-width: 100%; font-size: 16px; min-height: 48px; }
  input[type=time] { padding: 10px 6px; }
  select { padding: 10px 6px; }
  
  .dialog-actions { gap: 12px; }
  .dialog-actions .primary { flex: 1; min-height: 50px; font-size: 16px; }
  .danger { min-height: 48px; font-size: 13px; }
}

@media (max-width: 359px) {
  .brand { font-size: 14px; }
  .private { font-size: 10px; }
  
  
  .month-nav { gap: 3px; }
  .month-nav h2 { font-size: 16px; }
}

.sleep-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sleep-inputs > label:first-child, .sleep-inputs > label:last-child { grid-column: 1 / -1; }
.sleep-inputs > label { min-width: 0; }
#editor {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 20px;
  background: #fff;
}
#editor .dialog-header { position: sticky; top: 0; z-index: 1; background: #fff; padding-bottom: 12px; }
body:has(#editor[open]) { overflow: hidden; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
header { flex-shrink: 0; }
main { flex: 1; display: flex; padding: 0; min-width: 0; }
.calendar-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.calendar-toolbar, .weekdays { flex-shrink: 0; }
.calendar { flex: 1; grid-auto-rows: 1fr; }
.sleep-inputs .optional { font-size: 12px; font-weight: 400; color: #77877e; }
.nap-time { display: flex; flex-wrap: wrap; gap: 3px; font-size: 11px; color: #637d6f; font-variant-numeric: tabular-nums; }
.nap-time > span { white-space: nowrap; }
@media (max-width: 760px) {
  .nap-time { flex-direction: column; align-items: center; gap: 1px; font-size: clamp(10px, 2.7vw, 12px); }
}