/* MatSu Blotter. Fresh design: newsprint blotter.
   Warm-white paper, ink navy-black, blotter red accent. No fleet CSS. */
:root{
  --paper:#FBF9F3; --panel:#fffdf6; --ink:#21252b; --muted:#655F50;
  --line:#D6C8A9; --red:#a31621; --amber:#b97f16; --slate:#33566e;
  --water:#b9cfdd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.42}
a{color:var(--slate)}
a:hover{color:var(--red)}
.masthead{position:relative;border-bottom:2px solid var(--red);padding:5px 12px 8px;
  display:flex;align-items:baseline;gap:5px 10px;flex-wrap:wrap}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:4px;
  background:var(--ink);pointer-events:none}
.masthead .mark{height:52px;width:auto;align-self:center;flex:none}
.masthead .marklink{align-self:center;flex:none;line-height:0}
.masthead h1 a{color:inherit;text-decoration:none}
.masthead h1 a:hover{color:inherit}
.masthead h1{font-family:Georgia,"Times New Roman",serif;font-size:27px;
  margin:0;letter-spacing:.2px;font-weight:700}
.masthead .tagline{color:var(--muted);font-size:12.5px;flex-basis:100%}
@media (min-width:1000px){.masthead .tagline{flex-basis:auto;flex:none}}
.stamp{margin-left:auto;font-family:Georgia,serif;font-weight:700;color:var(--red);
  border:2px solid var(--red);border-radius:3px;padding:1px 7px;font-size:13px;
  transform:rotate(-3deg);letter-spacing:1.5px;text-transform:uppercase}
.subbar{padding:3px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.controls{display:flex;gap:6px;flex-wrap:wrap;padding:5px 12px;align-items:flex-end}
.controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;
  min-width:0;max-width:100%}
.controls select,.controls input{font-size:14px;padding:5px 6px;border:1px solid var(--line);
  border-radius:4px;background:var(--panel);color:var(--ink);min-width:0;max-width:100%;height:32px}
.seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:0 10px;height:30px;font-size:13px;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--paper)}
.readout{font-size:13px;color:var(--ink);margin:0;padding:4px 12px;background:var(--panel);
  border-top:1px solid var(--line)}
#mapwrap{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#eef0ea}
#map{display:block;width:100%;height:56vh;min-height:340px;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}
.mapbtns{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:5px}
.mapbtns button{width:34px;height:34px;font-size:18px;border:1px solid var(--line);
  background:var(--panel);border-radius:5px;cursor:pointer;line-height:1}
.maphint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;
  background:var(--ink);color:var(--paper);font-size:12.5px;padding:5px 11px;border-radius:4px;
  pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .45s ease}
.maphint.show{opacity:.93}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:6px 12px;font-size:12.5px;color:var(--ink);
  border-bottom:1px solid var(--line);background:var(--panel)}
.legend b{font-weight:600}
.legend>span{flex:none;white-space:nowrap}
@media (max-width:520px){
  .legend{gap:5px 14px}
  .legend>span{flex:0 1 100%;white-space:normal}
}
.sym{display:inline-block;vertical-align:-2px;margin-right:4px}
main{padding:10px 12px;max-width:1060px;margin:0 auto}
.countline{font-size:13px;color:var(--muted);margin:2px 0 8px}
.card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--slate);
  border-radius:4px;padding:8px 10px;margin:0 0 8px}
.card.t-point{border-left-color:var(--red)}
.card.t-corridor{border-left-color:var(--amber)}
.card h3{margin:0 0 2px;font-size:16px}
.card .meta{font-size:12.5px;color:var(--muted)}
.chip{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:9px;
  padding:0 7px;margin-left:6px;color:var(--ink);background:var(--paper);vertical-align:1px}
.chip.tp{border-color:var(--red);color:var(--red)}
.chip.tc{border-color:var(--amber);color:#8a5f0d}
.chip.tm{border-color:var(--slate);color:var(--slate)}
.chip.new{border-color:var(--red);background:var(--red);color:var(--paper);font-weight:700}
.summary{font-size:13.5px;color:var(--ink);margin:0 0 2px}
.newcount{font-size:13px;color:var(--red);font-weight:600;margin:0 0 8px}
.copylink{font-size:13px;padding:0 10px;height:32px;border:1px solid var(--line);border-radius:4px;
  background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap}
.map-table{border-collapse:collapse;font-size:13.5px;margin:8px 0}
.map-table th,.map-table td{border:1px solid var(--line);padding:3px 8px;text-align:left;vertical-align:top}
.card p{margin:6px 0 0}
.card .tierline{font-size:12.5px;color:var(--muted);font-style:italic}
.card .src{font-size:12.5px}
.card button.show{float:right;font-size:12.5px;border:1px solid var(--line);background:var(--paper);
  border-radius:4px;padding:3px 8px;cursor:pointer}
#detail{position:fixed;inset:auto 0 0 0;max-height:62vh;overflow:auto;background:var(--panel);
  border-top:3px solid var(--ink);padding:10px 14px 16px;z-index:40;display:none;
  box-shadow:0 -4px 18px rgba(0,0,0,.18)}
#detail.open{display:block}
#detail h2{margin:0 26px 2px 0;font-size:19px}
#detail .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:22px;cursor:pointer}
#detail .boiler{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
.commlist{display:flex;flex-wrap:wrap;gap:0 13px;justify-content:center;align-items:baseline;
  border-bottom:1px solid var(--line);padding:3px 12px 4px}
.commlist a{padding:6px 0;font-size:13.5px;text-decoration:none;color:var(--ink);white-space:nowrap}
.commlist a:not(:last-child)::after{content:"·";margin-left:13px;color:var(--muted)}
.commlist a b{color:var(--muted);font-weight:600}
.commlist a:hover{color:var(--red)}
.commlist a:hover b{color:var(--red)}
.commlist a.on{color:var(--red);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px}
.commlist a.on b{color:var(--red)}
footer{border-top:3px double var(--ink);padding:10px 12px;font-size:12.5px;color:var(--muted);margin-top:14px}
.doc{max-width:760px;margin:0 auto;padding:12px}
.doc h2{font-family:Georgia,serif}
.doc h3{margin-bottom:4px}
.doc p{margin:6px 0}
.kicker{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--red);font-weight:700}
@media (min-width:760px){
  .masthead .mark{height:72px}
  #map{height:62vh}
  #detail{inset:0 0 0 auto;width:430px;max-height:none;border-top:0;border-left:3px solid var(--ink)}
}