/* ---------------------------------------------------------------------------
   Colours. :root is dark, html[data-theme="light"] redeclares the same names.
   Nothing in this file may use a raw colour outside these two blocks, with the
   single exception of #fff on an accent or danger fill, which is right in both.
--------------------------------------------------------------------------- */
:root {
  --bg: #0a0a0c;
  --panel: #111114;
  --border: #222228;
  --card: #18181c;
  --card-border: #222228;
  --elevated: #151519;
  --input: #0e0e11;
  --hover: #1f1f25;
  --scroll: #2a2a31;
  --text: #d4d4d8;
  --muted: #63636e;
  --accent: #6366f1;
  --accent-light: #818cf8;
  --danger: #ef4444;
  --danger-h: #f87171;
  --tick-bg: #a1a1aa;
  --tick-border: #6b6b78;
  --track: #232329;
  --track-edge: #3a3a44;
  --coffee: #facc15;
  --coffee-h: #f0d060;
  --eerie-h: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --mono: Consolas, "SF Mono", Menlo, monospace;
}

html[data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --border: #e3e3e9;
  --card: #f0f0f3;
  --card-border: #c8c8d0;
  --elevated: #ffffff;
  --input: #ffffff;
  --hover: #e8e8ee;
  --scroll: #c9c9d2;
  --text: #1b1b22;
  --muted: #6a6a76;
  --accent: #6366f1;
  --accent-light: #4f46e5;
  --danger: #dc2626;
  --danger-h: #ef4444;
  --tick-bg: #ffffff;
  --tick-border: #9a9aa8;
  --track: #e6e6ec;
  --track-edge: #c9c9d4;
  --coffee: #b45309;
  --coffee-h: #a16207;
  --eerie-h: #312e81;
  --shadow: rgba(20, 20, 30, 0.18);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  overflow: hidden;
  user-select: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  flex-shrink: 0;
}

/* The bottom padding holds the sub-line's height, since the sub-line itself is
   lifted out of the flow below. */
.brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  padding-bottom: 14px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-light);
}

.brand-mark svg {
  display: block;
}

.brand-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-light);
  white-space: nowrap;
}

/* Taken out of the flow so its length never widens the header. The width comes
   from the title row alone, so anything beside it stays put whatever the
   readout says, or whether it is shown at all. */
.brand-sub {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  white-space: nowrap;
}

/* The header centres everything against the brand block, which is the title row
   plus the reserved sub-line beneath it. Matching that reserved height here
   lifts it back onto the title's own line. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.header-spacer {
  flex: 1;
  min-width: 12px;
}

/* How much of the list is ticked off. Same bottom margin as the buttons, so it
   sits on the title's line too. */
.brand-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  flex-shrink: 0;
  margin-left: 16px;
  margin-bottom: 14px;
}

.brand-progress.hidden {
  display: none;
}

.bar {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 8px;
  border-radius: 99px;
  background: var(--track);
  border: 1px solid var(--track-edge);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width 0.25s ease, background 0.25s ease;
}

.pct {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  min-width: 34px;
  flex-shrink: 0;
  text-align: right;
}

.theme-toggle {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--hover);
}

.theme-toggle svg {
  display: block;
}

/* ---------------------------------------------------------------------------
   Icon buttons. Icons are SVG, never text characters: a glyph sits on the font
   baseline and looks off-centre in a round button whatever you do to the box.
--------------------------------------------------------------------------- */
.icon-btn {
  border: none;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  flex: 0 0 auto;
}

.icon-btn svg {
  display: block;
}

.menu-btn {
  width: 38px;
  height: 38px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 19px;
}

.menu-btn:hover {
  background: var(--hover);
}

.add-btn {
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: #fff;
  border-radius: 19px;
}

.add-btn:hover {
  background: var(--accent-light);
}

/* ---------------------------------------------------------------------------
   The quick box. Stays put at the top; only the list below it scrolls.
--------------------------------------------------------------------------- */
.capture {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.capture-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.capture-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  user-select: text;
}

/* Stays out of the way until the box is being used, so a one-line jot is still
   one line. */
.capture-details {
  display: none;
  width: 100%;
  resize: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  user-select: text;
}

.capture.open .capture-details {
  display: block;
}

.capture-input::placeholder,
.capture-details::placeholder {
  color: var(--muted);
}

.capture-input:focus,
.capture-details:focus {
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Something went wrong. Never an empty screen that looks like success.
--------------------------------------------------------------------------- */
.problem {
  margin: 10px 16px 0;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--danger);
  background: var(--card);
  border: 1px solid var(--danger);
  border-radius: 10px;
  flex-shrink: 0;
}

/* Same strip, for something that worked rather than something that failed. */
.problem.ok {
  color: var(--text);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------------
   The list, the only scrolling part of the window
--------------------------------------------------------------------------- */
.list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 14px;
}

.list::-webkit-scrollbar {
  width: 10px;
}

.list::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 5px;
}

.list::-webkit-scrollbar-track {
  background: transparent;
}

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.empty strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.item:hover {
  background: var(--hover);
}

.item-title-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* Sized by its own words, not the whole row, so the arrow lands right beside
   the text instead of out at the far edge. */
.item-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
}

/* The button is taller than the line of text beside it, so it is pulled up by
   the difference to sit on that first line. */
.item-title-row .chev-btn {
  margin-top: -3px;
}

/* The description, one click away on the arrow. */
.item-details {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
  /* Put away until the arrow is clicked, so the list stays a list. */
  display: none;
}

.item.open .item-details {
  display: block;
}

.item-when {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.item-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

/* Same box as the delete button beside it, so neither looks bigger. */
.more-btn {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}

.more-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.more-btn svg {
  display: block;
}

.chev-btn svg {
  transition: transform 0.15s;
}

.item.open .chev-btn svg {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Changing a row: the card becomes a small form in place
--------------------------------------------------------------------------- */
.item.editing {
  display: block;
  padding: 12px;
  background: var(--elevated);
  border-color: var(--accent);
}

.item.editing:hover {
  background: var(--elevated);
}

.item-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-input,
.edit-details {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  user-select: text;
}

.edit-input {
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
}

.edit-details {
  resize: none;
  font-size: 13px;
  line-height: 1.45;
}

.edit-input::placeholder,
.edit-details::placeholder {
  color: var(--muted);
}

.edit-input:focus,
.edit-details:focus {
  border-color: var(--accent);
}

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Both buttons get the same box, whatever the word inside is. */
.edit-btn {
  width: 88px;
  height: 32px;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  cursor: pointer;
}

.edit-btn:hover {
  background: var(--hover);
}

.edit-btn.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.edit-btn.primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

.item.done .item-text {
  color: var(--muted);
  text-decoration: line-through;
}

.del-btn {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}

.del-btn:hover {
  background: var(--hover);
  color: var(--danger);
}

.del-btn svg {
  display: block;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------------------------------------------------------------------------
   Tick boxes. The system one ignores the palette, so it is drawn here. The
   empty state needs its own border colour or it disappears in both themes.
--------------------------------------------------------------------------- */
.tick {
  position: relative;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
  appearance: none;
  background: var(--tick-bg);
  border: 2px solid var(--tick-border);
  border-radius: 5px;
}

.tick:hover {
  border-color: var(--accent);
}

.tick:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.tick:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
   Settings panel, floated under the button top-right
--------------------------------------------------------------------------- */
.menu-panel {
  position: fixed;
  top: 58px;
  right: 16px;
  width: 230px;
  padding: 6px;
  background: var(--elevated);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 20;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
}

.menu-row:hover {
  background: var(--hover);
}

.menu-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 4px;
}

/* Both actions sit in the same stack, so both are the full width of the panel
   and the same height whatever their wording. */
.menu-action {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.menu-action:hover {
  background: var(--hover);
}

.menu-action.danger {
  color: var(--danger);
}

.menu-action.danger:hover {
  background: var(--hover);
  color: var(--danger-h);
}

/* ---------------------------------------------------------------------------
   Footer. Links only, on one line, pushed right.
--------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 6px 16px 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
}

.flink {
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
}

.flink:hover {
  text-decoration: underline;
}

.made {
  color: var(--muted);
  white-space: nowrap;
}

/* The bars use --muted, not --border: border sits almost on top of the panel
   colour and the bars vanish in dark mode. */
.sep {
  color: var(--muted);
}

#linkCoffee {
  color: var(--coffee);
}

#linkCoffee:hover {
  color: var(--coffee-h);
}

#linkEerie {
  color: var(--accent-light);
}

#linkEerie:hover {
  color: var(--eerie-h);
}

#linkReport,
#linkFeedback,
#linkFeature {
  color: var(--muted);
}

#linkReport:hover,
#linkFeedback:hover,
#linkFeature:hover {
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   Web page. Unlike the extension popup this has a whole browser window, and it
   fills it: this is the app, not a page with the app sitting on it.
--------------------------------------------------------------------------- */
html,
body {
  width: 100%;
  height: 100%;
}

#app {
  position: relative;
}

/* The settings panel hangs off the app, so it lands under its own button. */
.menu-panel {
  position: absolute;
  top: 58px;
  right: 16px;
}

/* An empty strip must take up no room, whatever the browser does with the
   hidden attribute. */
.problem[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  /* The five footer links do not fit on a phone, so they wrap there and
     nowhere else. */
  .footer,
  .footer-links {
    flex-wrap: wrap;
  }

  .footer-links {
    justify-content: center;
  }
}