/* The two web fonts live in fonts/ (not Google's servers, which would see every visitor's
     address). One file per font covers every weight. */
  @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dm-sans.woff2) format('woff2');}
  @font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/nunito.woff2) format('woff2');}
  :root{
    --ink:#1f2a24;
    --ink-soft:#5b6b60;
    --paper:#f6f4ee;
    --line:#d9d4c6;
    --line-strong:#b9b2a0;
    --accent:#3a5a49;
    --accent-soft:#e4ece5;
    --warn:#b5562f;
    --warn-soft:#f6e6dd;
    --now:#d9534f;
    /* small labels and icons: soft, but still readable (WCAG 4.5:1 text, 3:1 icons) */
    --faint:#625e56; --faint-icon:#7f7a6f; --now-text:#b8403b;
    --font-body: Georgia, 'Iowan Old Style', serif;
    --surface:#ffffff;
    --surface-alt:#fbfaf6;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    padding:24px 16px 60px;
  }
  .wrap{max-width:640px;margin:0 auto;}
  h1{
    font-size:26px;
    font-weight:400;
    margin:0;
  }
  .heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .mini-history{
    display:flex;
    gap:4px;
  }
  .mini-btn{
    width:26px;
    height:26px;
    padding:0;
    border-radius:50%;
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .day-progress{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .day-progress-bar{
    flex:1;
    height:6px;
    border-radius:3px;
    background:var(--line);
    overflow:hidden;
  }
  .day-progress-fill{
    height:100%;
    background:var(--accent);
    border-radius:3px;
    width:0%;
    transition:width 0.3s ease;
  }
  .day-progress-label{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .mini-timeline{
    position:relative;
    height:10px;
    border-radius:3px;
    background:var(--line);
    margin-bottom:20px;
    overflow:visible;
  }
  .mini-timeline-seg{
    position:absolute;
    top:0;
    bottom:0;
    cursor:pointer;
    opacity:0.9;
    transition:opacity 0.15s ease;
  }
  .mini-timeline-seg:hover{opacity:1;}
  .mini-timeline-empty{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:10.5px;
    color:var(--faint);
    line-height:10px;
    padding-left:2px;
  }
  .mini-tooltip{
    position:fixed;
    background:#1a1c19;
    color:#fff;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    padding:5px 9px;
    border-radius:4px;
    pointer-events:none;
    white-space:nowrap;
    opacity:0;
    transform:translate(-50%, -8px);
    transition:opacity 0.1s ease;
    z-index:50;
  }
  .mini-tooltip.show{opacity:1;}
  .sub{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:13px;
    color:var(--ink-soft);
    margin:0 0 18px;
  }
  .daytabs{
    display:flex;
    gap:4px;
    margin-bottom:16px;
    flex-wrap:wrap;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .daytab{
    font-size:12px;
    padding:6px 10px;
    border-radius:3px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
  }
  .daytab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .daytab.today{border-color:#c99a2e;} /* thin gold outline marks today, even when another day is open */
  .daytab:hover:not(.active){background:var(--accent-soft);}
  .daytabs-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
  }
  .daytabs-row .daytabs{margin-bottom:0;flex:1;}
  .today-btn{
    width:26px;
    height:26px;
    font-size:16px;
    flex-shrink:0;
  }
  .control-grid{
    display:grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "tabs today more"
      "add  add   sort";
    align-items:center;
    gap:8px 8px;
    margin-bottom:16px;
  }
  .daytabs-scroll{ grid-area:tabs; min-width:0; }
  .control-grid .daytabs{ margin-bottom:0; }
  .control-grid .mini-history{ grid-area:today; }
  .control-grid .more-menu-wrap{ grid-area:more; }
  .control-grid #addBtn{ grid-area:add; justify-self:start; }
  .control-grid #sortBtn{ grid-area:sort; justify-self:start; }
  @media (max-width: 560px){
    .control-grid{
      /* the middle column soaks up the spare space: Add and Sort on the left, the two circle buttons on the right */
      grid-template-columns: auto auto 1fr auto auto;
      grid-template-areas:
        "tabs tabs tabs tabs  tabs"
        "add  sort .    today more";
    }
    .daytabs-scroll{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:2px;
    }
    .control-grid .daytabs{
      flex-wrap:nowrap;
    }
    .control-grid .daytab{
      font-size:11px;
      padding:5px 8px;
      flex-shrink:0;
    }
  }
  .toolbar{
    display:flex;
    gap:8px;
    margin-bottom:16px;
    flex-wrap:wrap;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  button{
    font-family:inherit;
    font-size:13px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--ink);
    padding:8px 14px;
    border-radius:3px;
    cursor:pointer;
  }
  button:hover{background:var(--accent-soft);border-color:var(--accent);}
  button.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
  button.primary:hover{background:#2e4a3b;}
  button.danger{border-color:var(--warn);color:var(--warn);background:var(--surface);}
  button.danger:hover{background:var(--warn-soft);}
  button.armed{background:var(--warn);color:#fff;border-color:var(--warn);}
  button:disabled{opacity:0.4;cursor:default;}
  button:disabled:hover{background:var(--surface);border-color:var(--line-strong);}
  .more-menu-wrap{position:relative;display:inline-block;}
  .more-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:150px;
    z-index:20;
  }
  .more-menu button{
    text-align:left;
    border:none;
    background:none;
    padding:8px 10px;
    border-radius:4px;
  }
  .more-menu button:hover{background:var(--accent-soft);}
  .more-menu button.danger{color:var(--warn);}
  .more-menu button.danger:hover{background:var(--warn-soft);}
  .cat-manager{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:20px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .panel{
    border:1px solid var(--line);
    border-radius:4px;
    padding:14px 14px 6px;
    margin-bottom:18px;
    background:var(--surface-alt);
  }
  .set-tabs{
    display:grid;
    grid-template-columns:repeat(3, 1fr); /* six tabs in two tidy rows, so they fit on a phone */
    gap:4px;
    padding:4px;
    margin-bottom:14px;
    background:var(--line);
    border-radius:10px;
  }
  .set-tabs button{
    border:none;
    background:none;
    border-radius:7px;
    padding:8px 0;
    color:var(--ink-soft);
  }
  .set-tabs button[aria-selected="true"]{
    background:var(--surface);
    color:var(--ink);
    font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
  }
  .panel .toolbar{margin-bottom:10px;}
  .panel .toolbar:last-of-type{margin-bottom:0;}
  .toolbar input[type="text"], .toolbar select, .toolbar input[type="number"], select{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:13px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:7px 10px;
    background:var(--surface);
    color:var(--ink);
  }
  .toolbar input[type="text"]{width:140px;}
  button.toggle-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
  .weekday-picker{
    display:flex;
    gap:3px;
  }
  .weekday-btn{
    width:28px;
    height:28px;
    padding:0;
    border-radius:50%;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .weekday-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
  .recur-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:12.5px;
    color:var(--ink-soft);
    padding:6px 0;
    border-bottom:1px solid var(--line);
  }
  .recur-row:last-child{border-bottom:none;}
  .recur-row .recur-info{flex:1;}
  .recur-row .recur-days{color:var(--faint);font-size:11px;}
  .setting-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:13px;
    color:var(--ink-soft);
  }
  .setting-label select{
    font-family:inherit;
    font-size:13px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:5px 8px;
    background:var(--surface);
    color:var(--ink);
  }
  .summary-content{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .summary-row-title{
    font-size:12px;
    color:var(--ink-soft);
    margin:0 0 6px;
  }
  .completion-bar{
    height:8px;
    border-radius:4px;
    background:var(--line);
    overflow:hidden;
    margin-bottom:14px;
  }
  .completion-fill{
    height:100%;
    background:var(--accent);
    border-radius:4px;
    transition:width 0.3s ease;
  }
  .cat-total-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--ink-soft);
    padding:3px 0;
  }
  .cat-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0;
  }
  .cat-total-name{flex:1;}
  .week-bars{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:90px;
    margin-top:16px;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
  }
  .week-bar-col{
    flex:1;
    display:flex;
    flex-direction:column-reverse;
    height:100%;
    border-radius:2px 2px 0 0;
    overflow:hidden;
    background:var(--line);
  }
  .week-bar-seg{width:100%;}
  .week-bar-labels{
    display:flex;
    gap:6px;
    margin-top:4px;
  }
  .week-bar-labels span{
    flex:1;
    text-align:center;
    font-size:10px;
    color:var(--ink-soft);
  }
  .consistency{
    margin:0 0 18px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .cons-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:2px 12px;
  }
  .cons-streak{
    font-size:11px;
    color:var(--ink-soft);
    margin:0 0 6px;
    cursor:help;
  }
  .cons-streak strong{color:var(--ink);font-weight:600;}
  .consistency-scroll{
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .consistency-grid{
    display:grid;
    grid-template-columns:28px repeat(53, minmax(9px, 1fr)); /* overridden per year in JS */
    grid-template-rows:14px repeat(7, auto);
    gap:2px;
    min-width:615px;
  }
  .cons-month{
    grid-row:1;
    font-size:9.5px;
    line-height:14px;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .cons-daylabel{
    grid-column:1;
    align-self:center;
    font-size:9.5px;
    line-height:1;
    color:var(--ink-soft);
    position:sticky;
    left:0;
    background:var(--paper);
    z-index:1;
  }
  .cons-cell{
    width:100%;
    aspect-ratio:1 / 1;
    align-self:start;
    border-radius:2px;
    background:var(--line);
    position:relative;
    overflow:hidden;
  }
  .cons-cell.future{opacity:0.35;}
  .cons-cell.selected{outline:1.5px solid var(--ink-soft);outline-offset:1px;}
  .cons-fill{
    position:absolute;
    inset:0;
    background:var(--accent);
  }
  .cat-chip{
    position:relative;
    font-size:11px;
    padding:4px 22px 4px 10px;
    border-radius:12px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--ink-soft);
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .cat-color-input{
    width:16px;
    height:16px;
    padding:0;
    border:none;
    border-radius:50%;
    background:none;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
  }
  .cat-color-input::-webkit-color-swatch-wrapper{padding:0;border-radius:50%;}
  .cat-color-input::-webkit-color-swatch{border:1px solid rgba(255,255,255,0.6);border-radius:50%;}
  .cat-chip .x{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:var(--ink-soft);
  }
  .cat-chip .x:hover{color:var(--warn);}
  .cat-add{display:flex;gap:4px;}
  .cat-add input{
    font-family:inherit;
    font-size:12px;
    border:1px solid var(--line-strong);
    border-radius:12px;
    padding:5px 10px;
    width:110px;
    background:var(--surface);
    color:var(--ink);
  }
  .cat-add button{padding:5px 10px;font-size:12px;}
  .track{
    position:relative;
    border-left:2px solid var(--line-strong);
    margin-left:82px;
  }
  .block{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0 12px 20px;
    border-bottom:1px solid var(--line);
    cursor:grab;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    background:var(--paper);
  }
  /* the "now" line */
  .now-line{
    position:relative;
    height:0;
    z-index:4;
    pointer-events:none;
  }
  .now-line.inside{
    position:absolute;
    left:0;
    right:0;
  }
  .now-line::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:2px;
    border-radius:1px;
    background:var(--now);
    opacity:0.9;
  }
  .now-line::before{
    content:'';
    position:absolute;
    left:-5px;
    top:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--now);
  }
  .now-label{
    position:absolute;
    left:-98px;
    top:3px;
    width:84px;
    text-align:right;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:10px;
    font-weight:600;
    color:var(--now-text);
  }
  .block.current{background:var(--accent-soft);}
  .block.current::before{background:var(--accent);}
  .block.done{opacity:0.55;}
  .block.done .title{text-decoration:line-through;}
  .block.conflict{
    border-left:3px solid var(--warn);
    padding-left:17px;
  }
  .conflict-badge{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:9.5px;
    color:var(--warn);
    background:var(--warn-soft);
    border-radius:8px;
    padding:1px 7px;
    margin-top:4px;
    display:inline-block;
  }
  .block.dragging{
    opacity:0.92;
    box-shadow:0 10px 20px rgba(0,0,0,0.16);
    transform:scale(1.02) rotate(1deg);
    cursor:grabbing;
    z-index:5;
  }
  .block.drag-over{border-top:2px solid var(--accent);}
  .check{
    margin-top:4px;
    width:16px;
    height:16px;
    accent-color:var(--accent);
    cursor:pointer;
    flex-shrink:0;
  }
  .drag-handle{
    color:var(--faint-icon);
    font-size:14px;
    padding:4px 2px;
    align-self:flex-start;
    cursor:grab;
    user-select:none;
  }
  .block:last-child{border-bottom:none;}
  .block::before{
    content:"";
    position:absolute;
    left:-7px;
    top:18px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--paper);
    border:2px solid var(--accent);
  }
  .time-col{
    position:absolute;
    left:-98px;
    top:12px;
    width:84px;
    text-align:right;
  }
  .time-col input{
    width:84px;
    text-align:right;
    border:none;
    background:transparent;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:12px;
    color:var(--ink-soft);
    padding:2px 0;
  }
  .duration-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    margin-top:2px;
  }
  .dur-step{
    background:none;
    border:none;
    color:var(--faint);
    font-size:11px;
    line-height:1;
    padding:2px 3px;
    cursor:pointer;
  }
  .dur-step:hover{color:var(--accent);background:none;border:none;}
  .duration-row input{
    width:26px;
    text-align:right;
    border:none;
    background:transparent;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--faint);
    padding:1px 0;
    -moz-appearance:textfield;
    appearance:textfield;
  }
  .duration-row input::-webkit-outer-spin-button,
  .duration-row input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .duration-row span{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--faint);
  }
  .end-time-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
  }
  .end-arrow{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--faint);
  }
  .end-time-input{
    width:58px;
    text-align:right;
    border:none;
    background:transparent;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--faint);
    padding:1px 0;
  }
  .end-time-input:focus{
    outline:none;
    color:var(--ink-soft);
  }
  .content{flex:1;min-width:0;}
  .content input.title{
    width:100%;
    border:none;
    background:transparent;
    font-family:inherit;
    font-size:16px;
    color:var(--ink);
    padding:2px 0;
  }
  .content input.title::placeholder{color:var(--faint);}
  .content input.title:focus,
  .time-col input:focus,
  .content textarea:focus{
    outline:none;
    border-bottom:1px solid var(--accent);
  }
  .content textarea{
    width:100%;
    border:none;
    background:transparent;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:12.5px;
    color:var(--ink-soft);
    resize:none;
    padding:2px 0;
    line-height:1.4;
  }
  .tag-row{
    display:flex;
    gap:6px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .tag{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:10.5px;
    padding:3px 9px;
    border-radius:12px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    user-select:none;
  }
  .tag.on{background:var(--accent);color:#fff;border-color:var(--accent);}
  .remove-btn{
    background:none;
    border:none;
    color:var(--faint-icon);
    font-size:18px;
    line-height:1;
    padding:4px 6px;
    cursor:pointer;
    align-self:flex-start;
  }
  .remove-btn:hover{color:var(--warn);}
  /* Phones: the three small buttons (copy, move, delete) drop onto their own
     line under the block, so the title, notes and categories get the full width. */
  @media (max-width: 560px){
    .block{
      flex-wrap:wrap;
      gap:0 8px;
      padding-left:14px;
    }
    .block .content{
      flex-basis:calc(100% - 70px); /* leaves room for the drag dots and checkbox */
    }
    .block .content + .remove-btn{
      margin-left:auto;
    }
    .control-grid #addBtn{
      white-space:nowrap;
    }
  }
  .copy-to-popover{
    position:absolute;
    right:0;
    top:100%;
    margin-top:4px;
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,0.14);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:30;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-width:170px;
  }
  .copy-to-popover input[type="date"]{
    font-family:inherit;
    font-size:12.5px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:5px 7px;
    background:var(--surface);
    color:var(--ink);
  }
  .copy-to-popover .copy-to-actions{
    display:flex;
    gap:6px;
  }
  .copy-to-popover button{
    font-size:12px;
    padding:5px 10px;
  }
  .empty{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color:var(--ink-soft);
    font-size:13px;
    padding:20px 0 20px 20px;
  }
  .insert-gap{
    position:relative;
    height:8px;
    margin-left:-2px;
  }
  .insert-gap .insert-btn{
    position:absolute;
    left:-34px;
    top:50%;
    transform:translateY(-50%) scale(0.6);
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    border:none;
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    padding:0;
  }
  .insert-gap .insert-line{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:var(--accent);
    opacity:0;
    transition:opacity 0.15s ease;
  }
  .insert-gap:hover .insert-btn{opacity:1;transform:translateY(-50%) scale(1);}
  .insert-gap:hover .insert-line{opacity:0.5;}
  .add-row{margin-left:82px;padding:14px 0 14px 20px;}
  .status{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:11px;
    color:var(--faint);
    margin-top:24px;
    margin-left:82px;
  }
  .toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translate(-50%, 12px);
    background:#1a1c19;
    color:#fff;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:12.5px;
    padding:9px 16px;
    border-radius:20px;
    box-shadow:0 6px 18px rgba(0,0,0,0.2);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:100;
  }
  .toast.show{
    opacity:1;
    transform:translate(-50%, 0);
  }

  /* ---------- themes (Settings > Theme) ----------
     app.js puts the chosen theme on <body data-theme="...">. Colours set on
     body here win over the plain light/dark ones app.js sets on <html>. */

  /* Daybreak: the sky just after dawn, navy ink and a coral "now" line (gold is kept for "done") */
  body[data-theme="daybreak"]{
    --ink:#1b2a4a; --ink-soft:#5d6a86; --line:#d8deea; --line-strong:#aab4c8;
    --surface:#ffffff; --surface-alt:#f8f9fc; --now:#d9534f; --now-text:#b8403b;
  }

  /* Twilight: dusk lavender, a coral "now" line, rounder buttons */
  body[data-theme="twilight"]{
    --ink:#2b2340; --ink-soft:#6d6384; --line:#dcd3e3; --line-strong:#b5a8c4;
    --surface:#f8f5fa; --surface-alt:#f4f0f6; --now:#e08a6c; --now-text:#a84a2b;
  }
  body[data-theme="twilight"] button,
  body[data-theme="twilight"] .daytab{border-radius:20px;}

  /* Deep Space: the logo's night blue, with moonlight-blue buttons (gold is kept for the stars) */
  body[data-theme="deepspace"]{
    --ink:#e6eaf4; --ink-soft:#97a3bf; --line:#26324d; --line-strong:#46557a;
    --surface:#1b2a4a; --surface-alt:#16223d; --now:#f0857b;
    --faint:#a9a498; --faint-icon:#c7c0b0; --now-text:#f0857b;
  }

  /* Nebula: deep violet with lilac and pink, rounder buttons */
  body[data-theme="nebula"]{
    --ink:#efe8f7; --ink-soft:#a99cbf; --line:#2f2645; --line-strong:#54466f;
    --surface:#271d3c; --surface-alt:#211833; --now:#ee93b8;
    --faint:#a9a498; --faint-icon:#c7c0b0; --now-text:#ee93b8;
  }
  body[data-theme="nebula"] button,
  body[data-theme="nebula"] .daytab{border-radius:20px;}

  /* the dark themes' accents are light, so text sitting on the accent is dark */
  body[data-theme="deepspace"] :is(.daytab.active, button.primary, .weekday-btn.on, .tag.on, .insert-btn){color:#141c30;}
  body[data-theme="nebula"] :is(.daytab.active, button.primary, .weekday-btn.on, .tag.on, .insert-btn){color:#1a1428;}

  /* ---------- logo screen while the app starts ---------- */
  .splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#1b2a4a;color:#ffffff;font-family:Georgia,'Iowan Old Style',serif;font-size:28px;letter-spacing:.04em;transition:opacity .45s ease;}
  .splash.gone{opacity:0;pointer-events:none;}
  .splash svg,.splash span{animation:splashIn .9s ease both;}
  .splash span{animation-delay:.25s;}
  @keyframes splashIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  body:has(.sign-in:not([hidden])) .splash{display:none;} /* the sign-in screen takes over */

  /* ---------- sign-in screen (storage.js shows it until someone signs in) ---------- */
  .sign-in{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--paper);}
  .sign-in[hidden]{display:none;}
  .sign-in-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;}
  .sign-in-box h2{margin:0;font-weight:400;font-size:26px;}
  .sign-in-box label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft);}
  .sign-in-box [hidden]{display:none;} /* the rule above would otherwise keep hidden labels showing */
  .sign-in-box label.age-check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink);}
  .sign-in-box input{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);} /* 16px stops iPhone zooming in */
  .sign-in-note{margin:0;min-height:1em;font-size:13px;color:var(--ink-soft);}
  .legal-links a{color:var(--accent);}
  .link-btn{background:none;border:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;}

  /* ---------- night sky (one star per good day; drawn by renderNightSky in app.js) ----------
     The picture is its own rounded rectangle; the caption sits under it as plain page text. */
  .night-sky{margin-bottom:18px;border-radius:10px;cursor:pointer;}
  .night-sky:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .night-sky svg{display:block;width:100%;height:auto;border-radius:10px;overflow:hidden;}
  /* closed: a short slice through the middle of the sky (the svg crops itself to fit) */
  .night-sky:not(.open) svg{height:36px;}
  .night-sky:not(.open) .sky-more,
  .night-sky.open .sky-hint{display:none;}
  .sky-evening{display:block;font-style:italic;} /* the after-sunset line about today */
  .sky-burst{fill:none;stroke:#f6e7b0;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sky-burst 1.6s ease-out .3s both;}
  @keyframes sky-burst{0%{opacity:.9;transform:scale(.4)} 100%{opacity:0;transform:scale(5)}}
  .night-sky-caption{margin:0;padding:6px 2px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:13px;line-height:1.5;color:var(--ink-soft);}
  .night-sky-caption b{color:var(--ink);font-weight:600;}
  /* the collection grid under the open sky */
  .sky-collection{display:none;grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));gap:8px;margin-top:12px;max-height:340px;overflow-y:auto;cursor:default;}
  .night-sky.open .sky-collection{display:grid;}
  .sky-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:8px;background:#121a33;}
  .sky-tile:not(.got):not(.now) > *{opacity:.3;} /* not collected yet: a faint outline on the same night blue */
  .sky-tile.now{outline:1px solid #8fa7d8;}
  .sky-tile svg{width:100%;height:auto;}
  .sky-tile span{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:11px;color:#c9d2ea;text-align:center;line-height:1.2;}
  .sky-bg{fill:#dfe6ff;}
  .sky-twinkle{animation:sky-twinkle 3.6s ease-in-out infinite;}
  .sky-star{fill:#f6e7b0;}
  .sky-slot{fill:none;stroke:#a9b2c9;stroke-opacity:.4;stroke-dasharray:2 3;}
  .sky-link{stroke:#8fa7d8;stroke-opacity:.45;stroke-width:1.5;}
  .sky-link.complete{stroke-opacity:.95;stroke-width:2.2;}
  .sky-name{fill:#a9b2c9;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:18px;text-anchor:middle;}
  /* bonus rewards (10/50/100 good days) are gold: they're "done" moments */
  .sky-star.bonus{fill:#f2d27a;}
  .sky-link.bonus{stroke:#f2d27a;stroke-opacity:.5;stroke-width:1.6;}
  .sky-name.bonus{fill:#e9cf86;}
  .lodestar-halo{fill:#f2d27a;opacity:.12;}
  .sky-tile.bonus.got{outline:1px solid rgba(242,210,122,.6);}
  .sky-tile.bonus:not(.got) > span{opacity:1;} /* not yet: the picture stays faint, the progress stays readable */
  .sky-star.fresh{animation:sky-pop .8s ease-out both;transform-box:fill-box;transform-origin:center;}
  @keyframes sky-pop{0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.9)} 100%{transform:scale(1)}}
  @keyframes sky-twinkle{0%,100%{opacity:.9} 50%{opacity:.25}}
  /* The pop and twinkle play even with "reduce motion" on: the owner asked for them, and both are small. */

  /* "Darken at sunset": when the sun sets or rises while the planner is open, app.js adds
     this class for a moment so day and night colours glide into each other over 5 seconds. */
  body.sun-switch, body.sun-switch *{transition:background-color 5s ease, color 5s ease, border-color 5s ease;}

  /* ---------- welcome tour (app.js startTour) ---------- */
  .tour{position:fixed;inset:0;z-index:150;}
  .tour-dim{position:absolute;inset:0;} /* catches clicks so the page can't be used mid-tour */
  .tour.shade .tour-dim{background:rgba(10,16,34,.62);}
  .tour-ring{position:fixed;border-radius:10px;box-shadow:0 0 0 4px #ffffff, 0 0 0 9999px rgba(10,16,34,.62);pointer-events:none;}
  .tour-card{position:fixed;left:50%;transform:translateX(-50%);width:min(360px, calc(100vw - 32px));box-sizing:border-box;padding:20px;border-radius:14px;background:#1b2a4a;color:#ffffff;display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
  .tour-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c9d2ea;}
  .tour-card h2{margin:0;font-family:Georgia, 'Iowan Old Style', serif;font-weight:400;font-size:22px;line-height:1.25;}
  .tour-card p{margin:0;font-size:15px;line-height:1.5;color:#dfe5f3;}
  .tour-dots{display:flex;gap:6px;}
  .tour-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);}
  .tour-dots span.on{background:#ffffff;}
  .tour-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .tour-actions span{display:flex;gap:8px;}
  .tour-card button{min-height:44px;font:inherit;font-size:15px;border-radius:8px;cursor:pointer;}
  .tour-card .tour-skip{border:none;background:none;color:#c9d2ea;text-decoration:underline;padding:0 4px;}
  .tour-card .tour-back{border:1px solid #ffffff;background:transparent;color:#ffffff;padding:0 16px;}
  .tour-card .tour-next{border:none;background:#ffffff;color:#141c30;font-weight:600;padding:0 18px;}
  .tour-card button:focus-visible{outline:2px solid #ffffff;outline-offset:2px;}
  /* stronger than the app's general button:hover, which would turn Next pale when the card moves under the mouse */
  .tour-card .tour-skip:hover{background:none;color:#ffffff;}
  .tour-card .tour-back:hover{background:rgba(255,255,255,.12);border-color:#ffffff;}
  .tour-card .tour-next:hover{background:#e3e8f4;}

  /* the little star that floats up when a block is ticked (app.js tickStar) */
  .tick-star{position:fixed;z-index:60;pointer-events:none;filter:drop-shadow(0 0 4px rgba(242,210,122,.8));}

  /* offline / syncing note at the top (storage.js showNote) */
  .offline-note{margin:10px 0 0;padding:6px 12px;border-radius:8px;background:var(--accent-soft);color:var(--ink);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:13px;}