/* Chemex Log — screen chrome. Ported from the design canvas <style> block;
   the fake-bezel paddings are replaced by real safe-area insets. */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select, a { touch-action: manipulation; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }

#app { height: 100%; }

.scr {
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text);
}
/* The screen container fills the space; the tab bar and any banner do not. */
.scr > div:not(.tabs):not(.banner) { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(20px + env(safe-area-inset-right)) 16px calc(20px + env(safe-area-inset-left));
}
.top {
  padding: calc(env(safe-area-inset-top) + 14px)
           calc(20px + env(safe-area-inset-right)) 10px
           calc(20px + env(safe-area-inset-left));
  display: flex; align-items: baseline; gap: 8px;
}
.kick {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.brand {
  font-family: var(--font-heading); font-weight: 400; font-size: 19px;
  margin-left: auto; letter-spacing: .01em;
}
.num {
  font-family: var(--font-heading); font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.row { display: flex; align-items: center; gap: 10px; }

/* — a write that did not land; sits above the tabs on every screen — */
.banner {
  flex: none; display: flex; align-items: flex-start; gap: 8px;
  padding: 10px calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  border-top: 1px solid var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  color: var(--color-accent-700);
  font-size: 12px; line-height: 1.4;
}
.banner span { flex: 1; }
/* A caption over a read-only value, styled like .field > label but not a
   <label>, since there is no control for it to point at. */
.field > .field-label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.banner-quiet {
  border-top-color: var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
}

.tabs {
  flex: none; display: flex;
  border-top: 1px solid var(--color-divider);
  padding: 6px calc(8px + env(safe-area-inset-right))
           calc(env(safe-area-inset-bottom) + 8px)
           calc(8px + env(safe-area-inset-left));
  background: var(--color-bg);
}
.tab {
  flex: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  border-radius: var(--radius-md);
}
.tab:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.tab[aria-current='page'] { color: var(--color-accent); }
.tab i { display: block; width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.tab[aria-current='page'] i { background: var(--color-accent); }

.li {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--color-divider);
  padding: 12px 2px; cursor: pointer; font: inherit; color: inherit; min-height: 44px;
}
.li:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.lbl {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.val { font-family: var(--font-heading); font-size: 17px; font-variant-numeric: tabular-nums; }
.sub {
  font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-variant-numeric: tabular-nums;
}
.bar {
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px;
}
.bar span {
  width: 100%;
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-top: 1px solid var(--color-accent);
}
.bar:hover span { background: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.star {
  background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--color-accent-600); padding: 2px;
}
.step {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); background: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 16px; color: var(--color-text);
}
.step:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: var(--color-accent); }

/* — bag photo (replaces the canvas <image-slot>) — */
.photo {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); cursor: pointer; border: 0; padding: 0;
  font: inherit; color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: 12px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Sits over .photo rather than inside it — a button nested in a button is
   invalid, and the picker had to become a real button to be reachable by
   keyboard. Positioned against .plate. */
.photo-clear {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-size: 11px; padding: 3px 8px; cursor: pointer; font-family: var(--font-heading);
  color: var(--color-text);
}
.hidden-file { display: none; }