/* ==========================================================================
   EntrePanas — proposal demo

   The chrome around the prototypes is a neutral 18% grey with no accent colour
   of its own, for the same reason a print proofing table is grey: three colour
   directions are being judged against each other, so the surround must not
   tint the comparison. The only saturated colour in the chrome is borrowed
   from whichever direction is on stage.
   ========================================================================== */

:root {
  --field:     #2b2d30;
  --field-up:  #34373b;
  --field-in:  #232528;
  --rule:      #43474c;
  --rule-soft: #383b3f;

  --ink:       #edeef0;
  --ink-mid:   #a8adb3;
  --ink-dim:   #9ea3aa;

  --accent:    #9ea3aa;

  --bar-h:     58px;
  --hint-h:    38px;
  --pad:       clamp(16px, 2.2vw, 24px);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* --- shell ---------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-rows: var(--bar-h) minmax(0, 1fr) var(--hint-h);
  height: 100%;
}

/* Present mode strips the chrome so only the work is on screen. */
.shell[data-present="true"] { grid-template-rows: 0 minmax(0, 1fr) 0; }
.shell[data-present="true"] .bar,
.shell[data-present="true"] .hint { opacity: 0; pointer-events: none; }

.bar,
.hint { transition: opacity 0.18s ease; }

/* --- control bar ---------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  gap: 10px 26px;
  padding-inline: clamp(12px, 2vw, 22px);
  background: var(--field-in);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bar__mark img { width: 28px; height: 28px; object-fit: contain; flex: none; }

.bar__name {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.bar__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* direction tabs */

.bar__tabs {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}

.tab {
  --accent: #9ea3aa;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 15px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover { color: var(--ink); }

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab__no {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  opacity: 0.65;
}

.tab__name {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
}

/* tools */

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

.seg {
  display: flex;
  border: 1px solid var(--rule);
}

.seg__btn,
.tool {
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seg__btn { border-left: 1px solid var(--rule); }
.seg__btn:first-child { border-left: 0; }

.seg__btn:hover,
.tool:hover { color: var(--ink); background: var(--field-up); }

.seg__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--field-in);
}

.tool {
  border: 1px solid var(--rule);
}

.tool[aria-pressed="true"],
.tool[aria-expanded="true"] {
  background: var(--ink);
  color: var(--field-in);
  border-color: var(--ink);
}

/* --- stage ---------------------------------------------------------------- */

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: clamp(16px, 2.4vw, 34px);
  min-height: 0;
  overflow: hidden;
}

/* A hairline grid, faint enough to read as a work surface rather than decor. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
  pointer-events: none;
}

.screen {
  position: relative;
  z-index: 1;
  flex: none;
}

.device {
  transform-origin: top left;
  background: var(--paper, #fff);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.device__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Phone and tablet get a soft corner so the viewport reads as a device. */
.stage[data-view="phone"] .device,
.stage[data-view="tablet"] .device { border-radius: 14px; }

.screen__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding-top: 9px;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  display: none;
}

.shell[data-compare="true"] .screen__cap { display: block; }

.screen__no {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

/* --- file:// warning ------------------------------------------------------ */

.serve {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 46ch;
  margin: 0;
  padding: 20px 22px;
  background: var(--field-in);
  border: 1px solid var(--rule);
  border-left: 3px solid #d98b4a;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
}

.serve b { color: var(--ink); display: block; margin-bottom: 6px; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
}

/* --- hint rail ------------------------------------------------------------ */

.hint {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  padding-inline: clamp(12px, 2vw, 22px);
  border-top: 1px solid var(--rule);
  background: var(--field-in);
  font-size: 12px;
  color: var(--ink-dim);
  overflow: hidden;
  white-space: nowrap;
}

.hint b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
  padding: 2px 5px;
  margin-right: 4px;
}

.hint__note { margin-left: auto; color: var(--ink-dim); }
.hint__note b { border: 0; padding: 0; margin: 0; font-family: inherit; font-size: 12px; }

/* --- present-mode exit ---------------------------------------------------
   Only affordance left once the chrome is gone. Idles at low opacity so it
   does not compete with the work, and comes up on hover or focus.           */

.escape {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  display: none;
  border: 1px solid var(--rule);
  background: var(--field-in);
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  opacity: 0.32;
  transition: opacity 0.18s ease;
}

.shell[data-present="true"] .escape { display: block; }

.escape:hover,
.escape:focus-visible { opacity: 1; color: var(--ink); }

/* --- notes panel ---------------------------------------------------------- */

.notes {
  --accent: var(--ink-dim);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: var(--field-in);
  border-left: 1px solid var(--rule);
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.42);
}

.notes[hidden] { display: none; }

.notes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.notes__count {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  margin-left: 6px;
}

.notes__close {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  cursor: pointer;
}

.notes__close:hover { color: var(--ink); background: var(--field-up); }

/* --- notes: composer ------------------------------------------------------
   The stamp is the point of the composer: it shows, before you type, which
   direction and viewport the note will be filed against — so the note itself
   never has to say "on the phone version of Mercado".                        */

.compose {
  padding: 18px var(--pad) 16px;
  border-bottom: 1px solid var(--rule);
}

.compose__cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
  padding: 4px 9px;
  white-space: nowrap;
}

.stamp__dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--accent);
}

.stamp__view { color: var(--ink-dim); }
.stamp__view::before { content: "· "; }

.compose__field {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 76px;
  padding: 11px 12px;
  background: var(--field);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
}

.compose__field::placeholder { color: var(--ink-dim); }
.compose__field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.compose__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.compose__keys {
  font-size: 11.5px;
  color: var(--ink-dim);
}

.compose__keys b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
  padding: 2px 5px;
}

.btn {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--field-in);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover { background: #fff; border-color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-mid);
}

.btn--ghost:hover { background: var(--field-up); border-color: var(--rule); color: var(--ink); }

/* --- notes: filters -------------------------------------------------------
   The counts are the reason these exist: how many notes a direction has
   collected is itself worth seeing during a review.                          */

.ntools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.fils { display: flex; gap: 4px; }

.fil {
  --accent: var(--ink-mid);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 6px 9px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fil:hover { color: var(--ink); background: var(--field-up); }

.fil[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.fil__n { color: var(--ink-dim); font-size: 9.5px; }
.fil[aria-pressed="true"] .fil__n { color: var(--ink-mid); }

/* --- notes: the list ------------------------------------------------------ */

.notes__body {
  overflow-y: auto;
  padding: 0 var(--pad) 24px;
}

.ntry {
  --accent: var(--ink-mid);
  padding: 15px 0 16px 13px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid var(--accent);
  margin-top: 4px;
}

.ntry__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.ntry__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.ntry__meta {
  font-size: 11.5px;
  color: var(--ink-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ntry__acts {
  display: flex;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ntry:hover .ntry__acts,
.ntry:focus-within .ntry__acts { opacity: 1; }

.mini {
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 5px;
  cursor: pointer;
}

.mini:hover { color: var(--ink); }
.mini[data-act="del"]:hover,
.mini[data-armed="true"] { color: #e08a6a; }

.ntry__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ntry__edit {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 70px;
  padding: 9px 10px;
  background: var(--field);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
}

.empty {
  margin: 30px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 34ch;
}

.notes__foot {
  margin: 0;
  padding: 10px var(--pad);
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--ink-dim);
}

.notes__foot[data-warn="true"] { color: #e08a6a; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .bar__meta { display: none; }
}

@media (max-width: 1020px) {
  .bar__name { display: none; }
  .hint__note { display: none; }
}

@media (max-width: 860px) {
  :root { --bar-h: auto; }
  .shell { grid-template-rows: auto minmax(0, 1fr) var(--hint-h); }
  .bar {
    flex-wrap: wrap;
    padding-block: 10px;
    row-gap: 10px;
  }
  .bar__tabs { margin-inline: 0; order: 3; width: 100%; }
  .bar__tools { margin-left: auto; }
  .tab { flex: 1; justify-content: center; }
}

@media (max-width: 620px) {
  .seg { display: none; }
  .hint { font-size: 11px; gap: 12px; }
  .tab__no { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}