/* Notes PWA — home screen.
   Static markup only; nothing here depends on app.js. */

:root {
  color-scheme: light dark;

  --bg:          #F2F2F7;
  --card:        #FFFFFF;
  --control:     #FFFFFF;
  --text:        #000000;
  --text-dim:    #8A8A8E;
  --separator:   rgba(60, 60, 67, 0.18);
  --chevron:     #C3C3C7;
  --gold:        #E9AC33;
  --shadow:      0 1px 3px rgba(0, 0, 0, 0.08);
  --focus:       #0A84FF;

  /* Row metrics. The separator inset is derived from these so it always lines
     up with the label, at any depth. */
  --page-pad:  16px;
  --gutter:    16px;
  --icon-size: 26px;
  --icon-gap:  13px;
  --indent:    23px;
  --row-min:   52px;
  --radius:    16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #000000;
    --card:      #1C1C1E;
    --control:   #1C1C1E;
    --text:      #FFFFFF;
    --text-dim:  #98989E;
    --separator: rgba(84, 84, 88, 0.65);
    --chevron:   #55555A;
    --shadow:    none;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.sprite { display: none; }

/* Shared icon defaults: everything in the sprite is drawn as strokes. */
.icon, .row-icon, .chevron, .search-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(button):focus-visible,
:where(input):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- toolbar */

.toolbar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;

  /* Nudged to match Apple Notes, measured off a device screenshot: the buttons
     sat 3px left of and 7px below theirs. The 7px comes off the top padding and
     goes onto the bottom, so the toolbar keeps its height and nothing below
     moves. */
  padding: 1px 13px 15px var(--page-pad);
  padding-top: calc(1px + env(safe-area-inset-top));
}

.icon-btn,
.pill-btn {
  appearance: none;
  border: 0;
  background: var(--control);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
}

.icon-btn .icon { width: 24px; height: 24px; }

.pill-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  font-size: 17px;
}

.icon-btn:active,
.pill-btn:active { filter: brightness(0.94); }

/* --------------------------------------------------------------- content */

.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px var(--page-pad) 24px;
}

.group + .group { margin-top: 26px; }

.group-title {
  margin: 0 0 8px 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ------------------------------------------------------------------ rows */

.row {
  --inset: calc(var(--gutter) + var(--depth) * var(--indent)
                + var(--icon-size) + var(--icon-gap));

  position: relative;
  width: 100%;
  min-height: var(--row-min);
  display: flex;
  align-items: center;
  gap: var(--icon-gap);
  padding: 10px var(--gutter) 10px
           calc(var(--gutter) + var(--depth) * var(--indent));
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Hairline between rows, inset to start at the label. */
.row + .row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto var(--inset);
  height: 1px;
  background: var(--separator);
}

.row:active { background: rgba(120, 120, 128, 0.12); }

.row-icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--gold);
}

.row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--chevron);
  stroke-width: 2.2;
}

/* Disclosure chevrons on rows that have children take the tint colour;
   plain navigation chevrons stay grey. */
.chevron--tint { color: var(--gold); }

/* ---------------------------------------------------------------- tabbar */

.tabbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--page-pad);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  background: var(--control);
  box-shadow: var(--shadow);
}

.search-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  stroke-width: 2;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  outline-offset: -2px;
}

.search-input::placeholder { color: var(--text-dim); }
.search-input::-webkit-search-cancel-button { display: none; }

.mic-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.mic-btn .icon { width: 20px; height: 20px; }

.compose-btn { flex: none; }

/* Wider viewports: keep the list a comfortable measure rather than letting
   rows stretch the full width of a desktop window. */
@media (min-width: 600px) {
  .content, .toolbar, .tabbar {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}