/* ==========================================================================
   KEPLAR — components added in v0.2:
   status line, sheet stack, note cards, wikilinks, tags, autocomplete,
   clocks, jobs, dice, the diplomacy matrix, search hits and the activity feed.
   ========================================================================== */

/* --------------------------------------------------------- top chrome -- */

.iconbtn {
  position: relative;
  min-width: 38px;
  min-height: 34px;
  padding: 2px 8px;
  font-size: 14px;
  background: none;
  border: 1px solid var(--rule-soft);
  color: var(--phos-dim);
}
.iconbtn:hover { color: var(--phos-bright); }

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  color: var(--ink);
  background: var(--amber);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.7);
}

.statusline {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 12px 5px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phos-dim);
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(4, 16, 12, 0.5);
}
.statusline .warden { color: var(--amber); }
.statusline .sep { opacity: 0.4; }
.statusline a { color: var(--cyan); text-decoration: none; }

/* --------------------------------------------------------------- sheet -- */

.sheet-back {
  min-width: 34px;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 1;
}

.breadcrumb {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phos-dim);
  margin-bottom: 6px;
}
.breadcrumb a { color: var(--cyan); text-decoration: none; }

.crew-here {
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.6);
}

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

.note {
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--phos-dim);
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.note.by-warden { border-left-color: var(--amber); }
.note.is-hidden { border-style: dashed; border-left-color: var(--amber); }

.note-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-bottom: 4px;
}
.note.by-warden .note-meta .who { color: var(--amber); }
.note-meta .when { color: var(--phos-dim); margin-left: auto; }
.note-meta .pin { color: var(--ink); background: var(--amber); padding: 0 4px; }

.note-title {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--phos-bright);
  margin-bottom: 3px;
}
.note-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.note-sys { color: var(--phos-dim); text-decoration: none; }

.note-tags, .note-links { margin-top: 6px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.note-links { color: var(--phos-dim); }
.note-links a { color: var(--cyan); text-decoration: none; }
.note-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.note-actions button { min-height: 28px; padding: 2px 8px; font-size: 11px; }

/* wikilinks and tags ---------------------------------------------------- */

.wikilink {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted var(--cyan-dim);
  white-space: nowrap;
}
.wikilink:hover { color: var(--phos-bright); border-bottom-color: var(--phos); }
.wikilink.dead { color: var(--phos-dim); border-bottom: 1px dotted var(--phos-dim); opacity: 0.75; }

.taglink {
  color: var(--k, var(--cyan));
  text-decoration: none;
  white-space: nowrap;
}
.taglink:hover { text-shadow: 0 0 6px currentColor; }

.tag-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tagchip {
  min-height: 28px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--k, var(--cyan));
  border-color: color-mix(in srgb, var(--k, var(--cyan)) 45%, transparent);
  background: rgba(0, 0, 0, 0.3);
}
.tagchip.on {
  background: color-mix(in srgb, var(--k, var(--cyan)) 22%, transparent);
  color: var(--phos-bright);
  box-shadow: 0 0 8px color-mix(in srgb, var(--k, var(--cyan)) 40%, transparent);
}

.scope-row { display: flex; gap: 6px; margin: 8px 0 0; }
.scope-row button { flex: 1; min-height: 32px; font-size: 11px; }

/* [[ ]] autocomplete ---------------------------------------------------- */

.suggest {
  border: 1px solid var(--phos-dim);
  border-top: 0;
  background: #041410;
  max-height: 220px;
  overflow-y: auto;
  margin-top: -6px;
  margin-bottom: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
.suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
  min-height: 38px;
  font-size: 12.5px;
  color: var(--phos);
}
.suggest-item:hover { background: rgba(61, 251, 164, 0.14); color: var(--phos-bright); }
.suggest-type { color: var(--cyan); margin-right: 8px; }

/* --------------------------------------------------------------- clocks */

.clock-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--fc, var(--alert));
  background: var(--panel);
  padding: 10px;
  margin-bottom: 10px;
}
.clock-card.is-hidden { border-style: dashed; }
.clock-card.full { box-shadow: 0 0 16px color-mix(in srgb, var(--fc, var(--alert)) 45%, transparent); }
.clock-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.clock-name { color: var(--fc, var(--phos-bright)); text-decoration: none; font-size: 13.5px; letter-spacing: 1px; }
.clock-count { margin-left: auto; color: var(--fc, var(--phos)); font-size: 12px; }
.clock-face {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--fc, var(--phos));
  text-shadow: 0 0 8px currentColor;
  margin: 6px 0 4px;
  word-break: break-all;
}
.clock-bar { height: 6px; border: 1px solid var(--rule-soft); background: rgba(0, 0, 0, 0.5); }
.clock-bar span {
  display: block;
  height: 100%;
  background: var(--fc, var(--phos));
  box-shadow: 0 0 10px var(--fc, var(--phos));
  transition: width 400ms ease-out;
}

/* ----------------------------------------------------------------- jobs */

.job-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--fc, var(--phos));
  background: var(--panel);
  padding: 10px;
  margin-bottom: 10px;
}
.job-card.is-hidden { border-style: dashed; }
.job-head { display: flex; gap: 8px; align-items: baseline; }
.job-title { color: var(--phos-bright); text-decoration: none; font-size: 13.5px; letter-spacing: 1px; flex: 1; }
.job-status { font-size: 10px; letter-spacing: 1.5px; padding: 1px 5px; border: 1px solid currentColor; }
.job-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; margin-top: 4px; color: var(--phos-dim); }
.job-meta a { color: var(--cyan); text-decoration: none; }
.job-meta .pay { color: var(--amber); }
.job-claim { margin-top: 6px; font-size: 11px; color: var(--cyan); letter-spacing: 1px; }

.status-OPEN .job-status { color: var(--phos); }
.status-CLAIMED .job-status { color: var(--cyan); }
.status-COMPLETE .job-status { color: var(--phos-dim); }
.status-FAILED .job-status, .status-EXPIRED .job-status { color: var(--alert); }
.status-COMPLETE, .status-FAILED, .status-EXPIRED { opacity: 0.75; }

/* ----------------------------------------------------------------- dice */

.dice-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dice-presets button { min-height: 32px; padding: 2px 8px; font-size: 11.5px; }

.roll {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--phos-dim);
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.roll.by-warden { border-left-color: var(--amber); }
.roll-total {
  font-size: 20px;
  min-width: 46px;
  text-align: center;
  color: var(--phos-bright);
  text-shadow: var(--glow-md);
}
.roll-body { flex: 1; min-width: 0; }
.roll-meta { font-size: 11px; color: var(--cyan); display: flex; gap: 8px; }
.roll-meta .when { margin-left: auto; color: var(--phos-dim); }
.roll-detail { font-size: 11.5px; color: var(--phos-dim); word-break: break-all; }

/* ------------------------------------------------------------- chronicle */

.recap {
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--cyan-dim);
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.recap.is-hidden { border-style: dashed; border-left-color: var(--amber); }
.recap-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.recap-head a { color: var(--phos-bright); text-decoration: none; letter-spacing: 1px; }
.recap-head .muted { font-size: 11px; }

/* ------------------------------------------------------------- ops nav -- */

.ops-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.ops-nav button {
  flex: 1;
  min-height: 36px;
  padding: 4px 2px;
  font-size: 11px;
  letter-spacing: 1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--phos-dim);
}
.ops-nav button[aria-selected='true'] {
  color: var(--phos-bright);
  border-bottom-color: var(--phos);
  text-shadow: var(--glow-sm);
}

/* --------------------------------------------------------------- matrix */

.matrix-wrap { overflow-x: auto; border: 1px solid var(--rule-soft); }
.matrix { border-collapse: collapse; font-size: 12px; width: 100%; }
.matrix th, .matrix td {
  border: 1px solid var(--rule-soft);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}
.matrix .rowhead { text-align: left; font-weight: normal; letter-spacing: 1px; }
.matrix .rowhead a { color: inherit; text-decoration: none; }
.matrix .rowhead .idx { color: var(--phos-dim); margin-right: 6px; }
.matrix .self { color: var(--phos-dim); opacity: 0.5; }
.matrix-key { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; margin: 8px 0; }

.stance-ALLIED { color: var(--phos-bright); }
.stance-FRIENDLY { color: var(--phos); }
.stance-NEUTRAL { color: var(--phos-dim); }
.stance-RIVAL { color: var(--cyan); }
.stance-HOSTILE { color: var(--amber); }
.stance-WAR { color: var(--alert); text-shadow: 0 0 6px rgba(255, 77, 94, 0.6); }

.body-item .kind.stance-ALLIED, .body-item .kind.stance-FRIENDLY,
.body-item .kind.stance-NEUTRAL, .body-item .kind.stance-RIVAL,
.body-item .kind.stance-HOSTILE, .body-item .kind.stance-WAR {
  background: transparent;
  border: 1px solid currentColor;
}

/* --------------------------------------------------------------- search */

.search-hit {
  display: block;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--cyan-dim);
  padding: 7px 8px;
  margin-bottom: 6px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
}
.search-hit:hover { background: rgba(61, 251, 164, 0.08); }
.hit-type { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--cyan); }
.hit-title { display: block; color: var(--phos-bright); font-size: 13px; letter-spacing: 1px; }
.hit-snip { display: block; color: var(--phos-dim); font-size: 11.5px; margin-top: 2px; }

/* ----------------------------------------------------------------- feed */

.feed-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
  padding: 7px 2px;
  font-size: 12px;
  cursor: pointer;
}
.feed-row.fresh { color: var(--phos-bright); background: rgba(61, 251, 164, 0.06); }
.feed-row.fresh .feed-glyph { text-shadow: var(--glow-md); }
.feed-row.is-hidden { border-left: 2px solid var(--amber); padding-left: 6px; }
.feed-glyph { color: var(--cyan); min-width: 14px; }
.feed-text { flex: 1; min-width: 0; }
.feed-row .when { color: var(--phos-dim); font-size: 10.5px; white-space: nowrap; }

/* -------------------------------------------------------- map additions */

.orbit {
  fill: none;
  stroke: var(--phos-dim);
  stroke-width: calc(0.8px * var(--z, 1));
  stroke-dasharray: calc(2px * var(--z, 1)) calc(4px * var(--z, 1));
  opacity: 0.35;
}
.starnode .star-core {
  fill: rgba(61, 251, 164, 0.14);
  stroke: var(--phos-dim);
  stroke-width: 0.3px;
}
.starnode .glyph { fill: var(--phos-bright); font-size: 5px; text-anchor: middle; dominant-baseline: central; }
.starnode .label { fill: var(--phos-dim); font-size: 2.6px; text-anchor: middle; }

.bodynode .glyph { font-size: 4.2px; }
.bodynode .label { font-size: 2.9px; }

.party-ring {
  fill: none;
  stroke: var(--amber);
  stroke-width: 0.5px;
  stroke-dasharray: 1.6px 1.2px;
  opacity: 0.9;
}
.sysnode.has-party .glyph { fill: var(--phos-bright); }
.party-mark {
  fill: var(--amber);
  font-size: 2.6px;
  text-anchor: middle;
  letter-spacing: 0.4px;
}

/* ----------------------------------------------------------- file input */

.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

/* ------------------------------------------------------ reading comfort */

/* Long-form views get a measure; the map still uses the whole tube. */
@media (min-width: 900px) {
  #view-log, #view-ops, #view-admin, #view-factions {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Terminal-styled scrollbars, so the tube has no glossy OS chrome in it. */
.view, .sheet, .suggest, .matrix-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--phos-dim) transparent;
}
.view::-webkit-scrollbar, .sheet::-webkit-scrollbar,
.suggest::-webkit-scrollbar, .matrix-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.view::-webkit-scrollbar-track, .sheet::-webkit-scrollbar-track { background: transparent; }
.view::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb,
.suggest::-webkit-scrollbar-thumb, .matrix-wrap::-webkit-scrollbar-thumb {
  background: rgba(61, 251, 164, 0.28);
  border-radius: 4px;
}

/* Section headers must survive a narrow phone without shoving buttons off. */
.section-head { flex-wrap: wrap; row-gap: 6px; }
.section-head button { flex: 0 0 auto; }

/* Wide sheets read better with the same measure on a desktop screen. */
@media (min-width: 900px) {
  .sheet { max-width: 820px; border-radius: 4px 4px 0 0; }
}

/* Card actions hug their labels rather than stretching across the card. */
.job-card .btn-row, .clock-card .btn-row {
  justify-content: flex-end;
  gap: 6px;
}
.job-card .btn-row > *, .clock-card .btn-row > * { flex: 0 0 auto; min-width: 64px; }

/* Toasts clear the map tool row so a confirmation never covers the controls. */
.toast-stack { bottom: calc(var(--tap) + 58px + var(--safe-b)); }

/* --------------------------------------------------------- feature toggles */

.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.feature-row:last-child { border-bottom: 0; }
.feature-row input[type='checkbox'] {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.feature-row label {
  display: block;
  margin: 0;
  cursor: pointer;
}
.feature-row label b {
  display: block;
  color: var(--phos-bright);
  letter-spacing: 1px;
  font-size: 12.5px;
}
.feature-row label .muted {
  display: block;
  font-size: 11px;
  margin-top: 1px;
}