/* ==========================================================================
   Briefing (avatar) – full stylesheet
   ========================================================================== */

  @charset "UTF-8";

/* --- Theme tokens ------------------------------------------------------- */
:root{
  --bg:white;               /* page background */
  --panel:white;            /* cards / panels */
  --sunken:white;           /* inner surfaces */
  --text:black;             /* primary text */
  --muted:dimgrey;            /* secondary text */
  --accent:#6aa2ff;           /* primary accent (also used for accent-color) */
  --accent-2:#82f1d0;         /* subtle neon for focus/glow */
  --border:#1c2733;           /* hairlines */
  --chip:#1a2430;             /* chips / pills */
  --ring:rgba(130,241,208,.25);
  --shadow:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset;
}

/* --- Base --------------------------------------------------------------- */
*{box-sizing:border-box; font-size: 20px;}
html,body{height:100%}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui,Segoe UI,Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{
  color:var(--text);               /* requested: links not default blue */
  text-decoration:none !important;
}
a:hover{
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:2px;
}

/* Keyboard-focus ring */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--ring);
  border-radius:10px;
}

/* --- Layout ------------------------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* Top bar */
header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}
h1{
  margin:0 14px 0 0;
  font-size:28px;
  letter-spacing:.4px;
  background:linear-gradient(180deg,#fff,#cfe7ff);
  -webkit-background-clip:text;background-clip:text; /* color:transparent; */
  text-shadow:0 2px 30px rgba(130,241,208,.12);
}
select,input[type="text"]{
  height:40px;
  background:white;
  color:black;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
}
input::placeholder{color:var(--muted)}

/* Buttons */
.btn{
  height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: dodgerblue;
  color:white;
  border:1px solid white;
  border-radius:12px;
  box-shadow:var(--shadow);
  cursor:pointer;
  font-size: 20px;
}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn.danger{
  background:#e25555;border-color:#e25555;
}

/* Notes button: green dot when this location has saved notes */
#notesBtn {
  position: relative; /* anchor the dot */
  border-color: white;
}

.pill{
  font-size:12px;color:var(--muted);
  background:var(--chip);border:1px solid var(--border);
  padding:3px 8px;border-radius:999px
}

/* --- Panels ------------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
}
.panel{
  background:var(--panel);
  border:1px solid darkolivegreen;
  border-radius:16px;
  box-shadow:var(--shadow);
  min-height:180px;
  max-height:70vh;
  overflow:hidden; 
  display:flex;flex-direction:column;
}
.panel header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px dashed var(--border);
}
.panel header h2{margin:0;font-size:20px}
.panel .body{ padding:14px 16px; max-width: 33vw; overflow:auto; flex: 1 1 auto; }

/* Reset list bullets once */
.panel ul { list-style: none; padding-left: 0; }

/* Put the emoji inside the group header itself (ASCII-safe escapes) */
#newsList  .group-h::before { content: "\01F4F0"; display:inline-block; width:1.25em; } /* 📰 */
#mediaList .group-h::before { content: "\25B6\FE0F"; display:inline-block; width:1.25em; } /* ▶️ */
#icsList   .group-h::before { content: "\01F4C5"; display:inline-block; width:1.25em; } /* 📅 */

/* (Optional) nudge alignment */
.group-h::before { transform: translateY(1px); }

/* (Optional) ensure an emoji-capable font */
.group-h::before {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", system-ui, sans-serif;
}

/* List in feeds */
.feed ul{list-style:none;margin:0;padding:0}
.feed li{
  padding:10px 0;
  border-bottom:1px dashed var(--border);
}
.feed li:last-child{border-bottom:none}
.feed li .dot{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  display:inline-block;margin-right:10px;translate:0 -2px;
}

/* Category header (e.g., “Tech”, “Other”) */
.group-head{
  margin:8px 0 6px;
  font-weight:700;color:#d6e3f5;
}

/* --- Badges ------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--muted);font-size:12px;
}

/* --- Modals ------------------------------------------------------------- */
/* overlay */
.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,16,.6);
  transition:opacity .18s ease, transform .18s ease;
  z-index:999;
}
.modal[aria-hidden="true"]{opacity:0;pointer-events:none}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}

/* shell */
.modal .card{
  width:min(900px,94vw);
  max-height:75vh !important;
  display:flex;flex-direction:column;
  background:white;
  color:black;
  font-size: 20px;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;                 /* body scrolls, not the whole card */
}
.modal .head{
  padding:18px 22px;border-bottom:1px dashed var(--border);
}
.modal .head h3{margin:0;font-size:22px}
.modal .body{
  padding:16px 22px;
  overflow:auto;                   /* requested scroll area */
  -webkit-overflow-scrolling: touch; /* smooth iOS momentum scroll */
}
.modal .foot{
  position:sticky;bottom:0;
  display:flex;align-items:center;gap:12px;
  padding:14px 22px;border-top:1px dashed var(--border);
  background:
    /* linear-gradient(to bottom, rgba(20,28,37,0) 0%, rgba(20,28,37,.85) 60%, var(--panel) 100%); */
    linear-gradient(to bottom, white 0%, cornflowerblue 60%, skyblue 100%);
}
.modal .foot .left{margin-right:auto}
/* .modal .foot .btn{display:inline-flex} */
.modal .foot .btn{display:inline}

/* ==================== COUNTDOWN MODAL (⏱️) ==================== */
#countDownModal .card {
  max-width: 420px;
  background: white;
  color: black;
  border: 1px solid #556b2f;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  overflow: visible;           /* was overflow:hidden on .modal .card */
}

#countDownModal .head h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

#countDownModal .body {
  padding: 1rem 1.25rem;
  text-align: center;
}

/* Force a light palette for the native date picker in the Countdown modal */ 
#countDownModal input[type="date"] {
  position: relative;
  z-index: 3;                  /* popover sits above .foot */
  color-scheme: light;          /* <<< key line for iOS/Safari popup */
  background: white;
  color: black;                  /* input text itself */
}

/* Improve the visible input text in WebKit */
/* #countDownModal input[type="date"] { color-scheme: light; color: #fff; }
#countDownModal input[type="date"]::-webkit-datetime-edit,
#countDownModal input[type="date"]::-webkit-datetime-edit-text,
#countDownModal input[type="date"]::-webkit-datetime-edit-year-field,
#countDownModal input[type="date"]::-webkit-datetime-edit-month-field,
#countDownModal input[type="date"]::-webkit-datetime-edit-day-field { color: black; }
#countDownModal input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; } */

#countDownInput { 
  border-radius: 10px;
  border: 1px solid #556b2f;
  background: white;
  color: black;
  height: 40px;
}

/* Optional: make the little calendar icon visible on dark backgrounds */
/* #countDownModal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.9;
} */

#cdGrid button { color: black; }

#countDownModal .btn {
  flex: 1;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
}

#countDownModal .muted {
  opacity: 0.8;
  font-size: 1.15rem;
}

/* Countdown summary list in the modal */
.count-summary-wrap { text-align: left; }
.count-summary-list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.count-summary-list li {
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.95rem;
}
.count-summary-list li:last-child { border-bottom: none; }

/* modal close “x” */
.modal .x{
  width:28px;height:28px;border-radius:10px;
  border:1px solid var(--border);background:var(--chip);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;
}
.modal .x:hover{filter:brightness(1.1)}

/* Row layout used by all source editors (News + Media + Calendar) */
#newsModal .row,
#mediaModal .row,
#calModal .row {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
}
#newsModal .row:last-child,
#mediaModal .row:last-child,
#calModal .row:last-child { border-bottom: none; }

#newsModal .label, #mediaModal .label, #calModal .label { display:flex; align-items:center; gap:12px; font-weight:600; }
#newsModal .col,    #mediaModal .col,    #calModal .col    { position: relative; }
#newsModal textarea, #mediaModal textarea, #calModal textarea {
  width:100%; min-height:120px; resize:vertical;
  background:var(--sunken); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
}
#newsModal .col .x, #mediaModal .col .x, #calModal .col .x { position:absolute; right:8px; top:8px; }
/* Checkboxes in all editors */
#newsModal input[type="checkbox"],
#mediaModal input[type="checkbox"],
#calModal  input[type="checkbox"]{
  inline-size:18px; block-size:18px;
  accent-color:var(--accent); border-radius:4px;
}

/* Reorder modal list */
#orderModal .list{list-style:none;margin:0;padding:0}
#orderModal .list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin:8px 0;
  background:var(--sunken);border:1px solid var(--border);
  border-radius:12px;
  cursor:grab;
}
#orderModal .dragging{opacity:.7}
/* Hide the up/down button cluster in the Reorder modal */
#orderModal .order-controls{
  display:none;
}

/* Clear modal list (locations to remove) */
#clearModal .list{list-style:none;margin:0;padding:0}
#clearModal .list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-bottom:1px dashed var(--border);
}

/* “Did you mean…” picker (location suggestions) */
#pickModal .opts{display:flex;flex-direction:column;gap:14px}
#pickModal label.opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
}
#pickModal label.opt:hover{background:var(--sunken)}
#pickModal input[type="radio"]{
  inline-size:18px;block-size:18px;border-radius:50%;
  accent-color:var(--accent);
}
#pickModal input[type="radio"]:checked + span{
  color:black;
  text-shadow:0 0 12px rgba(106,162,255,.6), 0 0 2px rgba(106,162,255,.9);
}
#pickModal input[type="radio"]:checked ~ .opt-underline{
  border-color:rgba(106,162,255,.45);
}

/* Small helper for faint dashed separators in pick lists */
.opt-underline{
  border-bottom:1px dashed var(--border);
  margin:0 0 6px 0;
}

/* --- Utilities ---------------------------------------------------------- */
.hidden{display:none !important}
.flex{display:flex;gap:10px}
.right{margin-left:auto}

/* --- Tiny tweaks -------------------------------------------------------- */
.keyless{color:var(--muted);font-size:12px}
.today{margin-left:8px}

/* ─────────────────────────────────────────────
   Responsive tweaks (mobile-first overrides)
   Add at the very bottom of app.css
   ───────────────────────────────────────────── */

/* Tablets and down */
@media (max-width: 1024px) {
  /* 3 → 2 columns */
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

  /* Edit modals: a little narrower */
  .modal .card { width: min(720px, 94vw); font-size: 20px; }
}

/* Phones (portrait) */
@media (max-width: 680px) {
  #newsModal .row,
  #mediaModal .row,
  #calModal .row {
    grid-template-columns: 1fr;   /* stack */
    gap: 10px;
    align-items: start;
  }
  /* 2 → 1 column */
  .grid { grid-template-columns: 1fr; gap: 12px; }

  /* Panel padding & headings */
  .panel { 
    max-height:50vh;   
    background:var(--panel);
    border:1px solid darkolivegreen;
    border-radius:16px;
    box-shadow:var(--shadow); 
  }
  .panel .body { padding: 12px; max-width: 100vw; overflow:auto; flex: 1 1 auto; }
  .panel h2, .panel h3 { font-size: 1.05rem; }

  /* Top controls (select/input/buttons) wrap nicely */
  header, header .row, .toolbar, .controls {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  header select, header input[type="text"], header input[type="search"] {
    min-width: 160px; flex: 1 1 240px;
  }
  header .btn { flex: 0 0 auto; }

  /* Mobile layout: show the proxy "Select Location" above the search input */
  /* #locSelProxy{ */
    /* order: 1; */
    /* flex: 1 1 100%;    */
    /* full row */
    /* display: inline-flex;    */
    /* keep your button styling */
  /* } */
  #locInput{
    order: 2;
    flex: 1 1 100%;   /* full row under the proxy */
  }
  #goBtn{
    order: 3;         /* stays to the right / next row as needed */
  }

  /* Hide the native <select> on phones (proxy handles it) */
  #locSel{
    /* display: none !important; */
    order: 1;
    flex: 1 1 100%;   
    display: inline-flex;   
  }

  /* Modals: full-bleed feel, taller scroll area */
  .modal .card {
    width: 96vw;
    max-height: 82vh;
    border-radius: 14px;
    font-size: 20px;
  }
  .modal .head { padding: 14px 16px; }
  .modal .body { padding: 8px 16px; }
  .modal .foot {
    padding: 12px 16px;
    gap: 8px;
    /* flex-wrap: wrap;              allow buttons to wrap on very small phones */
    flex-wrap: inherit;              /* allow buttons to wrap on very small phones */
  }
  .modal .foot .btn { height: 38px; padding: 0 14px; }

  /* Category row layout (News/Media/Calendar editors)
     Desktop uses multi-column; on phones stack vertically. */
  .modal .cat-row {
    display: grid;
    grid-template-columns: 1fr;   /* stack */
    gap: 10px;
    align-items: start;
  }
  .modal .cat-row textarea {
    min-height: 120px;            /* comfortable typing area */
  }
  .modal .cat-row .kill {         /* the small “x” remove button */
    justify-self: end;
  }

  /* Reorder saved locations: denser list on phones */
  #orderModal li { padding: 6px 0; }
  #orderModal .handle { margin-right: 6px; }
}

/* Reorder list — add a flag column */
#orderModal .radio-list li{
  display: grid;
  grid-template-columns: auto 1.6em 1fr; /* handle | flag | label */
  align-items: center;
  gap: .5rem;
}
#orderModal .radio-list .flag{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", system-ui, sans-serif;
  font-size: 1.15em;
  line-height: 1;
  width: 1.6em;
  text-align: center;
}
@media (max-width: 640px){
  #orderModal .radio-list li{ gap: .4rem; }
}

/* Place the Suggest button inline with the category name */
.modal .cat-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal .cat-name input {
  flex: 1 1 auto;          /* input takes the row width */
}

.modal .suggest-ui{
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.modal .suggest-hd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.modal .suggest-hd .muted{ opacity: .7; }

.modal .suggest-list{
  display: grid;
  gap: 6px;
  max-height: 160px;      /* scroll if long */
  overflow: auto;
}

.modal .suggest-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  font-size: 12px;
}

.modal .suggest-left{ display: flex; align-items: center; gap: 6px; }
.modal .suggest-url code{
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.modal .suggest-actions .btn.micro{ height: 24px; line-height: 24px; }
.modal .suggest-empty{ font-size: 12px; opacity: .8; }

/* Notes modal */
.modal .notes-wrap { margin-top: 8px; }
.modal .notes-area {
  width: 100%;
  /* min-height: 140px; */
  /* max-height: 280px; */
  height: 50vh;
  resize: vertical;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.35;
}
.modal .notes-hint {
  opacity: .7;
  font-size: 12px;
  margin-top: 6px;
}

/* Small button variant used for Suggest */
.btn.micro {
  height: 28px;
  padding: 0 8px;
  font-size: 18px;
  line-height: 28px;
}

/* Very small phones */
@media (max-width: 420px) {
  header select, header input[type="text"], header input[type="search"] {
    min-width: 0; flex-basis: 100%;
  }
  /* .modal .foot .btn { flex: 1 1 auto; } */ /* buttons fill width evenly */
  .modal .foot .btn { display: inline; }   /* buttons fill width evenly */
}

#locSel{
  border:1px solid darkolivegreen;
  font-size: 20px;        /* larger label in the closed state */
  line-height: 1.2;
  height: 40px;           /* match your .btn height */
  padding: 8px 12px;      /* balanced hit area */
}

/* Help some browsers use the same size in the opened list */
#locSel option{ font-size: 20px; padding-left: 2px; }

/* Optional: a touch larger on roomy desktops */
@media (min-width: 1200px){
  #locSel{ font-size: 20px; }
}

/* Keep text comfortably large on phones */
@media (max-width: 480px){
  #locSel{ font-size: 20px; }
}

/* Desktop: show the native select, hide proxy button */
#locSelProxy { display: none; }

@media (max-width: 680px), (pointer: coarse) {
  /* Mobile: use our proxy button; keep the real select accessible but hidden */
  /* #locSelProxy { display: inline-flex; } */
  /* #locSel {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  } */

  /* Make the modal nice and wide on mobile */
  #locPickerModal .card { width: min(90vw, 560px); }
  #locPickerList li {
    padding: 10px 12px;
    border-bottom: 1px dashed var(--border, #334);
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
  }
  #locPickerList li:last-child { border-bottom: 0; }
  #locPickerList .flag{
    width: 1.6em;
    text-align: center;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", system-ui, sans-serif;
  }
  #locPickerList .label{ flex:1 1 auto; }
  #locPickerList li[aria-selected="true"] { background: rgba(255,255,255,.06); border-radius: 10px; }
  #locPickerList li.is-placeholder {
    opacity: .65;
  }
}

#locInput{
  font-size: 20px;
  width: 350px;
}

#clearPick, #clearPick option {
  font-size: 20px;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.cat-urls{
  font-size: 20px;
}

#orderBtn{
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* background: darkorange; */
    color: #fff;
    border: 1px solid white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

#clearBtn{
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* background: darkred; */
    color: #fff;
    border: 1px solid white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

/* --- Flush nested news items under the UL --- */
#newsList .group-items{
  margin-left: 0;
  padding-left: 0;           /* kill default 40px indent */
  list-style-position: inside; /* keep bullets but align text flush */
}
#newsList .group-items > li{
  padding: 5px 0;           /* belt-and-suspenders */
  margin: 0;
  border-bottom: 1px solid darkolivegreen;
  list-style: inside;
}

/* --- Flush nested media items under the UL --- */
#mediaList .group-items{
  margin-left: 0;
  padding-left: 0;           /* kill default 40px indent */
  list-style-position: inside; /* keep bullets but align text flush */
}
#mediaList .group-items > li{
  padding: 5px 0;           /* belt-and-suspenders */
  margin: 0;
  border-bottom: 1px solid darkolivegreen;
  list-style: inside;
}

/* --- Flush nested calendar items under the UL --- */
#icsList .group-items{
  margin-left: 0;
  padding-left: 0;           /* kill default 40px indent */
  list-style-position: inside; /* keep bullets but align text flush */
}
#icsList .group-items > li{
  padding: 5px 0;           /* belt-and-suspenders */
  margin: 0;
  border-bottom: 1px solid darkolivegreen;
  list-style: inside;
}

/* Media lane players (scoped to the Media column only) */
#mediaList li.has-player .item-title { margin-bottom: 6px; font-weight: 600; }

#mediaList li.has-player audio,
#mediaList li.has-player video {
  width: 100%;
  display: block;
  border-radius: 10px;
}

#mediaList li.has-player .video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
#mediaList li.has-player .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* Mini control bar above each audio player */
#mediaList li.has-player .a-ctrls{
  display:flex;
  gap:8px;
  margin:4px 0 8px;
  flex-wrap:wrap;
}

/* Weather strip under the title */
#wxbar {
  margin: 8px 0 4px 0;
  font-size: 14px;            /* keeps it subtle even if * { font-size:20px } */
  /* opacity: .85; */
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}

/* Weather strip (full-width row under the title) */
header.bar { flex-wrap: wrap; }            /* allow a second row */

/* Location storage/export status line placement + look */
#locStrg{
  order: 100;            /* push to the end of the header flex flow */
  flex: 1 1 100%;        /* take a full row */
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;           /* matches your subtle header vibe */
}
#locStrg a { text-decoration: underline; }

#wxbar{
  flex: 1 1 100%;                          /* take a full row */
  margin: 6px 0 2px 0;
  font-size: 14px;
  line-height: 1.25;
  opacity: .9;
  letter-spacing: .2px;

  /* show the whole forecast — no clipping */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Stacked F/C lines in the weather strip */
#wxbar .wxline { display: block; margin: 2px 0; }
#wxbar .wxline .label { font-weight: 700; opacity: .95; margin-right: 6px; }

/* Weather bar: emoji link to Weather.com */
#wxbar .wxloc a { text-decoration:none; font-size:1.25rem; line-height:1; }

/* Optional: slightly smaller on narrow screens */
@media (max-width: 640px){
  #wxbar{ font-size: 13px; }
}

/* Cookie storage usage meters */
.usage-wrap { margin: 6px 0 10px; }
.usage-wrap .usage-label { font-size: 12px; opacity: .8; margin-bottom: 4px; }
.usage-wrap .usage-bar   { height: 6px; background: #e9e9e9; border-radius: 10px; overflow: hidden; }
.usage-wrap .usage-fill  { height: 100%; background: limegreen; width: 0; transition: width .3s ease; }

/* Notes button: status lamp */
#notesBtn::after{
  content:""; position:absolute; top:-4px; right:-4px;
  width:8px; height:8px; border-radius:50%;
  /* background: var(--warn, #f6a623);*/ /* orange = no notes */
  /* box-shadow: 0 0 0 2px var(--bg, #0b1116); */
  background: orange; border: 1px solid lightgrey; 
}
#notesBtn.has-notes::after{ background: lime; border: 1px solid white; }  /* green = has notes */
#notesBtn.no-notes::after{ background: orange; border: 1px solid lightgrey; }

/* Countdown button: status lamp */
#countDownBtn {
  position: relative; /* anchor the dot */
}
#countDownBtn::after{
  content:"";
  position:absolute; top:-4px; right:-4px;
  width:8px; height:8px; border-radius:50%;
  /* background: var(--warn, #ffa500); */ /* orange = no countdown */
  /* box-shadow: 0 0 0 2px var(--bg, #0b1116); */
  background: orange; border: 1px solid lightgrey; 
}

#countDownBtn.has-countdown::after{ background: lime; border: 1px solid white; }  /* green = has countdown */
#countDownBtn.no-countdown::after{  background: orange; border: 1px solid lightgrey; }  /* orange = none */

/* Accept older JS that toggled plural class names */
#countDownBtn.has-countdowns::after{ background: lime; border: 1px solid white; }
#countDownBtn.no-countdowns::after{  background: orange; border: 1px solid lightgrey; }

/* Hide the inline countdown summary toggle entirely */
#countSummaryToggle { display: none !important; }
#countSummaryWrap { display: none !important; }

.cd-fallback { position: relative  !important; }
.cd-pop { position: sticky !important; z-index: 900  !important; }

/* Web Sites button: status lamp (match casing used by JS: has-webSites / no-webSites) */
#webSitesBtn { position: relative; }
#webSitesBtn::after{
  content:"";
  position:absolute; top:-4px; right:-4px;
  width:8px; height:8px; border-radius:50%;
  background: orange;                 /* default = no sites */
  border: 1px solid lightgrey;
}
#webSitesBtn.has-webSites::after{ background: lime; border: 1px solid white; }
#webSitesBtn.no-webSites::after{  background: orange; border: 1px solid lightgrey; }

/* Optional aliases (lower-case safety net) */
#webSitesBtn.has-websites::after{ background: lime; border: 1px solid white; }
#webSitesBtn.no-websites::after{  background: orange; border: 1px solid lightgrey; }

#dataBtn { border-color:#fff; }

#titleText { font-size: 30px; }

/* --- TTS Robot (avatar_voice port) --------------------------------------- */
#ttsModal .robot { user-select: none; }

#ttsModal .face-plate {
  fill: grey;
  stroke: var(--border);
  stroke-width: 2;
}

#ttsModal .eye {
  fill: deepskyblue;
}

#ttsModal .mouth {
  fill: none;
  stroke: deepskyblue;
  stroke-width: 3;
  stroke-linecap: round;
}

/* --- TTS Teleprompter --------------------------------------------------- */
#ttsModal .tele{
  margin-top: 8px;
  max-height: 140px;
  overflow: auto;
  background: var(--sunken);
  border: 1px solid #556b2f;
  border-radius: 12px;
  padding: 8px 10px;
}
#ttsModal .tele ul{
  list-style: disc inside;
  margin: 0;
  padding-left: 0;
}
#ttsModal .tele li{
  padding: 2px 0;
  font-weight: 400;       /* unread = normal */
  opacity: .9;
}
#ttsModal .tele li.active{
  font-weight: 800;       /* current line = BOLD */
  opacity: 1;
}

/* --- Weather bar layout & globe button --- */
#wxbar .wxwrap{display:flex;align-items:flex-start;gap:8px;}
#wxbar .wxstack{display:flex;flex-direction:column;line-height:1.25;}
#wxbar .wxline{display:block;margin:2px 0;} /* ← no white-space override */
#wxbar .wxline .label{font-weight:600;margin-right:.35rem;}

#wxbar .wxglobe{
  display:inline-flex;justify-content:center;align-items:center;
  width:28px;height:28px;border-radius:999px;
  text-decoration:none;font-size:18px;line-height:1;
  background:rgba(255,255,255,.08); /* tweak to match your theme */
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.35);
}
#wxbar .wxglobe:hover{filter:brightness(1.1)}
#wxbar .wxglobe.disabled{opacity:.5;pointer-events:none;cursor:default}

/* === Clamp all modal content areas to 65vh and make them scroll === */
.modal .card { display:flex; flex-direction:column; overflow: auto; } /* already present but safe */
.modal .card > .body{
  max-height: 75vh;               /* cap scrollable content area */
  overflow: auto;                 /* ensure scrolling */
  -webkit-overflow-scrolling: touch;
}
#ttsModal .body {
  overflow: visible !important;
}

/* Desktop (default): show native select; hide proxy button */
#locSel       { display: inline-block; }
#locSelProxy  { display: none; }

/* Optional: use small-viewport units on mobile to dodge iOS toolbar shrink */
@media (max-width: 680px){
  .modal .card > .body{ max-height: 65svh; }
  #locSel{
    width: 90vw;          /* visual width */
    max-width: 90vw;
    display: block;       /* avoid flex squeezing */
    min-width: 0;         /* allow shrinking if needed */
  }
  /* #locSel      { display: none !important; } */
  /* #locSelProxy { display: inline-flex !important; } */

  /* Make the proxy feel like a field (optional) */
  /* #locSelProxy{ */
    /* min-width: 260px; */
    /* if you want full row on small screens: */
    /* width: 100%; */
  /* } */
}

/* Spinning globe in weather bar */
.wxglobe{ display:inline-block; width:1.25em; text-align:center; }
.wxglobe.disabled{ opacity:.6; pointer-events:none; }

/* Separate selected city and the "Here" stack */
#wxbar .wxwrap + .wxwrap {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: 1px dashed #445;
}

/* === Step 3: Weather bar layout + wrapping tweaks ===================== */
/* Keep the globe + text aligned and allow the text column to shrink */
#wxbar .wxwrap{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block: 0.15rem;
}

#wxbar .wxglobe{
  text-decoration: none;
  line-height: 1;
  display: inline-block;
}
#wxbar .wxglobe.disabled{
  opacity: 0.4;
  pointer-events: none;
}

/* Stack: time + F-line + C-line */
#wxbar .wxstack{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;              /* allows wrapping inside flex */
}

/* Subtle time line */
#wxbar .wxtime{
  font-size: 0.92em;
  /* opacity: 0.85; */
}

/* Let long day lists wrap naturally, even in narrow screens */
#wxbar .wxline{
  white-space: normal;        /* override any nowrap */
  overflow-wrap: anywhere;    /* modern browsers */
  word-break: normal;         /* keep words intact where possible */
  line-height: 1.28;
}
#wxbar .wxline .label{
  font-weight: 600;
  margin-right: 0.35rem;
  white-space: nowrap;        /* keep “F:” / “C (Here):” glued */
  font-variant-numeric: tabular-nums;  /* steadier digits */
}

/* Slight separation when we show the additional “Here” block */
#wxbar .wxwrap.here{
  margin-top: 0.3rem;
  padding-top: 0.25rem;
  border-top: 1px dashed rgba(0,0,0,.15);
}

/* Compact on small screens */
@media (max-width: 480px){
  #wxbar .wxline{ font-size: 0.96em; }
  #wxbar .wxtime{ font-size: 0.88em; }
}

/* FX rows under the weather stack */
#wxbar .fxblock { margin-top: .25rem; }
#wxbar .fxline { margin: .15rem 0; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
#wxbar .fx-pair select { border: 1px solid darkolivegreen; font: inherit; padding: 2px 6px; }
#wxbar .fx-pair .sep { opacity: .7; }
#wxbar .fx-pair .fx-rate { margin-left: .25rem; }  /* opacity: .85; */
#wxbar .fx-mini input.fx-amt { width: 7.5ch; padding: 2px 6px; font: inherit; border-radius: 10px; border: 1px solid #556b2f; background: white; color: black; height: 40px; }
#wxbar .fx-mini .eq { opacity: .7; }

/* (A) Small visual spacing for the toggle button */
#wxbar .fx-mini .fx-toggle { margin-right: .25rem; }

/* (B) If you ever switch JS to use [hidden], make sure it wins over flex */
#wxbar .fxline[hidden],
#wxbar .fx-mini .fx-mini-io[hidden] { display: none !important; }

/* (C) (Optional) Correct the selector for the live rate label */
#wxbar .fx-mini .fx-rate { margin-left: .25rem; }  /* opacity: .85; */

/* --- Fix teleprompter visibility ---------------------------------- */
#ttsModal .tele { 
  color: var(--text); 
  font-size: 1rem; 
  line-height: 1.4; 
}

/* --- Force teleprompter to render below robot visibly --- */
#ttsModal .body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible !important;
}

#ttsModal .robot {
  flex: 0 0 auto;
  margin-bottom: 8px;
  z-index: 1;
}

#ttsModal .tele {
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: white;
  border: 1px solid #556b2f;
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  max-height: 160px;
  overflow-y: auto;
}

/* teleprompter visibility + basics */
.tele { display:block; max-height: 12rem; overflow:auto; margin-top:.5rem; }
.tele ul { margin:0; padding-left:1rem; }
.tele li { line-height:1.35; }
.tele li.active { outline:2px solid rgba(120,180,255,.45); border-radius:.35rem; padding:.1rem .25rem; }

/* --- Final Teleprompter Visibility Normalization --- */
#ttsModal .tele,
.tele {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: white;
  border: 1px solid #556b2f;
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  height: 100px;
  min-height: 20vh;
  max-height: 20vh;
  overflow-y: auto;
}

/* Even if HTML includes 'hidden', force it to render */
#ttsModal .tele[hidden],
#ttsModal .tele.hidden,
.tele[hidden],
.tele.hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#ttsModal .tele:empty::before {
  content: "Teleprompter ready — awaiting text";
  display: block;
  text-align: center;
  opacity: .5;
  font-style: italic;
  padding: .5rem 0;
}

/* keep radio inline with text */
.radio-row {
  display: inline;
  align-items: center;
  gap: 0.4rem;
}

.cust-btn {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

/* Global = subtle green */
.cust-btn.cust-global {
  border-color: rgba(60, 180, 120, 0.7);
}

/* Local = subtle orange */
.cust-btn.cust-local {
  border-color: rgba(255, 150, 70, 0.75);
}

/* ✨ Subtle hover polish */
.cust-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.cust-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

#custBtnModal .body {
  position: relative;
  overflow: visible;
}

#custBtnModal input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.35);
  background: #fff;
  font-size: 0.95rem;

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.08);
}

#custBtnModal input:focus {
  outline: none;
  border-color: rgba(60, 140, 255, 0.8);
  box-shadow:
    0 0 0 2px rgba(60, 140, 255, 0.15),
    inset 0 1px 2px rgba(0,0,0,0.08);
}

#custBtnModal label {
  display: block;
  width: 100%;
  max-width: none;
}

#custBtnModal h2 {
  display: block;
  width: 100%;
}

#custBtnModal h2 input[type="text"],
#custBtnModal h2 input[type="url"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Emoji picker — constrained to modal */
.emoji-picker {
  position: absolute;
  top: 0;                /* below modal header / emoji button */
  left: 50%;
  transform: translateX(-50%);

  width: 40vw;
  max-height: 45vh;  
  overflow-y: auto;         /* 👈 enable scrolling */

  background: linear-gradient(180deg, #2b2a28, #1f1e1c);
  border-radius: 12px;
  padding: 12px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;

  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  z-index: 1000;

  scroll-behavior: smooth;
}

.emoji-picker::-webkit-scrollbar {
  width: 6px;
}
.emoji-picker::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}

@media (max-width: 680px) {
  .emoji-picker {
    width: 60vw;
    max-height: 40vh;
  }
}

@media (max-width: 480px){
  .emoji-picker {
    width: 60vw;
    max-height: 40vh;
  }
}

.emoji-choice {
  font-size: 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.emoji-choice:hover {
  transform: scale(1.2);
}

.cust-section-header {
  margin: 12px 0 6px;
  font-size: 0.95rem;
}

.cust-section-sub {
  margin-left: 6px;
  color: #777;
  font-size: 0.85rem;
}

.cust-btn-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.cust-btn-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cust-btn-url {
  font-size: 0.8rem;
  color: #666;
  word-break: break-all;
}

.cust-btn-actions {
  display: flex;
  gap: 6px;
}

.cust-draggable {
  transition: transform 180ms ease, opacity 120ms ease;
  will-change: transform;
}

.cust-dragging {
  opacity: 0.85;
  z-index: 5;
}

.cust-drop-target {
  outline: 2px dashed rgba(0,0,0,0.15);
  outline-offset: -4px;
}

.cust-draggable:focus {
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
}

#custBtn {
  border: 1px solid cornflowerblue;
}

@keyframes gentleHeartbeat {
  0%   { transform: scale(1);   }
  20%  { transform: scale(1.12); }
  40%  { transform: scale(1);   }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(1);   }
  100% { transform: scale(1);   }
}

/* Shared animated icon style */
.locStrg-icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 8px;

  animation: gentleHeartbeat 1.2s ease-in-out 8;
  animation-fill-mode: both;

  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .locStrg-icon {
    animation: none;
  }
}

.locStrg.safe   .locStrg-icon { filter: drop-shadow(0 0 4px rgba(0,180,0,.35)); }
.locStrg.warn   .locStrg-icon { filter: drop-shadow(0 0 4px rgba(255,120,0,.45)); }
.locStrg.alert  .locStrg-icon { filter: drop-shadow(0 0 4px rgba(0,120,255,.45)); }

.flight-tracker-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flight-tracker-input-wrap input {
  flex: 1;
}

.flight-tracker-row small {
  display: block;
  margin-top: 6px;
  opacity: 0.8;
}



/* ===============================
   PDF GLOBAL NORMALIZATION
=============================== */

#bookContent {
  margin: 0;
  padding: 0;
}

#bookContent * {
  box-sizing: border-box;
}

/* ===============================
   IMAGE SAFETY — PDF ONLY
=============================== */
#bookContent img {
  page-break-inside: avoid !important;
  break-inside: avoid !important;

  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.book-pdf-btn {
  appearance: none;
  border: none;
  background: transparent;

  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;

  padding: 0.5rem 0.75rem;
  border-radius: 8px;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Hover */
.book-pdf-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Active (press) */
.book-pdf-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Keyboard focus */
.book-pdf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 120, 255, 0.5);
}

/* Disabled (if you ever add it) */
.book-pdf-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.book-modal-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===============================
   COVER PAGE — FINAL (LOCKED)
=============================== */

.book-cover {
  /* ❌ NO page-break-before */
  page-break-after: always;
  break-after: page;

  margin: 0;
  padding: 0;
  text-align: center;
}

/* 🔒 Cover safety ONLY */
.book-cover {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ===============================
   Cover Header (PDF-safe)
=============================== */

.book-cover-header {
  margin: 0.5in auto 0.35in;
  max-width: 100%;
  text-align: center;

  /* 🔒 FORCE vertical stacking (overrides legacy flex/grid) */
  display: block !important;
  background: none !important;
}

.book-title,
.book-subtitle {
  text-align: center;
  display: block;
}

/* ===============================
   COVER — TYPOGRAPHY (FINAL)
=============================== */

.book-title {
  font-family: system-ui, sans-serif;
  font-size: 80px;              /* Large like geo headers */
  font-weight: 700;
  letter-spacing: 0.3px;        /* subtle, NOT stretched */
  margin: 0;
  color: #1f2933;
}

.book-subtitle {
  font-family: system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  margin-top: 8px;
  color: #4b5563;
}

/* Subtle divider under subtitle (PDF-safe) */
.book-cover-divider-img {
  display: block;
  width: 60%;
  max-width: 520px;   /* prevents absurd scaling on large screens */
  height: auto;

  margin: 22px auto 28px;
}

.cover-photo-wrap {
  margin: 0;
}

.cover-photo {
  display: block;
  margin: 0 auto;

  max-width: 90%;
  max-height: 6.5in;   /* 🔒 NEVER splits */
  object-fit: contain;

  border-radius: 12px;
}

.book-toc {
  page-break-before: always;
  break-before: page;

  page-break-inside: avoid;

  margin: 0;
  padding: 0.5in;
}

.book-global {
  margin: 0;
  padding: 0;
}

/* ===============================
   GEOLOCATION PAGES — FINAL LOCK
=============================== */
.book-geo {
  page-break-before: always;
  break-before: page;

  margin: 0;
  padding: 0;
}

/* Heading hugs the top but respects printer safety */
.book-geo > h2 {
  text-align: center;
  font-size: 28px;        /* prominent but not cover-sized */
  font-weight: 700;
  letter-spacing: 0.6px;
  margin: 0.4in 0 0.35in;
}

/* Slight visual hierarchy below cover */
.book-geo.book-global > h2 {
  font-size: 30px;
}

/* Prevent heading orphaning */
.book-geo h2,
.book-geo h3 {
  page-break-after: avoid;
}

/* Allow normal flow below */
.book-geo p,
.book-geo ul,
.book-geo ol,
.book-geo li {
  page-break-inside: auto;
}

/* HR rules — book only */
#bookContent hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#bookContent hr:first-child {
  display: none;
}

#bookContent code {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 🔒 PDF SAFETY — FORCE URL BREAKS (html2pdf/jsPDF) */
#bookContent a {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;

  font-size: 0.95em;
  line-height: 1.25;
}

#bookContent li,
#bookContent p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==================================================
   Base Button Style (ALL emoji buttons)
================================================== */
.btn {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;

  cursor: pointer;
}

/* ✨ Hover polish */
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ⬇️ Pressed */
.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(0, 0, 0, 0.18);
}



/* ===============================
   🏞️ Photos – Thumbnail Grid
   =============================== */

#photosModal .card {
  max-height: 75vh;
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

#photosModal .body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  flex: 1;
}

#photosModal .photo-thumb {
  display: flex;            /* KEEP FLEX */
  flex-direction: column;
  align-items: center;
  gap: 6px;

  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.photo-thumb img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

.photo-caption {
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: #444;
  max-width: 100px;
  word-wrap: break-word;
}

.photo-fallback {
  width: 100px;
  height: 100px;
  background: linear-gradient(#f7f7f7, #ececec);
  border-radius: 10px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  color: #555;
  box-shadow: inset 0 0 0 1px #ddd;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.photo-fallback::before {
  content: "📷";
  font-size: 24px;
  display: block;
  margin-bottom: 4px;
}

.photo-thumb:hover .photo-fallback {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* ===============================
   🏞️ Photos – Editor Input Width
   =============================== */

#photosModal .photos-editor {
  max-width: 90%;
}

#photosModal .photos-editor input[type="text"],
#photosModal .photos-editor input[type="url"] {
  width: 100%;
  box-sizing: border-box;
}

/* ===============================
   🏞️ Photo Viewer Image Sizing
=============================== */

.photo-full {
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.photo-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.photos-list-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.photo-edit-thumb {
  width: 120px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}

.book-loc-section {
  margin-bottom: 20px;
}

/* ===============================
   Modal Thumbnail Grid (UI only)
=============================== */
.book-photo-grid {
  /* display: flex; */
  display: block;          /* explicit default */
  gap: 8px;
  margin: 8px 0 12px;
}

.book-photo-grid img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

@media print {
  .book-photo-grid {
    display: flex;
  }
}

@media (max-width: 768px) {
  .photo-full {
    max-width: 100%;
  }
}

/* ===== PHOTO SPREAD PAGES ===== */

/* Single image */
.photo-single img {
  max-width: 100%;
  max-height: 7.5in;
}

/* Two images */
.photo-pair {
  display: flex;
  gap: 0.25in;
}

.photo-pair img {
  width: 48%;
  object-fit: contain;
}

/* Stacked alternative */
.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25in;
}

/* Three-image collage */
.photo-collage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.25in;
}

.photo-collage img:first-child {
  grid-row: span 2;
}

/* ===============================
   🔒 PRINT SAFETY — NEVER SPLIT
=============================== */
.book-photo,
.book-photo * {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.book-photo-page {
  page-break-before: always;
  break-before: page;

  page-break-inside: avoid;
  break-inside: avoid;

  /* min-height: 100vh;   */   /* or 10.5in for letter */

  /* ✅ PRINT-SAFE HEIGHT */
  height: 100vh;  /* 10.5in; */

  display: flex;
  flex-direction: column;   /* 🔴 REQUIRED */
  align-items: center;
  justify-content: center;

  padding: 0;
  /* 0.5in; */
  box-sizing: border-box;
  overflow: auto;  /* hidden; */   /* legacy browser safety */

  /* outline: 5px dashed red;  */  /* TEMPORARY REMOVE AFTER TESTING */
}

/* FIRST photo page after header stays on same page */
.book-geo h2 + .book-photo-page {
  page-break-before: auto;
  break-before: auto;
}

/* ===============================
   Universal Photo Styling
=============================== */
.book-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.book-photo img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.book-photo-caption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #555;
  text-align: center;
  max-width: 90%;
}

/* ===============================
   Single Image (Full-Page Spread)
=============================== */
.book-photo-page.photo-single {
  flex-direction: column;
}

.book-photo-page.photo-single img {
  max-height: 7.5in;
}

/* ===============================
   Two Images — Side-by-Side
=============================== */
.book-photo-page.photo-pair {
  display: flex;
  align-items: stretch;        /* IMPORTANT */
  gap: 0.35in;
}

.book-photo-page.photo-pair .book-photo {
  flex: 1;
  height: 100%;
}

.book-photo-page.photo-pair .book-photo-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  width: 100%;
  height: 100%;
  align-items: center;
}

.book-photo-page.photo-pair img {
  width: 100%;
  height: auto;
  max-height: 6.75in;          /* Taller than before */
  object-fit: contain;
}

/* ===============================
   Two Images — Stacked (Alternating Pages)
=============================== */
.book-photo-page.photo-stack {
  flex-direction: column;
  gap: 0.35in;
}

.book-photo-page.photo-stack img {
  max-height: 3.25in;
}

/* ===============================
   Three Images — Collage Layout
=============================== */
.book-photo-page.photo-collage {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.25in;
}

.book-photo-page.photo-collage .book-photo:first-child {
  grid-row: span 2;
}

.book-photo-page.photo-collage img {
  width: 100%;
  height: 100%;
  max-height: 3.5in;
  object-fit: contain;
}

/* ===============================
   Cover Page Caption
=============================== */
.book-cover-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-cover-image .book-photo-caption {
  margin-top: 12px;
  font-size: 13px;
  color: #444;
}

/* ===============================
   Force Content to Start Cleanly After Photos
=============================== */
/* Content ALWAYS starts fresh after photos */
/* .book-photo-page + div {
  page-break-before: always;
  break-before: page;
} */

/* ===============================
   tighten collage balance
=============================== */
.book-photo-page.photo-collage img {
  max-height: 2.75in; /* instead of 3in */
}

/* ===============================
   📚 PDF — 4 Photo Grid (Magazine)
=============================== */
.book-photo-page.photo-grid-4 .book-photo-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ===============================
   maximum safety on older browsers
=============================== */
.book-photo-page {
  flex-direction: column;
  overflow: hidden;
}

.book-photo-page > h2,
.book-photo-page > .book-geo-header-repeat {
  width: 100%;
  text-align: center;
}

.book-photo-wrap {
  width: 100%;
  height: 100%;
  display: block;
}

.book-photo-section {
  page-break-before: always;
  break-before: page;
}

.book-photo-section > .book-geo-header-repeat {
  margin-bottom: 0.35in;
  text-align: center;
}

/* ===============================
   Typography Tweaks
=============================== */
.book-geo h2 {
  font-size: 22px;
  letter-spacing: 0.4px;
}

.book-geo h3 {
  font-size: 16px;
  margin-top: 18px;
}

.book-geo p,
.book-geo li {
  font-size: 13px;
  line-height: 1.45;
}

/* Repeated headers on photo/content pages */
.book-geo-header-repeat {
  margin-bottom: 0.35in;
  text-align: center;
}

/* ===============================
   📘 Book MODAL layout only
   (NO PDF impact)
=============================== */

/* Push content in from sides */
#bookModal .book-geo {
  padding: 0 40px;
}

/* Optional: tighten Global section */
#bookModal .book-geo.book-global {
  padding-top: 10px;
}

/* Visual divider between sections */
#bookModal .geo-divider {
  margin: 24px 40px;
  border: none;
  border-top: 1px solid #e5e5e5;
}

/* Optional: soften section rhythm */
#bookModal .book-geo h2 {
  margin-top: 10px;
}

/* =========================================
   Book Modal — Forged Double-Lance Divider
   Long taper, rounded shoulders, sharp tips
========================================= */

#bookModal hr.geo-divider {
  all: unset;
  display: block !important;
  position: relative !important;
  margin: 25px 40px !important;
  height: 14px !important;
}

#bookModal hr.geo-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: 7px;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.15)
  );

  /* LONG forged lance geometry */
  clip-path: polygon(
    /* LEFT TIP → CENTER (top half) */
    0% 50%,           /* needle point */
    4% 49%,
    8% 48%,
    14% 47%,
    22% 46%,
    30% 44%,
    38% 42%,
    44% 38%,
    49% 24%,          /* ← was 48% 26% */
    50% 20%,          /* ← was 50% 18% */

    /* CENTER → RIGHT TIP (top half) */
    51% 24%,          /* ← was 52% 26% */
    56% 38%,
    62% 42%,
    70% 44%,
    78% 46%,
    86% 47%,
    92% 48%,
    96% 49%,
    100% 50%,         /* needle point */

    /* bottom mirror */
    96% 51%,
    92% 52%,
    86% 53%,
    78% 54%,
    70% 56%,
    62% 58%,
    56% 62%,
    51% 76%,          /* ← was 52% 74% */
    50% 80%,          /* ← was 50% 82% */
    49% 76%,          /* ← was 48% 74% */
    44% 62%,
    38% 58%,
    30% 56%,
    22% 54%,
    14% 53%,
    8% 52%,
    4% 51%
  );
}

/* Center ornament */
#bookModal hr.geo-divider::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 14px;
  color: rgba(0,0,0,0.55);
  background: #fff;
  padding: 0 10px;
  z-index: 1;
}

#bookModal .book-geo > h2 {
  letter-spacing: 0.2px;
}

/* ===============================
   📘 Book MODAL — Thumbnail Grid
   =============================== */

#bookModal .book-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  padding: 8px 0;
}

#bookModal .book-photo-grid img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* ===============================
   📸 Large Photo View — FINAL FIX
=============================== */

#photosModal .card {
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#photosModal .card .body {
  flex: 1 1 auto;
  overflow-y: auto;   /* ✅ allow scroll in list/edit */
  display: flex;
  flex-direction: column;
}

/* ===============================
   📸 Photos Modal — VIEWER MODE ONLY
   (Hard constrain layout so image can "contain" correctly)
=============================== */

#photosModal.mode-viewer .card{
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex;
  flex-direction: column;
}

#photosModal.mode-viewer .card .body{
  flex: 1 1 auto;
  min-height: 0;               /* critical */
  overflow: hidden !important;  /* no scroll in viewer */
  display: flex;
  flex-direction: column;
}

#photosModal.mode-viewer #photosList{
  flex: 1 1 auto;
  min-height: 0;               /* critical */
  display: flex;
}

#photosModal.mode-viewer .photo-view{
  flex: 1 1 auto;
  /* min-height: 0;           */ /* ✅ critical */
  min-height: 70vh;          
  display: flex;
  flex-direction: column;
}

#photosModal.mode-viewer .photo-view-stage{
  flex: 1 1 auto;
  min-height: 0;               /* critical */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* JS will set these live */
  --stage-w: 0px;
  --stage-h: 0px;
}

/* This is the actual "contain" behavior you want */
#photosModal.mode-viewer .photo-full{
  width: var(--stage-w) !important;
  height: var(--stage-h) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Keep controls visible */
#photosModal.mode-viewer .photo-nav{
  flex: 0 0 auto;
}

#photosModal.mode-viewer .photo-close{
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 8px 12px 0;
}

/* ===============================
   📸 Photos Modal — Thumbnail Grid (FIX)
=============================== */

#photosModal .photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 110px);
  justify-content: start;
  gap: 14px;
  padding: 8px 2px;
  align-items: start;
}

/* Hover polish */
#photosModal .btn-photo-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}


.photo-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image stage takes remaining space */
.photo-view-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 90vh;
  flex: 1 1 auto;              /* ✅ take remaining height */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

/* Prev / Next bar stays visible */
.photo-nav,
.photo-close {
  flex: 0 0 auto;
}

.photo-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 8px;

  /* Mobile safety */
  position: sticky;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.7),
    rgba(255,255,255,0)
  );
}

@media (max-width: 600px) {
  .photo-nav button {
    flex: 1;
  }

  .photo-view-stage {
    padding-bottom: 8px;
  }
}


/* Close button never overlaps image */
.photo-close {
  align-self: flex-end;
  margin: 8px 12px 0;
}

/* ===============================
   📸 Photos Modal — Thumbnail Grid (FINAL, CLEAN)
=============================== */

#photosModal .photos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  padding: 8px 2px;
  align-items: start;
  justify-items: center;
}

#photosModal .photo-thumb{
  width: 110px;
  min-height: 150px;              /* allows 1–2 lines of caption */
  padding: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transform: none;

  cursor: pointer;
}

/* Image */
#photosModal .photo-thumb img,
#photosModal .photo-thumb-img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Caption — safe for long strings */
#photosModal .photo-caption{
  width: 100px;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: #444;

  display: -webkit-box;
  line-clamp: 2;                /* ✅ standard (draft) */
  -webkit-line-clamp: 2;        /* ✅ current browser support */
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Placeholder */
#photosModal .photo-fallback{
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

/* Hide navigation unless viewer mode */
#photosModal:not(.mode-viewer) .photo-nav {
  display: none !important;
}

/* 🔒 Footer navigation only visible in viewer mode */
#photosModal:not(.mode-viewer) .photo-prev-footer,
#photosModal:not(.mode-viewer) .photo-next-footer {
  display: none !important;
}

/* Footer base */
#photosModal .modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Left = navigation */
#photosModal .modal-footer .footer-left {
  display: flex;
  gap: 8px;
}

/* Right = actions */
#photosModal .modal-footer .footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto; /* 🔑 pushes right group */
}

/* Hide nav unless viewer mode */
#photosModal:not(.mode-viewer) .photo-prev-footer,
#photosModal:not(.mode-viewer) .photo-next-footer {
  display: none !important;
}

/* Mobile fallback (optional, if needed) */
@media (max-width: 640px) {
  #photosModal .modal-footer {
    flex-wrap: wrap;
  }

  #photosModal .modal-footer .footer-left,
  #photosModal .modal-footer .footer-right {
    width: 100%;
    justify-content: center;
  }
}


/* ===============================
   📘 PRINT ENGINE — LETTER
=============================== */

@page {
  size: Letter;
  margin: 0.5in;
}

/* ===============================
   📘 Book Print Page
=============================== */

body.book-print {
  background: #fff;
  color: #111;
}

/* Remove app chrome */
body.book-print > header,
body.book-print button,
body.book-print .book-modal-footer {
  display: none !important;
}

/* Root wrapper */
.bookPrintRoot {
  width: 100%;
  margin: 0;
}

/* Optional screen helper (never printed) */
.bookPrintHelp {
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

@media print {
  .bookPrintHelp {
    display: none !important;
  }
}

/* ===============================
   📘 SECTION FLOW
=============================== */

body.book-print section {
  break-inside: avoid;
}

/* ===============================
   📘 FULL-PAGE PHOTO RULES
=============================== */

/* Each photo = its own printed page */
.book-photo-page {
  break-before: page;
  break-after: page;
  page-break-before: always;
  page-break-after: always;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image container */
.book-photo-wrap {
  max-width: 100%;
  max-height: 100%;
}

/* Image scaling — NEVER crop */
.book-photo-wrap img {
  max-width: 60%; /* 100%; */
  max-height: 60%; /* 100%; */
  height: auto;
  width: auto;
  object-fit: contain;
}


/* ===============================
   📘 FULL PAGE PHOTO LAYOUT (PRINT SAFE)
=============================== */

@media print {

  .book-cover-divider-img {
    width: 55%;
  }

  /* Page setup */
  @page {
    size: Letter;
    margin: 0.5in;
  }

  body.book-print {
    background: #fff;
    color: #111;
  }

  /* Remove app chrome */
  body.book-print > header,
  body.book-print .book-modal-footer,
  body.book-print button,
  .bookPrintHelp {
    display: none !important;
  }

  /* One photo per page */
  body.book-print .book-photo-page {
    page-break-after: always;
    break-after: page;

    width: 100%;

    /* 🔑 CRITICAL FIX */
    height: 90vh;  /* 10.5in; */

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden; /* prevents bleed */
  }

  /* Wrapper fills allowed area */
  body.book-print .book-photo-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image always stays inside */
  body.book-print .book-photo-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-label {
  font-weight: 600;
  opacity: 0.85;
}

/* Mobile bits */
@media (max-width: 640px) {

  /* Card layout */
  .modal .card {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
  }

  /* Scrollable body — reserve space for footer */
  .modal .body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Footer */
  .modal .foot {
    position: sticky;
    bottom: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;            /* 🔑 prevent wrapping */

    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));

    background: linear-gradient(
      to top,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.6)
    );
  }

  /* Labels */
  .modal .foot .foot-label {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
  }

  /* Buttons — slightly smaller but still tappable */
  .modal .foot .btn {
    min-width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 auto;
  }

  /* Cancel + tutorial buttons */
  #dataCancel,
  .guide-trigger {
    min-width: 36px;
    height: 36px;
    padding: 0;
  }
}



/* End of file */