/* ============================================================
   map-design.css — the campus planning board
   ------------------------------------------------------------
   Owned by the map lane. Loaded after mobile.css, so anything the
   phone layer sets for a class used here is restated below inside
   the same breakpoints rather than left to collide: mobile.css is
   not edited by this lane.

   The page is one board. A large georeferenced photograph carries
   fixed numbered locators; the money, the counts and the college
   list sit under it. Nothing decorative is drawn that does not
   carry a number a reader can check.
   ============================================================ */

.map-shell {
  /* The board's own palette. Written as variables with the shared
     names' values inline so this page is correct whether or not
     experience.css has loaded yet. */
  --ink:    #071C18;
  --raise:  #102C25;
  --top:    #183C31;
  --fg:     #F5F1E7;
  --fg2:    #B9CCC2;
  --mute:   #8CA79C;
  --mint:   #A7E0BA;
  --gold:   #E5C58B;
  --line:   rgba(174,208,188,.18);
  --line-2: rgba(174,208,188,.30);
  --grid:   rgba(174,208,188,.10);
  --amber:  #E0A857;
  --terra:  #C97A56;

  max-width: 1560px;
  margin: 0 auto;
  padding: .9rem var(--pad) 3.5rem;
}

body.instrument { background: var(--ink, #071C18); color: #F5F1E7; font-family: var(--sans); }
body.instrument::before { opacity: .26; }

/* ---------- 1. the header, kept to four lines ---------- */

.map-head { max-width: 96ch; }
.map-head .kicker { color: var(--mute); margin: 0 0 .35rem; }
.map-head h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  color: var(--fg); margin: 0 0 .4rem; letter-spacing: -.01em;
}
.map-head .sub { color: var(--fg2); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 74ch; }

.mapnote { margin: .7rem 0 0; }
.mapnote > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); cursor: pointer; list-style: none;
  border: 1px solid rgba(229,197,139,.38); border-radius: 8px;
  padding: .5rem .8rem; min-height: 44px; box-sizing: border-box;
}
.mapnote > summary::-webkit-details-marker { display: none; }
.mapnote > summary::after { content: "＋"; font-weight: 400; color: var(--gold); }
.mapnote[open] > summary::after { content: "−"; }
.mapnote > summary:hover { background: rgba(229,197,139,.10); }
.mapnote > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mapnote-body {
  margin-top: .7rem; padding: .95rem 1.1rem;
  background: var(--raise); border: 1px solid var(--line); border-radius: 12px;
  color: var(--fg2); font-size: .92rem; line-height: 1.62; max-width: 92ch;
}
.mapnote-body p { margin: 0 0 .7rem; }
.mapnote-body p:last-child { margin-bottom: 0; }
.mapnote-body b { color: var(--fg); }
.mapnote-body a { color: var(--gold); }

/* ---------- 2. the board ---------- */

.board {
  margin-top: 1.1rem;
  background: linear-gradient(180deg, var(--top) 0%, var(--raise) 60%);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* one directional highlight along the top edge, and depth under it */
  box-shadow: inset 0 1px 0 rgba(245,241,231,.07), 0 18px 40px -24px rgba(0,0,0,.85);
  overflow: hidden;
}

/* The frame holds the photograph and the chips bolted to its corners.
   mobile.js moves the geographic canvas into its own pinch stage;
   the controls stay fixed above that stage. */
.mapframe { position: relative; }

.mapbox {
  position: relative;
  width: 100%;
  aspect-ratio: 2.3;
  max-height: 60vh;
  min-height: 320px;
  /* All panning belongs to the geographic transform. Focus and browser
     scroll-into-view must not move an invisible scroll position as well. */
  overflow: clip;
  background: #05100D;
  border-bottom: 1px solid var(--line);
  /* the drawing is the control surface: no text selection on a drag */
  -webkit-user-select: none; user-select: none;
}

/* everything that pans and zooms together. mobile.js later wraps this
   in its own .map-stage for pinch; the two transforms compose. */
.map-canvas {
  position: absolute; top: 0; left: 0; width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.mapbox > .map-stage { position: absolute; inset: 0; }
.map-reset { display:none; }
.map-canvas img {
  display: block; width: 100%; height: auto;
  filter: saturate(.82) brightness(.98) contrast(1.04);
}
.map-canvas .overlay { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; }

/* the photograph is a ground, not a picture: a fine scrim keeps the
   corner chips and the white labels off a bright roof */
.mapbox::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(125% 95% at 50% 45%, rgba(7,28,24,0) 45%, rgba(7,28,24,.42) 100%),
    linear-gradient(180deg, rgba(7,28,24,.26) 0%, rgba(7,28,24,0) 16%, rgba(7,28,24,0) 80%, rgba(7,28,24,.3) 100%);
}
.mapbox.dragging { cursor: grabbing; }
.mapbox.pannable { cursor: grab; }

/* ---------- 2.1 the chips that sit on the board ---------- */

.chipbar { position: absolute; z-index: 3; display: flex; gap: .4rem; align-items: flex-start; }
.chipbar.tl { top: .7rem; left: .7rem; }
.chipbar.tr { top: .7rem; right: .7rem; flex-direction: column; align-items: flex-end; }
.chipbar.bl { bottom: .7rem; left: .7rem; align-items: flex-end; }

.glass {
  background: rgba(7,28,24,.78);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(245,241,231,.06);
}

/* the three figures a reader watches while they work */
.tally { display: flex; align-items: stretch; min-height: 44px; box-sizing: border-box; }
.tally .stat { display: grid; gap: .1rem; padding: .45rem .85rem; align-content: center; background:transparent; }
.tally .stat + .stat { border-left: 1px solid var(--line); }
.tally .n { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tally .n i { font-style: normal; color: var(--mute); font-size: .82em; }
.tally .t { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); line-height: 1.2; }

/* zoom cluster */
.zoomer { display: flex; flex-direction: column; overflow: hidden; }
.zoomer button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: none; border-bottom: 1px solid var(--line-2);
  color: var(--fg); font-family: var(--sans); font-size: 1.15rem; font-weight: 600;
  cursor: pointer;
}
.zoomer button:last-child { border-bottom: none; font-size: .74rem; letter-spacing: .04em; }
.zoomer button:hover:not(:disabled) { background: rgba(167,224,186,.14); color: var(--mint); }
.zoomer button:disabled { color: var(--mute); opacity: .45; cursor: default; }
.zoomer button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* north and ground scale */
.northscale { display: flex; align-items: center; gap: .85rem; padding: .5rem .8rem; min-height: 44px; box-sizing: border-box; }
.northscale .north { display: flex; align-items: center; gap: .35rem; color: var(--fg); }
.northscale .north svg { display: block; }
.northscale .north span { font-family: var(--display); font-size: 1rem; font-weight: 700; line-height: 1; }
.northscale .rule { display: grid; gap: .18rem; justify-items: center; }
.northscale .bar {
  height: 8px; border: 1px solid var(--fg); border-top: none; box-sizing: border-box;
  background: linear-gradient(90deg, rgba(245,241,231,.9) 0 50%, transparent 50% 100%);
}
.northscale .num { font-family: var(--mono); font-size: .74rem; color: var(--fg2); white-space: nowrap; }

/* ---------- 2.2 the drawing itself ---------- */

#ov { pointer-events: none; }
#ov .pin, #ov .sat { pointer-events: auto; cursor: pointer; transform-box: view-box; }
#ov .hit { fill: transparent; }
#ov .halo { transition: none; }
#ov text { pointer-events: none; }

.bkey {
  font-family: var(--sans); font-weight: 700; fill: var(--fg);
  paint-order: stroke; stroke: rgba(7,28,24,.85);
  pointer-events: none; display: block;
}
.blabel { font-family: var(--sans); font-weight: 700; fill: var(--fg); pointer-events: none; }
.bsub   { font-family: var(--mono); font-weight: 500; fill: var(--fg2); pointer-events: none; }
.satlabel { font-family: var(--mono); font-weight: 500; pointer-events: none; }
.leader { pointer-events: none; }

#ov .pin:focus { outline: none; }
#ov .focusring { opacity: 0; }
#ov .pin:focus-visible .focusring, #ov .sat:focus-visible .focusring { opacity: 1; }

/* a click that answers: one short settle on the pin that moved */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pinsettle {
    0%   { transform: scale(.82); }
    62%  { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  #ov .justmoved { animation: pinsettle .34s cubic-bezier(.22,.9,.25,1) both; }
  @keyframes rowsettle { 0% { background: rgba(229,197,139,.28); } 100% { background: transparent; } }
  .crow.justmoved { animation: rowsettle .5s ease-out both; }
}

/* the map answers the list, and the list answers the map */
#ov .pin.linked .rim, #ov .sat.linked circle { stroke-width: 3.5; }
#ov .leader.linked .leadbox { stroke: var(--gold); }

/* ---------- 2.3 the bar docked under the photograph ---------- */

.maplegend {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem 1.6rem; align-items: start;
  padding: .95rem 1.1rem 1.05rem;
  background: linear-gradient(180deg, rgba(7,28,24,.55), rgba(7,28,24,0));
}
.maplegend .lbl { display: block; color: var(--mute); margin-bottom: .45rem; }

.modes { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.modes button {
  background: transparent; color: var(--fg2); border: none;
  font-family: var(--sans); font-weight: 600; font-size: .84rem;
  padding: .6em 1em; min-height: 44px; cursor: pointer;
}
.modes button + button { border-left: 1px solid var(--line-2); }
.modes button:hover { background: rgba(167,224,186,.10); color: var(--fg); }
.modes button.on { background: var(--gold); color: #0B2116; }
.modes button:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

.scalebox { min-width: 0; }
.scalebox .cap { display: block; font-weight: 700; color: var(--fg); font-size: .8rem; letter-spacing: .02em; margin-bottom: .35rem; }
.scalebar { display: block; width: 100%; max-width: 460px; height: 34px; }
.scalebar text { font-family: var(--mono); font-size: 10px; fill: var(--fg2); }
.scalenote { display: block; color: var(--mute); font-size: .78rem; margin-top: .35rem; line-height: 1.5; max-width: 62ch; }
.scalenote b { color: var(--fg2); }

.mapkey { display: grid; gap: .5rem; max-width: 46ch; font-size: .78rem; color: var(--fg2); line-height: 1.4; }
.mapkey .row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .55rem; align-items: center; }
.mapkey svg { display: block; }
.mapkey b { color: var(--fg); font-weight: 600; }

/* ---------- 3. the deck: money on the left, colleges on the right ---------- */

.deck {
  display: grid;
  grid-template-columns: minmax(330px, .85fr) minmax(0, 1.7fr);
  gap: 1.1rem; margin-top: 1.1rem; align-items: start;
}
.panel {
  background: var(--raise); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.05rem 1.15rem 1.15rem;
  box-shadow: inset 0 1px 0 rgba(245,241,231,.05);
}
.panel > .lbl:first-child { margin-top: 0; }

.lbl { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }

.ctl label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); margin-bottom: .3rem; }
.ctl .val {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--gold);
  line-height: 1.05; font-variant-numeric: tabular-nums; margin: .1rem 0 .55rem;
}
.ctl .sep { display: none; }
input[type=range] { width: 100%; accent-color: var(--gold); min-height: 44px; }

.presets { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 0; }
.presets button {
  font-family: var(--mono); font-size: .76rem;
  background: rgba(229,197,139,.10); border: 1px solid rgba(229,197,139,.42);
  color: var(--gold); border-radius: 8px; padding: .55em .8em; min-height: 44px; cursor: pointer;
}
.presets button:hover { background: rgba(229,197,139,.2); }
.presets button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.nochange {
  margin: .8rem 0 0; padding: .6rem .75rem;
  border-left: 3px solid var(--terra); background: rgba(201,122,86,.14);
  border-radius: 0 8px 8px 0; font-size: .8rem; line-height: 1.55; color: var(--fg2);
}
.nochange b { color: var(--fg); }

.sumline {
  font-family: var(--mono); font-size: .8rem; color: var(--fg2);
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  line-height: 1.7;
}
.sumline b { color: var(--fg); }

/* ---------- 3.1 the college list ---------- */

.listhead { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.listhead .count { font-family: var(--mono); font-size: .82rem; color: var(--fg2); }
.listhead .count b { color: var(--gold); }
.bulk { display: flex; gap: .45rem; }
.bulk button {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  background: transparent; border: 1px solid var(--line-2); color: var(--fg2);
  border-radius: 8px; padding: .5em .8em; min-height: 44px; cursor: pointer;
}
.bulk button:hover { border-color: var(--mint); color: var(--mint); }
.bulk button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 1240px) { .clist { grid-template-columns: minmax(0, 1fr); } }

.crow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .75rem;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: linear-gradient(180deg, rgba(24,60,49,.65), rgba(16,44,37,.65));
  border: 1px solid var(--line); border-left: 4px solid var(--mint);
  border-radius: 12px; padding: .75rem .9rem; cursor: pointer;
  position: relative;
}
.crow:hover { border-color: var(--line-2); background: linear-gradient(180deg, rgba(24,60,49,.9), rgba(16,44,37,.9)); }
.crow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.crow.off {
  border-left-style: dashed; border-left-color: var(--mute);
  background: repeating-linear-gradient(135deg, rgba(140,167,156,.07) 0 6px, transparent 6px 12px), rgba(7,28,24,.5);
}
.crow.off .cname, .crow.off .meta { color: var(--mute); }
.crow.unfunded { border-left-color: var(--terra); }

.crow .ckey {
  grid-row: 1 / span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: .1rem;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--gold); border: 1px solid rgba(229,197,139,.5); border-radius: 50%;
  flex: none; font-variant-numeric: tabular-nums;
}
.crow.off .ckey { color: var(--mute); border-color: var(--line-2); border-style: dashed; }

.crow h4 { grid-column: 2; grid-row: 1; padding-right: 4.6rem; margin: 0; font-size: .95rem; color: var(--fg); display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-family: var(--sans); font-weight: 700; line-height: 1.25; }
.crow .cname { color: var(--fg); }
.crow .meta { grid-column: 2; grid-row: 2; font-family: var(--mono); font-size: .74rem; color: var(--mute); margin-top: .3rem; line-height: 1.6; }
.crow .meta b { color: var(--fg2); font-weight: 500; }

/* the in/out mark: a box that is filled or empty, never colour alone */
.inmark { position: absolute; top: .7rem; right: .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.inmark .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--mint);
  background: var(--mint); display: inline-flex; align-items: center; justify-content: center;
}
.inmark .box svg { display: block; }
.inmark .word { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--mint); text-transform: uppercase; }
.crow.off .inmark .box { background: transparent; border-color: var(--mute); border-style: dashed; }
.crow.off .inmark .word { color: var(--mute); }

.wave { font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; padding: .2em .5em; border-radius: 4px; border: 1px solid; }
.w1 { color: var(--mint); border-color: rgba(167,224,186,.5); }
.w2 { color: var(--gold); border-color: rgba(229,197,139,.5); }
.w3 { color: #8FC9BC; border-color: rgba(143,201,188,.5); }
.wS { color: #F0A47C; border-color: rgba(240,164,124,.5); }
.hyb { font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; color: #8FC9BC; border: 1px dashed rgba(143,201,188,.5); padding: .2em .5em; border-radius: 4px; }

/* ---------- 4. later phases, and the sources ---------- */

.regions { margin-top: 1.1rem; }
.regions .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.chip { font-size: .76rem; color: var(--fg2); border: 1px dashed var(--line-2); border-radius: 999px; padding: .4em .85em; line-height: 1.45; }

.provenance { font-size: .78rem; color: var(--mute); margin-top: .8rem; line-height: 1.65; max-width: 104ch; }
.provenance b { color: var(--fg2); }
.provenance a { color: var(--gold); }

.srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.1rem; }

/* ---------- 5. the phone ----------
   mobile.css owns the type floor and the pinch stage. These restate the
   map's own display rules inside the same breakpoints, because this file
   loads after it and an unqualified rule here would silently win. */

@media screen and (max-width: 1080px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .maplegend { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 760px), screen and (pointer: coarse) and (max-width: 1024px) {
  .map-shell { padding-top: .6rem; }
  .mapbox { aspect-ratio: 1.3; max-height: none; min-height: 250px; }
  /* At the scale a phone draws the board, a name set large enough to read
     would cover the campus. The locators keep their numbers, and the list
     under them carries the names — the pairing a printed map uses. */
  /* mobile.css hides .blabel/.bsub and swaps .bkey directly. These carry the
     same intent onto this page's own structure, and win on specificity so a
     42px label set in shared user units cannot land on the drawing. */
  .leader, #ov .satlabel { display: none; }
  .mapbox.zoomed .leader,
  .mapbox.zoomed #ov .blabel,
  .mapbox.zoomed #ov .bsub,
  .mapbox.zoomed #ov .satlabel { display: block; }
  #ov .bkey, .mapbox.zoomed #ov .bkey { display: block; }
  .crow h4 { padding-right: 0; }
  .inmark { grid-column: 2; grid-row: 3; }
  .chipbar.tl { display: none; }
  .chipbar.bl { bottom: .5rem; left: .5rem; }
  .northscale { padding: .35rem .5rem; }
  .northscale .north { display: none; }
  .chipbar.tr { top: .5rem; right: .5rem; }
  .modes { width: 100%; }
  .modes button { flex: 1 1 auto; font-size: 15px; }
  .scalebar text { font-size: 15px; }
  .mapkey { font-size: 14px; }
  .mapkey .row { grid-template-columns: 34px minmax(0, 1fr); }
  .clist { grid-template-columns: minmax(0, 1fr); }
  .crow { padding: .8rem .85rem; min-width: 0; }
  .crow h4 { flex-wrap: wrap; font-size: 15px; }
  .inmark { position: static; grid-column: 2; margin-top: .45rem; }
  .listhead .count { font-size: 14px; }
  .northscale .num { font-size: 14px; }
  .mapnote > summary { font-size: 14px; }
  .zoomer button, .zoomer button:last-child { font-size: 15px; }
  .inmark .word { font-size: 14px; }
  /* mobile.css sets these; this file loads after it, so it restates them
     rather than silently winning with a smaller size */
  .presets button { font-size: 14px; padding: 0 .95em; }
  .bulk button { font-size: 14px; }
  .listhead .count b { font-size: 14px; }
  .tally .t { font-size: 14px; }
  .tally .stat { padding: .45rem .6rem; }
}

/* ---------- 6. print ----------
   The board prints as it stands: the photograph, the locators, the
   labels, the scale and the list. The controls do not. */

@media print {
  .mapbox > .map-stage { transform:none!important; }
  body.instrument { background: #fff; color: #182218; }
  .map-shell { max-width: none; padding: 0; }
  .topbar, .presets, .zoomer, .bulk, .nochange, input[type=range], .map-reset { display: none !important; }
  .map-head h1 { color: #182218; }
  .map-head .sub, .provenance, .scalenote, .mapkey, .chip { color: #444; }
  .mapnote { display: none; }
  .board { background: #fff; border-color: #999; box-shadow: none; break-inside: avoid; }
  .mapbox { aspect-ratio: 2000 / 1256; max-height: none; border-bottom-color: #999; }
  .map-canvas { transform:none!important; }
  .mapbox::after { display: none; }
  .map-canvas img { filter: none; }
  .maplegend { background: none; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .maplegend .modes { display:block; }
  .maplegend .modes button { display:none; width:100%; }
  .maplegend .modes button.on { display:block; }
  .maplegend :is(.lbl,.mapkey,.cap,.scalenote), .map-shell :is(.lbl,.count,.phase,.chip,.panel .big) { color:#25372d!important; }
  .map-shell :is(b,label,.ctl .val,.wave,.hyb) { color:#25372d!important; }
  .maplegend .lbl, .scalebox .cap { color: #182218; }
  .scalebar text { fill: #333; }
  .modes button { color: #444; border-color: #999; }
  .modes button.on { background: #D9BE85; color: #182218; }
  .glass { background: rgba(255,255,255,.9); border-color: #999; backdrop-filter: none; }
  .northscale .north, .northscale .bar { color: #182218; border-color: #182218; }
  .northscale .num, .tally .t { color: #333; }
  .tally .n { color: #7A5E1E; }
  .deck { grid-template-columns: 1fr; }
  .deck > .panel:first-child { break-inside:avoid; }
  .panel { background: #fff; border-color: #999; }
  .clist { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .crow { background: #fff !important; border-color: #999; break-inside: avoid; }
  .crow .cname, .crow h4 { color: #182218; }
  .crow .meta { color: #444; }
  .crow .ckey { color: #7A5E1E; border-color: #999; }
  .inmark .word { color: #333; }
  .inmark .box { background: #182218; border-color: #182218; }
  .crow.off .inmark .box { background: transparent; }
  .sumline { color: #333; }
  .sumline b { color: #182218; }
}