/* Hippocampus - Custom Styles */

/* Force light mode unconditionally.
   Bulma 1.0 sets dark values on :root by default and only applies light values
   inside @media (prefers-color-scheme: light). Since app.css loads after Bulma,
   declaring these seed variables here (same :root specificity, later cascade)
   overrides Bulma's dark defaults for all OS color scheme preferences. */
:root {
  color-scheme: light;

  /* Scheme brightness seed — controls which direction all derived colors go */
  --bulma-scheme-brightness: light;
  --bulma-scheme-h: 221;
  --bulma-scheme-s: 14%;

  /* Background lightness scale (light = high L values) */
  --bulma-scheme-main-l: 100%;
  --bulma-scheme-main-bis-l: 98%;
  --bulma-scheme-main-ter-l: 96%;
  --bulma-background-l: 96%;

  /* Border lightness scale */
  --bulma-border-weak-l: 93%;
  --bulma-border-l: 86%;

  /* Text lightness scale (light = low L values = dark text) */
  --bulma-text-weak-l: 48%;
  --bulma-text-l: 29%;
  --bulma-text-strong-l: 21%;
  --bulma-text-title-l: 14%;

  /* Invert scale (used for dark-on-light contrasts) */
  --bulma-scheme-invert-ter-l: 14%;
  --bulma-scheme-invert-bis-l: 7%;
  --bulma-scheme-invert-l: 4%;

  /* Light/dark palette adjustments */
  --bulma-light-l: 90%;
  --bulma-light-invert-l: 20%;
  --bulma-dark-l: 20%;
  --bulma-dark-invert-l: 90%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-soft-invert-l: 20%;
  --bulma-bold-invert-l: 90%;
}

/* Color palette */
:root {
  --periwinkle-light: #e4f4f2;
  /* Accent used by the widget pages. Defaults to the Hippocampus teal; the
     standalone widgets build overrides it to plum in its base template. */
  --accent: #2a9d8f;
  --accent-rgb: 42, 157, 143;
  --periwinkle-dark: var(--accent);

  /* Wire teal into Bulma 1.0's primary color (HSL: 173, 58%, 39%) */
  --bulma-primary-h: 173deg;
  --bulma-primary-s: 58%;
  --bulma-primary-l: 39%;

  /* Transparent body so html gradient shows through */
  --bulma-body-background-color: transparent;

  /* Override Bulma 1.0 font family CSS custom properties */
  --bulma-family-primary: 'Open Sans', sans-serif;
  --bulma-family-secondary: 'Open Sans', sans-serif;
  --bulma-family-sans-serif: 'Open Sans', sans-serif;
  --bulma-family-code: monospace;
}

html {
  background: radial-gradient(ellipse at 60% 10%, #bde4df 0%, var(--periwinkle-light) 60%);
  min-height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: transparent !important;
  min-height: 100vh;
}

/* Serif for display headings and navbar */
.title, .subtitle, h1, h2, h3,
.navbar, .navbar-item, .navbar-brand {
  font-family: 'Libre Baskerville', Georgia, serif;
}


/* Status colors — used by the Applications page pill select */
.status-applying    { background-color: #b8d8fc !important; color: #222 !important; }
.status-likely      { background-color: #cce4fd !important; color: #222 !important; }
.status-considering { background-color: #b8b0e8 !important; color: #222 !important; }
.status-unlikely    { background-color: #e8b8b8 !important; color: #222 !important; }
.status-not_applying{ background-color: #c8c8c8 !important; color: #222 !important; }
.status-applied     { background-color: #43A047 !important; color: #fff !important; }
.status-accepted    { background-color: #a0d8a0 !important; color: #222 !important; }
.status-deferred    { background-color: #f5d080 !important; color: #222 !important; }
.status-waitlisted  { background-color: #f5c890 !important; color: #222 !important; }
.status-rejected    { background-color: #f0a0a0 !important; color: #222 !important; }
.status-enrolled    { background-color: #90ccd8 !important; color: #222 !important; }
.status-withdrawn   { background-color: #c8b0a0 !important; color: #222 !important; }

/* Status pill colors — lighter same-hue version of each row background */
.tag.pill-not_applying { background-color: #eeeeee !important; color: #555555 !important; }
.tag.pill-considering  { background-color: #e4e0f8 !important; color: #4a3a9c !important; }
.tag.pill-applying     { background-color: #deeeff !important; color: #1a4a9c !important; }
.tag.pill-likely       { background-color: #e8f3ff !important; color: #1a5a9c !important; }
.tag.pill-unlikely     { background-color: #f8e4e4 !important; color: #8c2020 !important; }
.tag.pill-applied      { background-color: #c4e8c4 !important; color: #1e5c20 !important; }
.tag.pill-accepted     { background-color: #d4f0d4 !important; color: #246024 !important; }
.tag.pill-deferred     { background-color: #faecc4 !important; color: #7a6000 !important; }
.tag.pill-waitlisted   { background-color: #fae0c4 !important; color: #7a4a00 !important; }
.tag.pill-rejected     { background-color: #f8d4d4 !important; color: #8c1a1a !important; }
.tag.pill-enrolled     { background-color: #c4ecf8 !important; color: #1a5c70 !important; }
.tag.pill-withdrawn    { background-color: #e8ddd4 !important; color: #5a4038 !important; }

/* Status badge pill (inside Tabulator status cell) */
.status-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
}

/* Active navbar item */
.navbar-item.is-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Boxes: semi-transparent so the gradient shows through */
.box {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(2px);
}

/* Tables: transparent background, white rows */
.table {
  background-color: transparent !important;
}
.table thead tr {
  background-color: rgba(255, 255, 255, 0.6);
}
.table tbody tr {
  background-color: rgba(255, 255, 255, 0.55);
}
.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Table improvements */
.table td, .table th {
  vertical-align: middle;
}

/* Frozen header row — sticks to top of viewport on scroll */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 #dbdbdb;
}

.table-container {
  overflow-x: auto;
}

/* N/A cells — fields that don't apply to the current category.
   Override Bulma's --bulma-table-cell-background-color CSS var AND use high-specificity selector
   so we beat any !important from Bulma's .table td rule. */
.table tbody tr td.cell-na {
  --bulma-table-cell-background-color: #d8d8d8;
  background-color: #d8d8d8 !important;
  color: #b0b0b0 !important;
  text-align: center;
  cursor: default;
  user-select: none;
}

/* Character counter styling */
.char-counter {
  font-size: 0.8rem;
  color: #7a7a7a;
}
.char-counter.is-over {
  color: #f14668;
  font-weight: bold;
}
.char-counter.is-near {
  color: #ffe08a;
}

/* UC category row colors — must beat .table tbody tr specificity (0,1,2) */
.table tbody tr.uc-cat-award           { background-color: #fef9c3 !important; }
.table tbody tr.uc-cat-extracurricular { background-color: #dbeafe !important; }
.table tbody tr.uc-cat-volunteer       { background-color: #dcfce7 !important; }
.table tbody tr.uc-cat-work            { background-color: #ffedd5 !important; }
.table tbody tr.uc-cat-coursework      { background-color: #ede9fe !important; }
.table tbody tr.uc-cat-edu_prep        { background-color: #bae6fd !important; }

/* UC category-view section header rows */
.uc-section-header td {
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  border-top: 2px solid rgba(0,0,0,0.1) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* UC placeholder (empty slot) rows */
.table tbody tr.uc-placeholder { background-color: rgba(248,248,248,0.5) !important; }
.uc-placeholder td { color: #ccc !important; }

/* ── Applications dashboard ── */

/* Progress tile headings */
.app-tile-heading {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.4rem;
}

/* Big stat number in tiles */
.app-tile-stat {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'Libre Baskerville', Georgia, serif;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.app-tile-denom {
  font-size: 0.95rem;
  font-weight: 400;
  color: #888;
}

/* "→ edit in ..." link at tile bottom */
.app-tile-link {
  font-size: 0.72rem;
  color: #aaa;
  margin-top: 0.6rem;
}

/* Segmented progress bar (used in tiles and essay section header) */
.app-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: #e8e8e8;
  overflow: hidden;
  display: flex;
}

/* Section sub-labels (Activities/Honors sub-headers) */
.app-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* Essay status pill select on Applications dashboard */
.essay-status-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
/* One source of truth for the status colours: the pills, the bar segments and
   the confetti all read from here, so they can't drift apart the way the old
   green/yellow bar did once there were five statuses. */
:root {
  --essay-todo:    #eeeeee;
  --essay-idea:    #fde8cd;
  --essay-wip:     #e0d8f5;
  --essay-drafted: #d4e4fa;
  --essay-done:    #c4e8c4;
}
.essay-status-pill.todo    { background-color: var(--essay-todo); color: #666666; }
.essay-status-pill.idea    { background-color: var(--essay-idea); color: #8a5200; }
.essay-status-pill.wip     { background-color: var(--essay-wip); color: #4a3a9c; }
.essay-status-pill.drafted { background-color: var(--essay-drafted); color: #1a4a9c; }
/* Same green as a Submitted college (.tag.pill-applied) — an essay being done
   and an application being in should read as the same kind of finished. */
.essay-status-pill.done    { background-color: var(--essay-done); color: #1e5c20; }

/* Stacked status bar: the pills, drawn to scale. Same colours, same counts,
   so it needs no legend. */
.essay-status-bar {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: #f0f0f0;
  margin-top: 0.7rem;
}
.essay-status-bar-seg { height: 100%; }
.essay-status-bar-seg.seg-todo    { background: var(--essay-todo); }
.essay-status-bar-seg.seg-idea    { background: var(--essay-idea); }
.essay-status-bar-seg.seg-wip     { background: var(--essay-wip); }
.essay-status-bar-seg.seg-drafted { background: var(--essay-drafted); }
.essay-status-bar-seg.seg-done    { background: var(--essay-done); }
/* Legacy: a pill whose status didn't resolve. Kept so an unmigrated row is
   visibly odd rather than invisible. */
.essay-status-pill.blank   { background-color: #f0f0f0; color: #888; }

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: #ccc;
  user-select: none;
  text-align: center;
}
.drag-handle:active { cursor: grabbing; }

/* Column header info icon */
.th-info-icon {
  cursor: help;
  color: #aaa;
  font-size: 0.72rem;
  margin-left: 3px;
  vertical-align: middle;
}
.th-info-icon:hover { color: #555; }

/* Tooltip popup (positioned via JS, escapes table overflow) */
.th-tooltip-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-weight: normal;
  white-space: normal;
}


/* ── Essays tab ────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* View switcher tabs */
.essays-tab-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #dbdbdb;
}
.essays-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.5rem 1.1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.essays-tab-btn:hover { color: #444; }
.essays-tab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Matrix table */
.matrix-table {
  font-size: 0.82rem;
  white-space: nowrap;
  min-width: 100%;
}
.matrix-cat-header {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  min-width: 160px;
  font-weight: 600;
}
.matrix-col-header {
  cursor: pointer;
  text-align: center;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.85rem;
  min-width: 140px;
  padding: 0.6rem 0.75rem;
  transition: background 0.12s;
}
.matrix-col-header:hover {
  background-color: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent);
}
.matrix-cat-cell {
  font-size: 0.8rem;
  color: #555;
  font-weight: 600;
  vertical-align: middle;
  padding-left: 0.85rem;
}
.matrix-cell {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.6rem;
  min-width: 140px;
}
.matrix-cell-filled {
  cursor: pointer;
  transition: background 0.12s;
}
.matrix-cell-filled:hover {
  background-color: rgba(var(--accent-rgb), 0.07) !important;
}
.matrix-cell-empty {
  background-color: rgba(220, 220, 220, 0.3) !important;
}
.matrix-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.matrix-count-chip {
  font-size: 0.72rem;
  color: #888;
}
.matrix-mini-bar {
  width: 80px;
  height: 4px !important;
  border-radius: 2px;
  background: #e8e8e8;
  overflow: hidden;
  flex-shrink: 0;
}
.matrix-multi-tag {
  font-size: 0.65rem;
  color: #bbb;
  font-style: italic;
}
.matrix-empty-dash {
  color: #ccc;
  font-size: 0.9rem;
}

/* College selector row (By College view) */
.college-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.college-selector-btn {
  background: rgba(255,255,255,0.7);
  border: 1.5px solid #dbdbdb;
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}
.college-selector-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.college-selector-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Essay card */
.essay-card {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.4rem;
}
.essay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.essay-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Category dropdown — styled to look like a tag */
.essay-cat-select {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  background: rgba(42,157,143,0.08);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  border: 1px solid rgba(42,157,143,0.2);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Open Sans', sans-serif;
  transition: background 0.15s, border-color 0.15s;
}
.essay-cat-select:hover, .essay-cat-select:focus {
  background: rgba(42,157,143,0.15);
  border-color: var(--accent);
  outline: none;
}
.essay-limit-chip {
  font-size: 0.72rem;
  color: #999;
  background: #f0f0f0;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.essay-limit-chip:hover {
  color: #666;
  background: #e4e4e4;
}
/* No limit stated yet: still clickable, but it shouldn't read as data. */
.essay-limit-chip.is-unset {
  background: transparent;
  border: 1px dashed #d5d5d5;
  color: #bbb;
  font-weight: 500;
}
.essay-limit-chip.is-unset:hover {
  border-color: #2a9d8f;
  color: #2a9d8f;
  background: transparent;
}

/* The chip in edit mode — min / max / unit, no buttons. */
.essay-limit-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.essay-limit-edit .input {
  width: 4.2rem;
  height: auto;
  font-size: 0.72rem;
  padding: 0.15rem 0.3rem;
}
.essay-limit-edit select {
  font-size: 0.72rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  background: #fff;
  color: #666;
}
.essay-limit-dash {
  color: #bbb;
  font-size: 0.72rem;
}
.essay-card-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.focus-link-btn {
  font-size: 0.75rem;
  color: #aaa;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.15s;
}
.focus-link-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Essay prompt */
.essay-prompt-text {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.92rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

/* Essay textarea */
.essay-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  resize: vertical;
  background: rgba(255,255,255,0.8);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.essay-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: white;
}

/* Essay card footer */
.essay-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.essay-word-counter {
  font-size: 0.78rem;
  color: #999;
  font-weight: 600;
}
.essay-word-counter.is-over { color: #f14668; }
.essay-word-counter.is-near { color: #e0a020; }
/* Below a stated minimum ("5-500 words"). Softer than over-limit: too long is
   a problem to fix, too short is just not finished yet. */
.essay-word-counter.is-under { color: #8a8a8a; }
.essay-under-note { font-weight: 400; font-style: italic; opacity: 0.85; }
.essay-saved-indicator {
  font-size: 0.72rem;
  transition: color 0.2s;
}
.essay-saved-indicator.is-saved { color: #43A047; }
.essay-saved-indicator.is-saving { color: #aaa; }
.essay-saved-indicator.is-unsaved { color: #e0a020; }


/* ── Focus mode ────────────────────────────────────────────────── */

body.focus-mode {
  min-height: 100vh;
}

.focus-shell {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  min-height: 100vh;
}

.focus-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  position: sticky;
  top: 0;
  background: rgba(var(--accent-rgb), 0.10);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.focus-back-btn {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  transition: all 0.15s;
}
.focus-back-btn:hover {
  background: var(--accent);
  color: white;
}
.focus-college-label {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.9rem;
  color: #555;
  flex: 1;
  /* Absorb the slack, and ellipsize rather than shove the toolbar around when
     the label is a long college name (Essays focus mode). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nothing in the toolbar may change width while you type. Everything here that
   updates live gets a reserved slot sized for its widest state; otherwise the
   right-hand group grows leftward and the buttons walk across the screen.
   (Height was already defended — see .pomo-chip--inline below.) */
.focus-counter {
  display: inline-block;
  font-size: 0.8rem;
  /* Fits "1234 / 250 words" (Essays focus). Right-aligned so digits grow
     leftward into the reserved slot instead of pushing the buttons. */
  min-width: 9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Focus Write shows both counts: "1234 words · 5678 chars". */
.focus-counter--wide { min-width: 13rem; }

/* "Show Word Count" / "Hide Word Count" */
.focus-toggle-btn {
  min-width: 9.5rem;
  text-align: center;
}
/* "⤢ Fullscreen" / "⤡ Exit Fullscreen" */
.focus-fs-btn {
  min-width: 9.5rem;
  text-align: center;
}
.focus-saved-label {
  font-size: 0.75rem;
  font-weight: 600;
  /* Cycles Saving… / Saved / Unsaved on every autosave, i.e. while you type.
     Reserve the widest so the toolbar doesn't twitch mid-sentence. */
  display: inline-block;
  min-width: 4.5rem;
  text-align: right;
  white-space: nowrap;
}
.focus-saved-label.is-saved { color: #43A047; }
.focus-saved-label.is-saving { color: #aaa; }
.focus-saved-label.is-unsaved { color: #e0a020; }

.focus-prompt-area {
  margin-bottom: 1.75rem;
}
.focus-category-tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.focus-prompt-text {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}
.focus-limit-chip {
  font-size: 0.75rem;
  color: #aaa;
  background: rgba(255,255,255,0.6);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-weight: 600;
}

.focus-editor-area { }

.focus-textarea {
  width: 100%;
  min-height: 320px;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  border-radius: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  resize: none;
  background: transparent;
  padding: 0.5rem 0;
  transition: border-color 0.2s;
  outline: none;
  box-sizing: border-box;
  overflow: hidden;
}
.focus-textarea:focus {
  border-bottom-color: var(--accent);
}

.focus-counter-row {
  margin-top: 0.75rem;
  text-align: right;
}
.focus-counter {
  font-size: 0.8rem;
  color: #bbb;
  font-weight: 600;
}
.focus-counter.is-over { color: #f14668; }
.focus-counter.is-near { color: #e0a020; }

/* CA activity row supercategory color coding */
.ca-type-arts      { --bulma-table-cell-background-color: #fdf4ff !important; }
.ca-type-sports    { --bulma-table-cell-background-color: #eff9ff !important; }
.ca-type-community { --bulma-table-cell-background-color: #f0fdf4 !important; }
.ca-type-academic  { --bulma-table-cell-background-color: #fefce8 !important; }
.ca-type-journalism { --bulma-table-cell-background-color: #fff7ed !important; }
.ca-type-work      { --bulma-table-cell-background-color: #f8fafc !important; }
.ca-type-other     { --bulma-table-cell-background-color: transparent !important; }

/* CA empty slot placeholder rows */
.ca-placeholder td {
  color: #ccc;
  font-size: 0.85rem;
}

/* ── Compare tab ── */
.compare-table {
  font-size: 0.8rem;
  white-space: nowrap;
}
.compare-col-platform { width: 64px; }
.compare-col-name     { min-width: 140px; }
.compare-col-role     { min-width: 110px; }
.compare-col-type     { min-width: 110px; }
.compare-col-bg       { min-width: 200px; white-space: normal; }
.compare-col-desc     { min-width: 260px; white-space: normal; }
.compare-col-grades   { width: 68px; }
.compare-col-timing   { min-width: 90px; }
.compare-col-hrs      { width: 54px; }
.compare-col-wks      { width: 54px; }
.compare-col-edit     { width: 34px; }

.compare-thead th {
  background: #1e2a3b;
  color: #e8edf4;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: bottom;
}
.compare-limit {
  display: block;
  font-weight: 400;
  color: #7a8fa8;
  font-size: 0.68rem;
  margin-top: 1px;
}

/* Group header */
.compare-group-header td {
  background: #f4f4f8 !important;
  border-top: 2px solid #b5b5c8 !important;
  padding: 0.45rem 0.65rem;
}
.compare-group-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #2c3354;
  margin-right: 0.5rem;
}
.compare-group-tag {
  margin-left: 3px;
  font-size: 0.68rem;
}

/* Platform rows */
.compare-row td { vertical-align: top; }
.compare-row-uc  { background: #f0f4ff !important; }
.compare-row-ca  { background: #f0fdf6 !important; }
.compare-row-mit { background: #fffbf0 !important; }

.compare-row-uc  td:first-child { border-left: 3px solid #3b82f6 !important; }
.compare-row-ca  td:first-child { border-left: 3px solid #22c55e !important; }
.compare-row-mit td:first-child { border-left: 3px solid #f59e0b !important; }

.compare-row-orphan { opacity: 0.65; }

/* Orphan section header */
.compare-orphan-header td {
  background: #fafaf0 !important;
  border-top: 2px solid #e0e090 !important;
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  padding: 0.4rem 0.65rem;
}

/* Cell styles */
.compare-cell { font-size: 0.8rem; padding: 0.25rem 0.45rem !important; vertical-align: top !important; }
.compare-text { white-space: pre-wrap !important; line-height: 1.4; }
/* Make view-mode spans block so the .compare-cc counter (display:block) renders correctly.
   Alpine sets display:none inline when editing, which wins over CSS. */
td.compare-cell [x-show="!open"] {
  display: block;
}
.compare-muted { color: #c0c0c0 !important; text-align: center; }
.compare-grades { font-size: 0.72rem; color: #555; }
.compare-timing { font-size: 0.72rem; white-space: normal !important; }
.compare-platform-tag { font-size: 0.7rem; font-weight: 700; }
.compare-cc {
  display: block;
  font-size: 0.66rem;
  color: #aaa;
  margin-top: 2px;
}
.compare-edit {
  font-size: 0.85rem;
  color: #b0b0b0;
  text-decoration: none;
}
.compare-edit:hover { color: #333; }

/* Editable cells in compare view */
.compare-editable { cursor: pointer; }
.compare-editable:hover { background: rgba(0,0,0,0.04) !important; }
.compare-editable input,
.compare-editable textarea,
.compare-editable .select { width: 100%; }
.compare-editable input.input,
.compare-editable textarea.textarea { font-size: 0.8rem; }
.compare-grades label,
.compare-timing label { font-size: 0.75rem; cursor: pointer; }

/* ── Hrs/Wk Estimator tab ── */
.estimator-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Table */
.estimator-table thead th {
  background: #f8f8fc;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd !important;
  padding: 0.5rem 0.6rem;
}
.estimator-grade-th {
  width: 44px;
  text-align: center;
  color: #3b82f6 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
}
.estimator-radio-td {
  text-align: center;
  vertical-align: middle !important;
}
.estimator-radio-td input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}
.estimator-td {
  padding: 0.3rem 0.45rem !important;
  vertical-align: middle !important;
  border-color: #f0f0f0 !important;
}
.estimator-row:hover td { background: #fafafe; }
.estimator-input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid #e2e2e2;
  border-radius: 0;
  background: transparent;
  padding: 0.25rem 0.2rem;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  color: inherit;
}
.estimator-input:focus { border-bottom-color: #3b82f6; }
.estimator-input::placeholder { color: #ccc; }
.estimator-num { text-align: right; }
.estimator-del {
  background: none;
  border: none;
  color: #d0d0d0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.1s;
}
.estimator-del:hover { color: #f14668; }

/* Result card */
.estimator-card {
  background: white;
  border: 1px solid #e4e4ec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.estimator-card-header {
  background: #1e2a3b;
  color: #e8edf5;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
}
.estimator-card-body { padding: 1rem; }

/* Progress bar */
.estimator-prog-label { margin-bottom: 0.35rem; }
.estimator-prog-track {
  height: 7px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.estimator-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399 0%, #3b82f6 100%);
  border-radius: 4px;
  transition: width 0.25s ease;
  min-width: 4px;
}

/* Stats */
.estimator-stats { margin-bottom: 0; }
.estimator-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.32rem 0;
  border-bottom: 1px solid #f4f4f4;
}
.estimator-stat:last-child { border-bottom: none; }
.estimator-stat-label { font-size: 0.76rem; color: #777; }
.estimator-stat-val { font-weight: 700; font-size: 0.88rem; color: #1e2a3b; }

/* Suggested values */
.estimator-suggest-row { display: flex; gap: 0.7rem; }
.estimator-suggest-box {
  flex: 1;
  text-align: center;
  background: #f5f8ff;
  border: 1.5px solid #c5d3f5;
  border-radius: 9px;
  padding: 0.8rem 0.5rem 0.6rem;
}
.estimator-suggest-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}
.estimator-suggest-lbl {
  font-size: 0.68rem;
  color: #999;
  margin: 0.25rem 0 0.55rem;
}
.estimator-copy-btn {
  display: block;
  width: 100%;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.estimator-copy-btn:hover { background: #1d4fd8; }

/* Details toggle link */
.est-details-toggle {
  background: none;
  border: none;
  color: #999;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.1s;
}
.est-details-toggle:hover { color: #555; }

/* ≈ launch button in UC row cells */
.est-launch-btn {
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 1px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.12s;
  font-family: inherit;
}
.est-launch-btn:hover { opacity: 1; }

/* Estimator modal */
.est-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.est-modal-box {
  background: white;
  border-radius: 10px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
.est-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e2a3b;
  color: #e8edf5;
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.est-modal-close {
  background: none;
  border: none;
  color: #e8edf5;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.1s;
}
.est-modal-close:hover { opacity: 1; }
.est-modal-body {
  padding: 1.1rem 1.2rem;
  overflow-y: auto;
  flex: 1;
}
.est-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

/* College list toolbar */
.college-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.college-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.college-toolbar-actions #search-bar input {
  width: 220px;
}

/* Add-college modal results */
.add-college-results {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  overflow: hidden;
}
.add-college-results li + li {
  border-top: 1px solid #f0f0f0;
}
.add-college-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: white;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: background 0.1s;
}
.add-college-result:hover { background: #f5f8ff; }
.add-college-result-name {
  font-size: 0.9rem;
  font-weight: 500;
}
.add-college-result-location {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
}
.add-college-result--added {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  gap: 1rem;
  opacity: 0.5;
  cursor: default;
}
.add-college-result-tag {
  font-size: 0.74rem;
  color: #666;
  white-space: nowrap;
  font-style: italic;
}
.add-college-no-results {
  color: #888;
  font-size: 0.88rem;
  padding: 0.4rem 0;
}
/* Offered only when the search finds nothing, so it can't be mistaken for a
   real result and quietly create an unlinked duplicate. */
.add-college-result--custom {
  border: 1px dashed #dbdbdb;
  border-radius: 6px;
}
.add-college-result--custom:hover { background: #f5f8ff; border-color: var(--bulma-primary, #14b8a6); }

/* Single-gender colleges, stated next to the name. */
.gender-flag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.gender-women { background: #e4e0f8; color: #4a3a9c; }
.gender-men   { background: #f8d4d4; color: #8c1a1a; }

/* All Colleges: marks a college someone you know has gotten into. */
.certified-dot {
  color: var(--accent);
  font-size: 0.55rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

/* By Topic reuse signal — a tag on more than one college is the same question
   asked twice, which is the whole reason the matrix exists. */
.matrix-reuse-note {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: #8a7fb8;
  line-height: 1.45;
  margin-top: 0.15rem;
}
.matrix-reuse-note a { color: #6247b8; text-decoration: underline; }
/* Lengths too far apart to be one essay. */
.matrix-reuse-warn { color: #b06000; }
.matrix-row-reusable .matrix-cat-cell {
  border-left: 3px solid #b9a8f0;
}

/* Choice of prompts on one essay */
.essay-prompt-choice {
  border-left: 3px solid #e0d8f5;
  padding-left: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.essay-prompt-choice-label {
  display: block;
  font-size: 0.72rem;
  color: #888;
  margin-bottom: 0.35rem;
}
.essay-prompt-option {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.25rem 0;
  cursor: pointer;
  color: #999;
}
.essay-prompt-option input { margin-top: 0.35rem; flex-shrink: 0; }
/* The one being answered reads as the prompt; the rest recede to options. */
.essay-prompt-option.is-chosen { color: #363636; }

.essay-card-del {
  border: none;
  background: none;
  color: #d5d5d5;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.3rem;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.essay-card-del:hover { color: #cc0f35; background: #feecf0; }

/* Add-an-essay form */
.essay-add {
  background: rgba(255,255,255,0.6);
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1.25rem;
}
.essay-add > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}
.essay-add > summary::-webkit-details-marker { display: none; }
.essay-add[open] > summary { margin-bottom: 0.75rem; }
.essay-add-form { max-width: 720px; padding-bottom: 0.4rem; }
.essay-add-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.essay-add-label {
  width: 4.5rem;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
}
.essay-add-del {
  border: none;
  background: none;
  color: #ccc;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.3rem;
  align-self: flex-start;
}
.essay-add-del:hover { color: #cc0f35; }

/* Essay tag manager */
.tag-manager-disclosure > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  list-style: none;
}
.tag-manager-disclosure > summary::-webkit-details-marker { display: none; }
.tag-manager-disclosure > summary::before { content: '▸ '; }
.tag-manager-disclosure[open] > summary::before { content: '▾ '; }
.tag-manager { max-width: 340px; }
.tag-manager-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.tag-manager-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.1rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.84rem;
}
.tag-manager-item > span:first-child { flex: 1; min-width: 0; }
.tag-manager-count {
  font-size: 0.72rem;
  color: #999;
  font-variant-numeric: tabular-nums;
}
.tag-manager-del {
  border: none;
  background: none;
  color: #ccc;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s, background 0.1s;
}
.tag-manager-item:hover .tag-manager-del,
.tag-manager-del:focus-visible { opacity: 1; }
.tag-manager-del:hover { color: #cc0f35; background: #feecf0; }
.tag-manager-add { margin-top: 0.4rem; }

/* Time calculator sanity checks — a note, not an error: the numbers still
   stand, you are just told what might be off. */
.estimator-warnings {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem 0.6rem 1.9rem;
  list-style: disc;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 5px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #7a5c00;
}
.estimator-warnings li + li { margin-top: 0.3rem; }

/* Round + Deadline */
.round-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a3a9c;
  background: #e4e0f8;
  border-radius: 4px;
  padding: 0.1em 0.45em;
  white-space: nowrap;
}
/* The RD date standing in because no round is picked: shown, but visibly not
   a commitment. */
.deadline-fallback { color: #aaa; }

/* Drag-to-reorder handle (first cell of every college row).
   Hidden unless the tbody is reorderable — i.e. no sort, search, or filter is
   deciding the order instead. */
.col-drag { width: 1%; padding-right: 0 !important; }
.drag-handle { display: none; }
#college-tbody[data-reorder-url] .drag-handle {
  display: inline-block;
  cursor: grab;
  color: #d0d0d0;
  letter-spacing: -3px;
  user-select: none;
  padding: 0 0.15rem;
}
#college-tbody[data-reorder-url] tr:hover .drag-handle { color: #999; }
.drag-handle:active { cursor: grabbing; }
tr.is-dragging { opacity: 0.4; }
tr.drop-above td { box-shadow: inset 0 2px 0 var(--bulma-primary, #14b8a6); }
tr.drop-below td { box-shadow: inset 0 -2px 0 var(--bulma-primary, #14b8a6); }

/* Remove-from-list control (last cell of every college row) */
.col-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.college-remove {
  border: none;
  background: none;
  color: #c9c9c9;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.35rem;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s, background 0.1s;
}
/* Hidden until the row is hovered: destructive, and the list is read far more
   often than it is edited. Always visible to keyboard users. */
tr:hover .college-remove,
.college-remove:focus-visible { opacity: 1; }
.college-remove:hover { color: #cc0f35; background: #feecf0; }

/* ===================================================================
   HIPPOMODORO — background timer chip, interstitials, and timer page
   =================================================================== */

/* --- Persistent top-right chip (sits just under the navbar/username) --- */
.pomo-chip {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.25rem 0.35rem 0.25rem 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(3px);
  font-size: 0.82rem;
}
.pomo-chip-main {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #777;
  text-decoration: none;
  max-width: 46vw;
}
.pomo-chip-task {
  color: #888;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
.pomo-chip-icon { font-size: 0.9rem; }
.pomo-chip-clock {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  /* tabular-nums keeps digits even, but the text still changes shape: 25:00 ->
     9:59 loses a character, and on expiry it becomes "time's up". Reserve the
     widest so the pill is one size for its whole life. */
  display: inline-block;
  min-width: 4.6rem;
  text-align: right;
  white-space: nowrap;
}
.pomo-chip--break .pomo-chip-clock { color: #b0895b; }
.pomo-chip-toggle { font-size: 0.72rem !important; padding: 0.15rem 0.5rem !important; }
.pomo-chip-show {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 40;
  font-size: 0.72rem !important;
  padding: 0.2rem 0.6rem !important;
  background: rgba(255, 255, 255, 0.9);
}
body.focus-mode .pomo-chip,
body.focus-mode .pomo-chip-show { top: 14px; }

/* Chip docked inside the focus toolbar — flows beside the buttons, no overlap */
/* Docked in the focus toolbar: transparent + no vertical padding so the bar height
   (and therefore the margin above the editor) does not change when the pill appears. */
.pomo-chip.pomo-chip--inline {
  position: static;
  box-shadow: none;
  background: transparent;
  padding: 0;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pomo-chip-show.pomo-chip--inline { position: static; background: transparent; }
.pomo-chip--inline .pomo-chip-task { max-width: 160px; }

/* --- Timer-done alert --- */
/* Bottom-right, opposite the chip's top-right, so a timer ending while you
   work never covers the countdown or the page. It waits as long as it takes:
   no auto-dismiss, because it is asking a question. */
.pomo-alert {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(20rem, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid var(--bulma-primary, var(--accent));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(3px);
}
.pomo-alert-title { font-weight: 700; font-size: 0.95rem; color: #2a2a2a; }
.pomo-alert-sub {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}
.pomo-alert-actions { display: flex; gap: 0.5rem; align-items: center; }

/* --- Interstitial overlays (enraged Potamus + neutral confirm) --- */
.pomo-lock {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}
.pomo-lock-card {
  background: #fff;
  border-radius: 16px;
  max-width: 380px;
  width: 92%;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  font-family: 'Libre Baskerville', Georgia, serif;
}
.pomo-lock-img {
  width: 180px;
  max-width: 70%;
  margin: -3.5rem auto 0.5rem;
  display: block;
}
.pomo-lock-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.pomo-lock-title--neutral { color: #363636; font-size: 1.05rem; margin-bottom: 1rem; }
.pomo-lock-sub { font-size: 0.95rem; color: #555; font-style: italic; margin-bottom: 1.25rem; }
.pomo-lock-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.pomo-btn {
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Libre Baskerville', Georgia, serif;
  line-height: 1.2;
}
.pomo-btn-green { background: var(--accent); color: #fff; font-size: 1.05rem; }
.pomo-btn-green:hover { background: #248277; }
.pomo-btn-red { background: none; color: #c0392b; font-size: 0.78rem; font-weight: 600; text-decoration: underline; padding: 0.3rem; }
.pomo-btn-red:hover { color: #922b21; }
.pomo-btn-grey { background: #f3f4f6; color: #374151; }
.pomo-btn-grey:hover { background: #e5e7eb; }
.pomo-btn-blue { background: #eaf1fb; color: #2a6fb0; border: 1.5px solid #cfe0f5; font-size: 0.85rem; }
.pomo-btn-blue:hover { background: #dbe8f8; }
.pomo-lock--neutral .pomo-lock-actions { flex-direction: row; justify-content: center; }
.pomo-lock--neutral .pomo-btn-green,
.pomo-lock--neutral .pomo-btn-grey { font-size: 0.95rem; padding: 0.55rem 1.4rem; }

/* --- Timer page --- */
.pomo-page { max-width: 780px; margin: 0 auto; }
.pomo-h1 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.pomo-toast {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: #248277;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}
.pomo-modes { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.pomo-mode-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid #dbdbdb;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.pomo-mode-card:hover { border-color: var(--accent); }
.pomo-mode-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }
/* Equal-height icon slot so the hourglass and Potamus align — names start at the same y */
.pomo-mode-icon {
  font-size: 3.6rem;
  line-height: 1;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pomo-mode-hippo { height: 92px; width: auto; max-width: 110px; object-fit: contain; }
.pomo-mode-name {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.pomo-mode-tag { font-size: 0.8rem; color: #666; line-height: 1.35; }
.pomo-form { display: flex; flex-direction: column; gap: 0.9rem; }
.pomo-label { font-weight: 600; color: #444; }
.pomo-durations { display: flex; gap: 1.5rem; }
.pomo-dur { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; color: #444; font-size: 0.9rem; }
.pomo-dur-in { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; color: #777; }
.pomo-dur-in .input { width: 5rem; }
.pomo-start { align-self: flex-start; }
.pomo-hint { font-size: 0.82rem; color: #999; font-style: italic; }
.pomo-label-opt { font-weight: 400; color: #999; font-size: 0.85em; }

/* Goal nag (Hippomodoro started with no goal) — small, centred, dismissible.
   Same shape as the paste warning: it interrupts, then gets out of the way. */
.pomo-nag {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 1rem;
}
.pomo-nag-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18);
  font-family: 'Libre Baskerville', Georgia, serif;
}
.pomo-nag-hippo { width: 120px; max-width: 50%; margin: 0 auto 0.75rem; display: block; }

/* Running view */
.pomo-running { text-align: center; padding-top: 0.5rem; }
.pomo-phase {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}
.pomo-task-label { font-size: 1.15rem; color: #444; margin-bottom: 1rem; font-style: italic; }
.pomo-ring-wrap { position: relative; width: 240px; height: 240px; margin: 0 auto 1.25rem; }
.pomo-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pomo-ring-bg { fill: none; stroke: rgba(0, 0, 0, 0.08); stroke-width: 10; }
.pomo-ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear;
}
.pomo-ring-fg--break { stroke: #b0895b; }
.pomo-ring-clock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  color: #333;
  font-variant-numeric: tabular-nums;
}
.pomo-controls { display: flex; gap: 0.6rem; justify-content: center; }
.pomo-mode-note { margin-top: 1rem; font-size: 0.85rem; color: #888; font-style: italic; }

/* Check-in / break-done card */
.pomo-checkin { display: flex; justify-content: center; padding-top: 1rem; }
.pomo-checkin-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
  font-family: 'Libre Baskerville', Georgia, serif;
}
.pomo-checkin-hippo { width: 160px; max-width: 60%; margin: 0 auto 0.75rem; display: block; }
.pomo-bubble {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.pomo-bubble--proud { color: var(--accent); font-weight: 700; font-size: 1.25rem; }
.pomo-bubble--angry { color: #c0392b; font-weight: 700; }
.pomo-checkin-opts, .pomo-care-opts { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; }
.pomo-opt {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #dbdbdb;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  color: #444;
  cursor: pointer;
  transition: all 0.15s;
}
.pomo-opt:hover { border-color: var(--accent); color: var(--accent); }
.pomo-penalty-target {
  background: #f7f7f7;
  border-left: 3px solid #c0392b;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  text-align: left;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.pomo-care-msg {
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  color: #248277;
  margin-top: 0.85rem;
  font-size: 0.92rem;
}
.pomo-goal-edit { display: flex; gap: 0.5rem; align-items: center; }
.pomo-goal-edit .input { flex: 1; }
.pomo-believe {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--accent);
  font-weight: 700;
  margin-top: 1rem;
}

/* Penalty textarea with a live mismatch-highlight backdrop (paste is blocked) */
.pomo-penalty-wrap { position: relative; }
.pomo-penalty-backdrop,
.pomo-penalty-input {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.pomo-penalty-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  color: #333;
  background: #fff;
  border-color: transparent;
  pointer-events: none;
  overflow: hidden;
}
.pomo-penalty-backdrop mark {
  background: #fbdcdc;
  color: #c0392b;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #f3b4b4;
}
.pomo-penalty-input {
  position: relative;
  display: block;
  margin: 0;
  resize: vertical;
  min-height: 7rem;
  background: transparent;
  color: transparent;
  caret-color: #333;
}
.pomo-penalty-input::placeholder { color: #b5b5b5; }

/* "You have to type it!" paste-blocked popup */
.pomo-paste-warn {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.pomo-paste-warn-box {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem 2rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #c0392b;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 560px) {
  .pomo-modes { flex-direction: column; }
  .pomo-chip-task { max-width: 40vw; }
}

/* --- "Full App Beta" tab (widgets-only build) ---------------------------
   The single link out of the standalone widgets site. Pushed to the far right
   of the tab bar and muted, so it reads as a way out rather than as another
   widget sitting alongside the six. */
.tabs li.widgets-exit { margin-left: auto; }

.tabs.is-boxed li.widgets-exit a {
  color: #8c8c8c;
  background: transparent;
  border-color: transparent;
  font-size: 0.85em;
}

.tabs.is-boxed li.widgets-exit a:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border-color: transparent;
}


/* ── Word counter banner ───────────────────────────────────────────
   Was a block of inline styles, which no accent variable could reach and
   which overflowed on a phone. Now it follows --accent and the type scales
   with the viewport, wrapping rather than clipping "characters". */
.wc-banner {
  position: relative;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 6px 6px 0 0;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: 'Libre Baskerville', Georgia, serif;
}

.wc-num {
  font-size: clamp(1.35rem, 5.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
}

.wc-unit {
  font-size: clamp(1.35rem, 5.6vw, 2.4rem);
  color: #555;
  margin-left: 0.3rem;
  font-style: italic;
}
.wc-unit--first { margin-right: 0.75rem; }

.wc-dot {
  font-size: clamp(1.1rem, 4.6vw, 2rem);
  color: #aaa;
  margin-right: 0.75rem;
}

.wc-save {
  position: absolute;
  top: 0.5rem;
  right: 0.85rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  font-style: normal;
}

/* Widget tab bar: the active tab takes the accent rather than Bulma's link
   blue, so it is teal on the tracker and plum on the standalone widgets. */
.tabs.is-boxed li.is-active a,
.tabs.is-boxed li.is-active a:hover {
  color: var(--accent);
}

/* ── Focus mode on a phone ─────────────────────────────────────────
   The toolbar reserves fixed widths so buttons never shift while you type;
   at phone widths those reservations do not fit, so drop them and let the
   right-hand group take its own row. */
@media (max-width: 560px) {
  .focus-shell { max-width: 100%; padding: 0 0.9rem 1rem; }

  .focus-topbar {
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    padding: 0.55rem 0;
    margin-bottom: 1.1rem;
  }

  .focus-topbar > div {
    flex: 1 1 100%;
    justify-content: center;
  }

  .focus-college-label { flex: 0 1 auto; }
  .focus-back-btn { font-size: 0.75rem; padding: 0.25rem 0.55rem; }
  .focus-toggle-btn, .focus-fs-btn { min-width: 0; }
  .focus-counter, .focus-counter--wide { min-width: 0; }
}