/* Navigation marks (25 Oct 2026; model/NAVIGATION.md sections 1 to 6; KIT.md section 13; shell-ext7.js). Loaded after kit-ext6.css and before app.css. Classes carry the e- prefix (the trail of a window the sx-win- one, as the
   window's own); hues and spacings are the tokens of kit.css 6.1, so the contrast fixes of the tokens reach these marks without a change here. The sketches are front/sketches/page_nav.py (shots concept-E-nav-screen1/2/3-1000.png). */

/* ---------- a key: Esc, Enter, the arrows, the shortcut ---------- */
.e-kb{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:20px;padding:0 6px;margin:0;border-radius:5px;border:1px solid var(--color-rule);border-bottom-width:2px;background:var(--color-surface);color:var(--color-text-muted);font:inherit;font-size:var(--fs-micro);font-weight:600;line-height:1;white-space:nowrap}

/* ---------- 1. the reading row: the page's readings, one row directly under the band (screen 1) ----------
   The frame: a page that renders .e-reads inside its .e-page gets the `reads` area between the band and the four figures; a page with areas of its own keeps them (its rule is the more specific). */
.ws:has(.e-page):has(.e-reads){grid-template-areas:"band band" "reads reads" "stats stats" "held held" "body rail" "foot foot"}
.ws:has(.e-page) .e-reads{grid-area:reads;margin-bottom:14px}
@media (max-width:900px){.ws:has(.e-page) .e-reads{order:1;margin-bottom:0}}
.e-reads{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;min-height:32px;font-size:var(--fs-small);color:var(--color-text-muted)}
.e-reads:focus{outline:none}
.e-reads:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring);border-radius:8px}
.e-rd-l{display:flex;align-items:center;flex:none;min-width:0;max-width:100%}
/* a level that is not shown keeps its place: nothing moves when it comes or goes (the row has one height, whatever the reading) */
.e-rd-l.is-off{visibility:hidden}
.e-rd-tabs{display:flex;flex-wrap:wrap;gap:6px}
/* level one: chip tabs. The pressed state is a colour: the weight, the padding and the border width are the same pressed or not, so no tab changes its width */
.e-rd-tab{appearance:none;-webkit-appearance:none;border:0;margin:0;font:inherit;height:30px;padding:0 15px;border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;background:var(--color-surface);color:var(--color-text-muted);box-shadow:inset 0 0 0 1px var(--color-rule);transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out),box-shadow var(--dur-press) var(--ease-out)}
.e-rd-tab:hover{color:var(--color-text);box-shadow:inset 0 0 0 1px var(--hue-blue)}
.e-rd-tab[aria-selected=true]{background:var(--hue-blue);color:#fff;box-shadow:inset 0 0 0 1px var(--hue-blue);cursor:default}
.e-rd-tab:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-rd-l1 .i{margin-left:8px;flex:none}
/* the "?" of the row, drawn as the other E titles draw theirs */
.e-reads .i{width:16px;height:16px;border:1.5px solid var(--color-text-muted);color:var(--color-text-muted);background:transparent}
.e-reads .i svg{display:none}
.e-reads .i::before{content:"?";font-size:10px;font-weight:700;line-height:1}
.e-reads .i:hover{color:var(--color-action);border-color:var(--color-action)}
.e-reads .i[aria-expanded=true]{background:var(--color-action);border-color:var(--color-action);color:#fff}
/* level two: a hairline at a fixed 14 px gap, the lead word, a quieter segmented control (the look of the top bar's market control) */
.e-rd-rule{width:1px;height:20px;background:var(--color-rule);margin:0 14px;flex:none}
.e-rd-lead{font-size:var(--fs-micro);color:var(--color-text-muted);margin-right:8px;white-space:nowrap}
.e-reads .seg.e-rd-seg{height:30px;padding:2px;gap:2px;border:0;border-radius:9px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);overflow:visible;align-items:center}
.e-reads .e-rd-seg>*+*{border-left:0}
.e-reads .e-rd-seg button{height:24px;min-height:24px;padding:0 11px;border-radius:7px;background:transparent;color:var(--color-text-muted);font-size:12.5px;font-weight:500;transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out)}
.e-reads .e-rd-seg button:hover{background:transparent;color:var(--color-text)}
.e-reads .e-rd-seg button[aria-pressed=true]{background:var(--color-text);color:#fff;font-weight:500}
.e-reads .e-rd-seg button:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
/* a level of more than four options is one chip-select, as wide as its longest option (set once the row is on the page: shell-ext7.js) */
.e-rd-selw{display:inline-flex}
.e-rd-selw>.e-cs{flex:1 1 auto}
.e-rd-selw .e-cs-face{flex:1 1 auto}
.e-rd-selw .e-cs-caret{margin-left:auto}
.e-rd-aside{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:var(--fs-small)}
@media (max-width:600px){
  /* at a phone's width the second level has the next line to itself (and keeps it when it is not shown, so the row is as high on every reading) */
  .e-rd-l:not(.e-rd-l1){flex:1 0 100%}
  .e-rd-l:not(.e-rd-l1) .e-rd-rule{display:none}
  .e-rd-aside{margin-left:0}
}

/* ---------- 2. the link mark of an entity (screens 1 and 2): the entity's own text, a dotted underline in the action blue, solid on hover and focus, no icon, no arrow ---------- */
.e-link{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:#2563eb99;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;border-radius:3px}
.e-link:hover,.e-link:focus-visible{text-decoration-style:solid;text-decoration-color:var(--color-action);color:var(--color-action)}
.e-link:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
/* on the dark field: the light selection blue */
:is(.e-dk,.e-dark,dialog.e-dk) .e-link,.e-link.e-dk{text-decoration-color:#93b1eacc}
:is(.e-dk,.e-dark,dialog.e-dk) .e-link:hover,:is(.e-dk,.e-dark,dialog.e-dk) .e-link:focus-visible,.e-link.e-dk:hover,.e-link.e-dk:focus-visible{color:#fff;text-decoration-color:#93b1ea}
:is(.e-dk,.e-dark,dialog.e-dk) .e-link:focus-visible,.e-link.e-dk:focus-visible{box-shadow:0 0 0 2px #141b24,0 0 0 4px #93b1ea}

/* ---------- 3. the window's trail row (screen 2): the back control naming the parent, the trail in quiet words, "Esc returns to the cluster" ---------- */
.sx-win-trailrow{display:flex;align-items:center;gap:10px;min-height:30px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--color-rule-soft);font-size:var(--fs-micro);color:var(--color-text-muted);white-space:nowrap}
.sx-win-back{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;flex:none;height:24px;margin:0;padding:0 10px;border:0;border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-text);font:inherit;font-size:var(--fs-micro);font-weight:600;line-height:1;cursor:pointer;transition:box-shadow var(--dur-press) var(--ease-out)}
.sx-win-back:hover{box-shadow:inset 0 0 0 1px var(--hue-blue)}
.sx-win-back:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.sx-win-crumbs{min-width:0;flex:0 1 auto;overflow:hidden}
.sx-win-crumbs ol{display:flex;align-items:center;margin:0;padding:0;list-style:none;min-width:0}
.sx-win-crumbs li{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sx-win-crumbs li+li::before{content:"/";content:"/" / "";flex:none;margin:0 7px;color:#b4bcc6;font-style:normal}
.sx-win-crumbs b{font-weight:600;color:var(--color-text)}
.sx-win-crumb{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit;cursor:pointer;border-radius:3px;white-space:nowrap}
.sx-win-crumb:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:3px}
.sx-win-crumb:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.sx-win-esc{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none}
/* the see-all list in the same chrome: its hint sits in the foot, beside Close */
.dialog-actions .sx-win-esc{margin-left:0;color:var(--color-text-muted);font-size:var(--fs-micro)}
.sx-seeall .sx-win-top{align-items:flex-start}
@media (max-width:600px){
  /* a phone: the back control and the hint share the first line, the trail takes the second */
  .sx-win-trailrow{flex-wrap:wrap;row-gap:6px;white-space:normal}
  .sx-win-crumbs{order:3;flex:1 0 100%}
  .sx-win-esc{margin-left:auto}
}

/* ---------- 4. the go-to: the field in the top bar and the palette it opens (screen 3) ---------- */
.e-gt-field{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:32px;margin:0;padding:0 5px 0 10px;border:0;border-radius:9px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-text-muted);font:inherit;font-size:var(--fs-small);text-align:left;cursor:pointer;transition:box-shadow var(--dur-press) var(--ease-out)}
.e-gt-field:hover{box-shadow:inset 0 0 0 1px var(--color-rule-hover)}
.e-gt-field:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-gt-field .e-ic{flex:none}
.e-gt-ph{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-gt-field .e-kb{flex:none}
dialog.e-gt{border:0;padding:0;margin:88px auto auto;width:min(684px,calc(100vw - 32px));max-width:none;max-height:none;background:var(--color-surface);color:var(--color-text);border-radius:16px;box-shadow:var(--shadow-dialog);overflow:visible}
dialog.e-gt::backdrop{background:var(--scrim)}
dialog.e-gt:focus{outline:none}
.e-gt-panel{display:flex;flex-direction:column;max-height:calc(100vh - 88px - 24px);border-radius:16px;overflow:hidden}
.e-gt-in{display:flex;align-items:center;gap:10px;flex:none;height:54px;padding:0 16px 0 18px;border-bottom:1px solid var(--color-rule);font-size:17px}
.e-gt-in .e-ic{flex:none;color:var(--color-text)}
.e-gt-input{flex:1 1 auto;min-width:0;height:100%;padding:0;margin:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--color-text);caret-color:var(--hue-blue)}
.e-gt-input::placeholder{color:var(--color-text-muted)}
.e-gt-input::-webkit-search-cancel-button{-webkit-appearance:none}
.e-gt-n{flex:none;font-size:var(--fs-micro);color:var(--color-text-muted);white-space:nowrap}
.e-gt-in .i{flex:none;width:16px;height:16px;border:1.5px solid var(--color-text-muted);color:var(--color-text-muted);background:transparent}
.e-gt-in .i svg,.e-gt-role .i svg{display:none}
.e-gt-in .i::before,.e-gt-role .i::before{content:"?";font-size:10px;font-weight:700;line-height:1}
.e-gt-in .i:hover,.e-gt-role .i:hover{color:var(--color-action);border-color:var(--color-action)}
.e-gt-in .i[aria-expanded=true],.e-gt-role .i[aria-expanded=true]{background:var(--color-action);border-color:var(--color-action);color:#fff}
.e-gt-body{flex:1 1 auto;min-height:0;overflow:auto;padding:6px 8px 8px;overscroll-behavior:contain}
.e-gt-gh{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;font-size:var(--fs-micro);font-weight:500;color:var(--color-text-muted)}
.e-gt-it{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:46px;padding:5px 10px;border-radius:10px;cursor:pointer}
.e-gt-it.on{background:var(--hue-blue-t);box-shadow:inset 3px 0 0 var(--hue-blue)}
.e-gt-gl{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--color-canvas);color:var(--color-text)}
.e-gt-tx{display:flex;flex-direction:column;min-width:0}
.e-gt-t{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:600;white-space:nowrap;min-width:0}
.e-gt-tt{overflow:hidden;text-overflow:ellipsis}
.e-gt-t mark{background:#2563eb1f;color:inherit;border-radius:3px;padding:0 1px}
.e-gt-s{font-size:var(--fs-micro);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-gt-to{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);color:var(--color-text-muted);white-space:nowrap}
.e-gt-go{display:none;align-items:center;gap:6px}
.e-gt-it.on .e-gt-to{color:var(--color-text)}
.e-gt-it.on .e-gt-s,.e-gt-it.on .e-gt-on{color:var(--color-text-secondary)}
.e-gt-it.on .e-gt-on{display:none}
.e-gt-it.on .e-gt-go{display:inline-flex}
.e-gt-more{min-height:32px}
.e-gt-more .e-gt-gl{background:none}
.e-gt-more .e-gt-t{font-size:var(--fs-micro);font-weight:600;color:var(--ink-blue,var(--hue-blue))}
.e-gt-more.on .e-gt-t{color:var(--color-action-strong)}
.e-gt-empty{margin:0;padding:16px 10px;font-size:var(--fs-small);color:var(--color-text-muted)}
.e-gt-empty[hidden]{display:none}
.e-gt-rec{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 10px 0;padding:8px 0 2px;border-top:1px solid var(--color-rule-soft);font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-gt-rec:empty{display:none}
.e-gt-chip{appearance:none;-webkit-appearance:none;margin:0;height:24px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-text);font:inherit;font-size:var(--fs-micro);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
.e-gt-chip:hover{box-shadow:inset 0 0 0 1px var(--hue-blue)}
.e-gt-chip:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-gt-ft{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;flex:none;min-height:44px;padding:6px 18px;border-top:1px solid var(--color-rule);background:var(--color-canvas);font-size:var(--fs-micro);color:var(--color-text-secondary)}
.e-gt-ft>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.e-gt-ft .e-gt-role{margin-left:auto;white-space:normal}
.e-gt-ft .e-kb{background:var(--color-surface)}
.e-gt-role .i{width:16px;height:16px;border:1.5px solid var(--color-text-muted);color:var(--color-text-muted);background:transparent}
@media (max-width:600px){
  dialog.e-gt{margin-top:56px}
  .e-gt-panel{max-height:calc(100vh - 56px - 16px)}
  .e-gt-in{padding:0 12px 0 14px}
  .e-gt-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* not drawn on a phone, still read: it is the live region of the count */
  .e-gt-it{grid-template-columns:28px minmax(0,1fr);row-gap:2px}
  .e-gt-to{grid-column:2}
  .e-gt-ft{padding:8px 14px}
  .e-gt-ft .e-gt-role{margin-left:0;flex-basis:100%}
}