/* © 2026 Tylistid.MyrielOfJuly.com | All rights reserved. See the LICENSE file. */
  :root {
    --ff: 'Lora', serif;
    --fw: 600;
    --fs: 1;
    --veil: 0.8;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { height: 100%; -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100%;
    background: #e6ece8;
    font-family: var(--ff);
    font-variant-numeric: lining-nums;
    color: #111;
    -webkit-tap-highlight-color: transparent;
  }

  button { font: inherit; color: inherit; }

  :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

  /* ---------- Background photo (default = the bush; a chosen photo overrides it) ---------- */
  /* default photo; a photo you choose replaces --photo */
  :root { --photo: url("images/bush.jpg"); }

  /* everything outside the window: the same photo, blurred and whitened */
  .bg {
    position: fixed;
    top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;
    z-index: 0;
    background: #e6ece8 var(--photo) center / cover no-repeat;
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
  .bg::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255, 255, 255, 0.28);
  }

  /* the clear photo window around the main card.
     The frame is the window's own transparent border. Inside it the same photo is shown again,
     multiplied with itself (deeper, "wetter" colours) plus a light-to-dark gloss, so the frame is
     translucent, follows whatever photo is chosen and looks slightly 3D. */
  .window {
    position: relative;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 96vw;
    padding: 1.9rem;
    border: 4.5px solid transparent;
    border-radius: 1.75rem;
    /* The window is a "window" into the photo: the photo is laid out once for the whole screen
       and the window shows the middle of it, exactly in line with the blurred copy around it.
       All layers share the same size and position; only the area they paint differs. */
    background-image:
      var(--photo),
      linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.3)),
      var(--photo),
      var(--photo);
    background-size: cover, 100% 100%, cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed, scroll, fixed, fixed;
    background-origin: border-box;
    background-clip: padding-box, border-box, border-box, border-box;
    background-blend-mode: normal, normal, multiply, normal;
    box-shadow:
      inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.4),
      inset -1px -1px 2px rgba(255, 255, 255, 0.35),
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  }


  /* ---------- Computer view: the app lives inside a phone-shaped frame ---------- */
  .desk-wrap { display: none; }
  html.desk .stage, html.desk .panel { display: none !important; }
  html.desk .desk-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 8px 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
  /* very light veil over the photo around the phone, so the dark text is easy to read */
  html.desk .bg::after { background: rgba(255, 255, 255, 0.74); }

  .phone {
    position: relative;
    box-sizing: border-box;
    width: min(25rem, 94vw);
    height: min(calc(100vh - 16px), 48rem); /* never taller than a real phone would look next to its width */
    padding: 14px;
    border-radius: 2.75rem;
    background: linear-gradient(145deg, rgba(30, 70, 50, 0.85), rgba(8, 26, 16, 0.85));
    box-shadow:
      inset 1px 1px 3px rgba(255, 255, 255, 0.28),
      inset -2px -2px 5px rgba(0, 0, 0, 0.45),
      0 1rem 3rem rgba(0, 0, 0, 0.35);
  }
  .phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 1.875rem;
    overflow: hidden;
    background: #0f2619;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  }
  .phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
  /* a thin rim over the screen's edge, so no light or jagged pixel can show where the screen meets the frame.
     It uses the frame's own colours, one shade darker, so it blends in instead of looking black. */
  .phone-rim {
    position: absolute;
    box-sizing: border-box;
    top: 12px; right: 12px; bottom: 12px; left: 12px;
    border: 3px solid rgba(20, 44, 32, 0.93);
    border-radius: calc(1.875rem + 2px);
    pointer-events: none;
  }
  @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .phone-rim {
      border: 0;
      padding: 3px;
      background: linear-gradient(145deg, rgba(34, 64, 48, 0.93), rgba(12, 28, 20, 0.93));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
    }
  }
  /* the word PHONE runs around the green frame: same green family, engraved, so it melts into the frame */
  .phone-ring { position: absolute; top: 0; left: 0; pointer-events: none; }
  .ring-text {
    font: 700 8px 'Lora', Georgia, serif;
    letter-spacing: 0.32em;
    fill: rgba(214, 245, 228, 0.3);
    -webkit-filter: drop-shadow(0 -1px 0 rgba(0, 20, 10, 0.55)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16));
    filter: drop-shadow(0 -1px 0 rgba(0, 20, 10, 0.55)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16));
  }

  .desk-info { max-width: 20rem; font-family: 'Lora', serif; color: #1c1c1c; line-height: 1.6; text-align: left; }
  .desk-info h2 { margin: 0; font-size: 1.5rem; font-weight: 400; }
  .desk-info h2 b { font-weight: 700; }
  .desk-info .by { margin: 0 0 1rem; font-style: italic; color: #1c1c1c; text-align: left; }
  .desk-info p { margin: 0 0 0.75rem; font-size: 0.95rem; }
  .desk-info .copy { margin-top: 1.5rem; font-size: 0.75rem; color: #222; }

  /* ---------- Main screen ---------- */
  .stage {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.75rem + env(safe-area-inset-top, 0px)) 0 calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }

  .card {
    position: relative;
    isolation: isolate;
    width: -webkit-fit-content;
    width: fit-content;
    min-width: 15rem;
    max-width: 100%;
    padding: 1.375rem 1.125rem 1.125rem;
    border: 3px solid rgba(255, 255, 255, 0.42);
    border-radius: 1.25rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* the lightening layer that keeps text readable on any photo */
  .card::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    border-radius: calc(1.25rem - 3px);
    background: rgba(255, 255, 255, var(--veil));
  }

  .date {
    margin: 0;
    font-size: calc(1.5rem * var(--fs));
    font-weight: var(--fw);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: #111;
  }
  .date sup {
    font-size: 0.55em;
    position: relative;
    top: -0.4em;
    margin-left: 1px;
    font-weight: inherit;
  }
  .date small {
    display: block;
    margin-top: 2px;
    font-size: calc(1.05rem * var(--fs));
    font-weight: 400;
    color: #222;
  }

  .gear {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0.75rem 0 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }
  .gear:active { transform: scale(0.92); }
  .gear .bar {
    display: block;
    width: 13px;
    height: 1.5px;
    border-radius: 1px;
    background: #111;
  }

  .list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    padding: 0.5625rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  .row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 1rem;
    border-radius: 0.5625rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  /* only the square itself is tappable (plus a few pixels of tolerance) */
  .box { display: flex; margin: -0.25rem; padding: 0.25rem; }
  .row input {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 1.1875rem;
    height: 1.1875rem;
    margin: 0;
    padding: 0;
    display: grid;
    place-content: center;
    border: 2px solid #9a9a9a;
    border-radius: 0.3125rem;
    background: transparent;
    cursor: pointer;
  }
  .row input:checked { background: #2563eb; border-color: #2563eb; }
  .row input:checked::before {
    content: "\2713";
    color: #fff;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .row span {
    max-width: 25ch;
    position: relative;
    top: var(--fy, 0em); /* per-font vertical centring, set from the script */
    font-size: calc(0.9rem * var(--fs));
    font-weight: var(--fw);
    line-height: 1.25;
    color: #1a1a1a;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ---------- Settings + About panels ---------- */
  .panel {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    color: #1c1c1c;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-variant-numeric: normal;
    -webkit-user-select: text;
    user-select: text;
  }
  .panel.on { display: block; }
  .panel input, .panel textarea { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
  #aboutPanel { z-index: 20; }
  .panel-inner { max-width: 32rem; margin: 0 auto; }

  .brand {
    margin: 0 0 0.125rem;
    text-align: center;
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #1c1c1c;
  }
  .brand b { font-weight: 700; }
  .by {
    margin: 0 0 0.875rem;
    text-align: center;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #555;
  }

  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
  }

  .btn-dark {
    border: 0;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    background: #1c1c1c;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
  }
  .info-btn {
    -webkit-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: #222;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
  }
  .coffee-row { margin: 1rem 0 0.5rem; text-align: center; }
  .coffee {
    display: inline-block;
    padding: 0.5rem 0.8125rem;
    border-radius: 0.625rem;
    background: rgba(0, 0, 0, 0.06);
    color: #222;
    font-family: 'Dancing Script', cursive;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
  }

  .sec {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.625rem;
    background: #ebebe9;
  }
  .sec.center { text-align: center; }
  .sec h2 {
    margin: 0 0 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
  }

  .btn {
    display: inline-block;
    border: 1px solid #d0d0d0;
    border-radius: 0.4375rem;
    padding: 0.5625rem 0.875rem;
    background: #fff;
    color: #1c1c1c;
    font-size: 0.875rem;
    cursor: pointer;
  }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .btn-row.center { justify-content: center; }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .slider { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.875rem; font-size: 0.8125rem; color: #555; }
  .slider input { flex: 1; min-width: 0; }
  .pct { margin-top: 0.25rem; text-align: center; font-size: 0.75rem; color: #777; }

  /* font dropdown */
  .dd-cur, .dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5625rem 0.75rem;
    border: 1px solid #d8d8d8;
    border-radius: 0.4375rem;
    background: #fff;
    color: #1c1c1c;
    text-align: left;
    cursor: pointer;
  }
  .dd-list { display: none; flex-direction: column; gap: 4px; margin-top: 0.375rem; }
  .dd-list.open { display: flex; }
  .dd-opt { border-color: transparent; }
  .dd-opt.sel { border-color: #1c1c1c; }
  .fn { font-size: 0.75rem; color: #777; }
  .fsample { font-size: 1.375rem; line-height: 1.2; color: #1c1c1c; }
  .caret { font-size: 0.75rem; color: #777; }

  /* list editor */
  .item { display: flex; align-items: center; gap: 6px; margin-bottom: 0.5rem; }
  .item input[type="text"], .add input {
    flex: 1;
    min-width: 0;
    padding: 0.5625rem 0.625rem;
    border: 1px solid #ddd;
    border-radius: 0.4375rem;
    background: #fff;
    color: #1c1c1c;
    font: inherit;
    font-size: 0.9375rem;
  }
  .ib {
    flex: none;
    width: 2rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    background: #fff;
    color: #444;
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .ib.del { color: #c0392b; }
  .add { display: flex; gap: 0.5rem; margin-top: 0.375rem; }
  .add .btn-dark { border-radius: 0.4375rem; }
  .hint { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.5; color: #777; }

  /* history: year > month > day, everything collapsed */
  .hy, .hm { margin-bottom: 0.4375rem; border-radius: 0.4375rem; background: #fff; }
  .hy > summary, .hm > summary { padding: 0.625rem 0.75rem; font-weight: 600; color: #1c1c1c; cursor: pointer; }
  .hy > .hbody, .hm > .hbody { padding: 0 0.5rem 0.5rem; }
  .hm { background: #f5f5f4; }
  .hday { margin-bottom: 0.25rem; border-radius: 0.375rem; background: #fff; font-size: 0.8125rem; color: #444; }
  .hday > summary { padding: 0.5rem 0.625rem; font-weight: 600; color: #1c1c1c; cursor: pointer; }
  .hday .lines { padding: 0 0.625rem 0.5rem; line-height: 1.6; }
  .hempty { padding: 0.5rem 0.625rem; font-size: 0.8125rem; color: #888; }

  .about-icon { display: block; width: 4rem; height: 4rem; margin: 0.25rem auto 0.75rem; border-radius: 0.875rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
  .about .tagline { margin: 0 0 0.125rem; text-align: center; font-family: 'Lora', serif; font-size: 0.875rem; font-style: italic; line-height: 1.5; color: #333; }
  .about .tagline-by { margin: 0 0 1.75rem; text-align: center; font-family: 'Lora', serif; font-size: 0.8125rem; font-style: italic; line-height: 1.3; color: #555; }
  .about .copyright { margin: 2rem 0 0.5rem; text-align: center; font-size: 0.75rem; line-height: 1.4; color: #888; }
  .about h1 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
  .about h2 { margin: 1rem 0 0.25rem; font-size: 0.9rem; font-weight: 700; color: #1c1c1c; }
  .about p { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.6; color: #333; }

  /* hover effects only where a real mouse exists (no "double tap" on phones) */
  @media (hover: hover) and (pointer: fine) {
    .gear:hover { background: #fff; }
    .btn:hover, .dd-opt:hover, .ib:hover { background: #f0f0ef; }
    .btn-dark:hover { background: #000; }
    .info-btn:hover { background: rgba(0, 0, 0, 0.12); }
    .coffee:hover { background: rgba(0, 0, 0, 0.1); }
  }