.msz-dash {
  --ink:#121309; --muted:#6d7169; --line:#e4e6e1; --canvas:#f1f2ef;
  --white:#fff; --accent:#427d46; --accent-deep:#336137; --accent-wash:#ecf2ec;
  --alert:#751a1a; --alert-wash:#fbeded; --warn:#8a6a1f; --warn-wash:#fbf3df;
  --radius:14px;
  --lift:0 1px 2px rgba(18,19,9,.04), 0 10px 28px rgba(18,19,9,.06);
  --lift-hi:0 2px 4px rgba(18,19,9,.06), 0 18px 44px rgba(18,19,9,.11);
  font-family:'Montserrat','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,
              Arial,sans-serif;
  color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; line-height:1.55; padding:0 0 64px;
  margin:0;
}
.msz-dash *,.msz-dash *::before,.msz-dash *::after { box-sizing:border-box; }
/* No width is set on .msz-dash itself. A block theme caps everything inside a post
   at the article width, which squeezed this into a column so narrow that the layout
   collapsed to its phone arrangement on a desktop monitor; the root element carries
   alignfull to be exempted from that, and the theme pays for it with negative
   margins that cancel the page's padding. Setting width:100% here defeated those
   margins, because 100% is measured before them -- the dark header band reached the
   left edge and stopped short of the right. The width the content actually uses is
   .wrap. */
/* Themes do not agree on how alignfull escapes that column, and the margin reset
   above is only safe against one of the two ways. A block theme exempts the element
   and nothing else needs to happen. A classic theme cannot, so it offsets the
   element by half the page and pulls it back with -50vw margins -- a pair of
   declarations that only cancel together. Zeroing the margins broke that pair in
   half and left the offset standing, which put the whole board a half page to the
   right of where it belonged. Drop the offset too and sit in the parent, which by
   this point either kind of theme has already widened. */
/* All four margins, here and not on the one-class rule above. The live theme's
   .alignfull is `margin:30px -50vw`, and a one-class rule only beats a one-class
   rule by loading later -- which this sheet did while it was printed in the
   footer, and stopped doing once it moved to the head. The top and bottom 30px
   then came back as a white strip above the header and below the footer. Two
   classes win on specificity, so the order the sheets print in stops mattering. */
.msz-dash.alignfull { left:0; right:0; margin:0;
  width:auto; max-width:none; border-left:0; }
/* No cap on the content width either. A reading column wants one, but nothing here
   is prose: it is eleven columns of table that were being made to scroll sideways
   while a third of a wide monitor sat empty on either side. The tables take the
   room and stop scrolling; everything above them is a grid that simply gets wider. */
.msz-dash .wrap { margin:0 auto; padding:0 26px; }
.msz-dash .ico { flex:0 0 auto; display:block; }
.msz-dash .n,.msz-dash .num,.msz-dash .rn,.msz-dash .pn,.msz-dash .tn,
.msz-dash .bpct,.msz-dash .pct,.msz-dash .count,.msz-dash .key b,
.msz-dash .shown b,.msz-dash .nfoot b { font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------------- hero -- */
.msz-dash header.top { position:relative; overflow:hidden; color:var(--white);
  padding:34px 0 38px; margin-bottom:26px;
  background:
    radial-gradient(120% 150% at 88% -20%, rgba(66,125,70,.42) 0%,
                    rgba(66,125,70,0) 58%),
    linear-gradient(158deg, #1b1c11 0%, #121309 52%, #0d0e07 100%); }
/* Room for the clock when the board is opened from the home screen. iOS draws the
   status bar over the page there (black-translucent), so the header runs up under
   it and this pushes its contents back down by exactly the notch. A border rather
   than padding so no breakpoint that rewrites the padding can drop it, and
   background-origin so the gradient paints under the border too. Outside the
   installed app the inset is 0 and this does nothing. */
.msz-dash header.top { border-top:env(safe-area-inset-top, 0px) solid transparent;
  background-origin:border-box; }
.msz-dash header.top::after { content:''; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:linear-gradient(90deg, var(--accent),
  #7fae6f 40%, rgba(66,125,70,.12) 100%); }
.msz-dash .heroin { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.msz-dash .brandmark { display:flex; align-items:center; gap:18px;
  flex:1 1 360px; }
.msz-dash header.top img { height:64px; width:auto; display:block; }
.msz-dash .event { font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#8fc08a; font-weight:700; margin:0 0 6px; }
.msz-dash h1 { font-size:33px; font-weight:800; letter-spacing:-.022em;
  margin:0 0 6px; color:var(--white); line-height:1.1; }
.msz-dash .asof { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.msz-dash .heroside { display:flex; align-items:center; gap:26px;
  margin-left:auto; flex-wrap:wrap; }

/* The other two boards. Each one is a page of its own, so this is how somebody
   gets from the materials to the schedule without going back to the site menu. */
.msz-dash .boards { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0 0; }
.msz-dash .boardlink { font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.04);
  transition:background .15s, color .15s, border-color .15s; }
.msz-dash a.boardlink:hover, .msz-dash a.boardlink:focus-visible { background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3); color:var(--white); }
.msz-dash .boardlink.on { background:rgba(143,192,138,.16); color:#c9e3c4;
  border-color:rgba(143,192,138,.36); cursor:default; }

.msz-dash .ringwrap { position:relative; width:132px; height:132px;
  flex:0 0 auto; }
.msz-dash .ring { width:100%; height:100%; transform:rotate(-90deg); }
.msz-dash .ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.msz-dash .rbg { stroke:rgba(255,255,255,.13); }
.msz-dash .rfg { stroke:#7fbe7a;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.68,.32,1); }
.msz-dash .rtext { position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:center; }
.msz-dash .rn { font-size:35px; font-weight:800; letter-spacing:-.03em;
  line-height:1; color:var(--white); }
.msz-dash .rn i { font-size:16px; font-style:normal; font-weight:700;
  color:rgba(255,255,255,.55); margin-left:1px; }
.msz-dash .rk { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:700; margin-top:5px; }

.msz-dash .chip { display:flex; align-items:center; gap:11px; max-width:262px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:13px 16px; }
.msz-dash .chip span { display:flex; flex-direction:column; font-size:11.5px;
  color:rgba(255,255,255,.6); line-height:1.35; }
.msz-dash .chip b { font-size:14px; color:var(--white); font-weight:700;
  letter-spacing:-.01em; margin-bottom:2px; }
.msz-dash .chip.warn { background:rgba(138,106,31,.2);
  border-color:rgba(226,183,74,.42); }
.msz-dash .chip.warn .ico { color:#e6be5c; }

/* ------------------------------------------------------------------ blocks -- */
.msz-dash .block { background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--lift); padding:22px 24px 24px;
  margin:0 0 18px; }
.msz-dash .eyebrow { font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 5px; }
.msz-dash .block h3 { font-size:21px; font-weight:700; letter-spacing:-.02em;
  margin:0 0 18px; }

/* ------------------------------------------------------------- composition -- */
.msz-dash .compbar { display:flex; height:64px; border-radius:12px;
  overflow:hidden; background:var(--canvas); }
.msz-dash .seg { display:flex; flex-direction:column; align-items:center;
  justify-content:center; overflow:hidden; color:#fff; line-height:1.15;
  transition:width .8s cubic-bezier(.22,.68,.32,1); }
.msz-dash .seg b { font-size:22px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.msz-dash .seg i { font-size:10px; font-style:normal; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.82; margin-top:3px; }
.msz-dash .seg.closed,.msz-dash .sw.closed { background:var(--accent); }
.msz-dash .seg.ontrack,.msz-dash .sw.ontrack { background:#8fbf8c; }
.msz-dash .seg.gaps,.msz-dash .sw.gaps { background:#cfa93f; }
.msz-dash .seg.urgent,.msz-dash .sw.urgent { background:var(--alert); }
.msz-dash .keys { display:flex; gap:26px; flex-wrap:wrap; margin-top:18px;
  font-size:13px; color:var(--muted); }
.msz-dash .key { display:flex; align-items:center; gap:9px; font-weight:600; }
.msz-dash .key b { color:var(--ink); font-size:17px; margin-left:2px; }
.msz-dash .sw { width:13px; height:13px; border-radius:4px; display:block; }

.msz-dash .warnbar { background:var(--alert-wash); border:1px solid var(--alert);
  border-left-width:4px; border-radius:var(--radius); padding:14px 20px;
  margin:0 0 20px; color:var(--alert); font-size:14px; }
.msz-dash .warnbar ul { margin:6px 0 0; padding-left:20px; font-size:13px; }

/* Every board has exactly eight cards, so the arrangement is stated rather than
   left to auto-fit, which gave 3 + 3 + 2 whenever the width fell a few pixels
   short of four columns. Four then two then one all divide eight evenly. */
.msz-dash .stats { display:grid; gap:14px; margin-bottom:20px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1000px) {
  .msz-dash .stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:540px) {
  .msz-dash .stats { grid-template-columns:1fr; }
}
.msz-dash .stat { position:relative; overflow:hidden; font:inherit;
  text-align:left; cursor:pointer; background:var(--white);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--lift);
  padding:22px 24px 20px; min-height:158px; display:flex;
  flex-direction:column; align-items:flex-start;
  transition:transform .16s cubic-bezier(.22,.68,.32,1), box-shadow .16s ease; }
.msz-dash .stat::before { content:''; position:absolute; top:0; left:0; right:0;
  height:4px; background:var(--line); }
.msz-dash .stat:not([disabled]):hover { transform:translateY(-4px);
  box-shadow:var(--lift-hi); }
.msz-dash .stat[disabled] { cursor:default; }
.msz-dash .stat[disabled] .k { color:#a4a8a0; }
.msz-dash .stat[disabled] .sico { opacity:.5; }
.msz-dash .stat:focus-visible { outline:none;
  box-shadow:0 0 0 3px rgba(66,125,70,.34), var(--lift); }
.msz-dash .sico { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:rgba(18,19,9,.05);
  color:var(--muted); margin-bottom:auto; }
.msz-dash .stat .n { display:block; font-size:50px; font-weight:800;
  letter-spacing:-.04em; line-height:1; margin-top:16px; }
.msz-dash .stat .k { display:block; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:8px; }
.msz-dash .stat .go { position:absolute; right:20px; bottom:20px;
  color:var(--muted); opacity:0; transform:translateX(-5px);
  transition:opacity .16s ease, transform .16s ease; }
.msz-dash .stat:not([disabled]):hover .go { opacity:.9;
  transform:translateX(0); }
.msz-dash .stat.neutral::before { background:var(--ink); }
.msz-dash .stat.neutral .sico { background:rgba(18,19,9,.07); color:var(--ink); }
.msz-dash .stat.ok::before { background:var(--accent); }
.msz-dash .stat.ok { background:var(--accent-wash); }
.msz-dash .stat.ok .n { color:var(--accent-deep); }
.msz-dash .stat.ok .sico { background:rgba(66,125,70,.14);
  color:var(--accent-deep); }
.msz-dash .stat.alert::before { background:var(--alert); }
.msz-dash .stat.alert { background:var(--alert-wash); }
.msz-dash .stat.alert .n { color:var(--alert); }
.msz-dash .stat.alert .sico { background:rgba(117,26,26,.11);
  color:var(--alert); }
.msz-dash .stat.warn::before { background:var(--warn); }
.msz-dash .stat.warn { background:var(--warn-wash); }
.msz-dash .stat.warn .n { color:var(--warn); }
.msz-dash .stat.warn .sico { background:rgba(138,106,31,.13); color:var(--warn); }
.msz-dash .stat.zero { background:var(--white); }
.msz-dash .stat.zero::before { background:var(--line); }
.msz-dash .stat.zero .n { color:#b6b9b1; }

.msz-dash .tabs { display:flex; gap:5px; flex-wrap:wrap; margin:0 0 -1px;
  position:relative; z-index:1; }
.msz-dash .tab-btn { font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; color:var(--muted); background:transparent;
  border:1px solid transparent; border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0; padding:10px 16px;
  display:flex; align-items:center; gap:8px; }
.msz-dash .tab-btn:hover { color:var(--ink); }
.msz-dash .tab-btn.on { background:var(--white); border-color:var(--line);
  color:var(--ink); }
.msz-dash .tab-btn:focus-visible { outline:none;
  box-shadow:0 0 0 3px rgba(66,125,70,.30); }
.msz-dash .tab-btn .count { background:var(--canvas); color:var(--muted); }
.msz-dash .tab-btn.on .count { background:var(--ink); color:var(--white); }
.msz-dash .count { font-size:11px; font-weight:700; border-radius:999px;
  padding:1px 8px; }

.msz-dash .tabpane { display:none; }
.msz-dash .tabpane.on { display:block; animation:msz-in .22s ease both; }
@keyframes msz-in { from { opacity:0; transform:translateY(5px); } }
.msz-dash .tabpane.card { background:var(--white); border:1px solid var(--line);
  border-radius:0 var(--radius) var(--radius) var(--radius);
  box-shadow:var(--lift); padding:22px 24px 24px; }
.msz-dash .tabpane h2 { font-size:18px; font-weight:700; letter-spacing:-.015em;
  margin:0 0 4px; }
.msz-dash .blurb,.msz-dash .foot { font-size:12.5px; color:var(--muted);
  margin:0 0 15px; max-width:78ch; }
.msz-dash .foot { margin:13px 0 0; }
/* What a signed-out visitor sees. Deliberately the only thing on the page: no
   header strip, no counts, nothing that would say how much is behind it. */
.msz-dash .gate { background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--lift); text-align:center;
  padding:44px 26px 40px; margin:26px auto; max-width:560px; }
.msz-dash .gatetitle { font-size:20px; font-weight:700; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 8px; }
.msz-dash .gatesay { font-size:14px; color:var(--muted); margin:0 auto 22px;
  max-width:44ch; line-height:1.55; }
.msz-dash .gatebtn { display:inline-block; background:var(--accent-deep);
  color:var(--white); font-size:14px; font-weight:600; text-decoration:none;
  border-radius:9px; padding:11px 30px; }
.msz-dash .gatebtn:hover,.msz-dash .gatebtn:focus-visible { background:var(--ink); color:var(--white); }
.msz-dash .gatenote { font-size:12px; color:var(--muted); margin:20px 0 0; }

/* Replaces the sign-out link that lived in the admin bar the plugin now hides.
   Quiet and at the very bottom: needed rarely, and never the thing somebody came
   to the board to do -- but the only way off a shared phone or a hall laptop. */
.msz-dash .whoami { font-size:12px; color:var(--muted); text-align:center;
  margin:30px 0 0; }
.msz-dash .whoami a { color:var(--muted); text-decoration:underline;
  text-underline-offset:2px; }
.msz-dash .whoami a:hover,.msz-dash .whoami a:focus-visible { color:var(--ink); }

/* Named through the element, because the composition bar also calls a segment
   with nothing in it empty, and that is a different kind of empty. Unscoped,
   this padding landed on a zero-width segment and made it 44px of maroon: a
   board with no urgent work drew a block that said there was some. */
.msz-dash p.empty { font-size:14px; color:var(--muted); font-style:italic;
  background:var(--canvas); border-radius:11px; padding:20px 22px; margin:0; }

.msz-dash .scroller { max-height:min(62vh,620px); overflow:auto;
  border:1px solid var(--line); border-radius:8px; }
.msz-dash .scroller.short { max-height:none; }
.msz-dash table.grid { width:100%; border-collapse:separate;
  border-spacing:0; font-size:13px; }
.msz-dash .grid thead th { position:sticky; top:env(safe-area-inset-top, 0px); z-index:2;
  background:var(--canvas); text-align:left; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:10px; white-space:nowrap;
  border-bottom:1px solid var(--line); }
/* Alignment is stated rather than left to the browser default, because a classic
   theme is entitled to restyle a bare td and this one centres every cell on the
   site. Squeezed to their narrowest the columns hid it; given the full width it
   put 500px of item column with the text adrift in the middle. The headings were
   already told to sit left, so this is the half of that pair that was missing. */
.msz-dash .grid td { padding:10px; border-bottom:1px solid var(--line);
  vertical-align:top; text-align:left; background:var(--white); }
.msz-dash .grid tbody tr:last-child td { border-bottom:0; }
.msz-dash .grid .num,.msz-dash .grid .when { text-align:center;
  white-space:nowrap; }
.msz-dash .grid .team { font-weight:600; white-space:nowrap; }
.msz-dash .grid .id { font-size:11px; color:var(--muted); white-space:nowrap;
  letter-spacing:.03em; }
.msz-dash .grid .dim { color:var(--muted); white-space:nowrap; }

/* The objective a task serves: the project, and under it the card and objective. */
.msz-dash .grid td.objcell { min-width:120px; max-width:200px; font-size:13px; line-height:1.35; }
.msz-dash .grid td.objcell .oproj { display:block; font-weight:700; color:var(--ink); }
.msz-dash .grid td.objcell .note { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.msz-dash .grid td.objcell select.cellin { width:100%; min-width:180px; }

/* The purchase link. The cell shows the shop rather than the address, so it stays
   narrow next to the source it sits beside; the arrow is what marks it as leaving
   the site, since a bare domain on a board full of text does not read as a link
   on its own. Capped anyway, because a shop with a long hostname should not be
   what decides this column's width. */
.msz-dash .grid td.link { white-space:nowrap; max-width:190px; overflow:hidden;
  text-overflow:ellipsis; }
.msz-dash .grid a.buy { color:var(--accent-deep); font-weight:600;
  font-size:13px; text-decoration:none;
  border-bottom:1px solid rgba(66,125,70,.35); }
.msz-dash .grid a.buy::after { content:'\2197'; font-size:11px; margin-left:3px;
  color:var(--muted); }
.msz-dash .grid a.buy:hover,.msz-dash .grid a.buy:focus-visible {
  color:var(--ink); border-bottom-color:var(--ink); }
.msz-dash .grid a.buy:focus-visible { outline:none;
  box-shadow:0 0 0 3px rgba(66,125,70,.28); border-radius:3px; }
.msz-dash .grid .item { min-width:300px; max-width:440px; }
.msz-dash .grid .note { display:block; font-size:12px; color:var(--muted);
  margin-top:3px; }
.msz-dash .grid .none { color:var(--warn); font-style:italic; }
.msz-dash .grid .held { display:block; font-size:11px; color:var(--alert);
  margin-top:3px; }
.msz-dash .lead.missing { color:var(--alert); font-style:italic; }
.msz-dash tr.r-alert td { background:#fdf7f7; }

.msz-dash .jump { font:inherit; font-weight:600; color:var(--accent-deep);
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  border-bottom:1px dotted var(--accent); }
.msz-dash .jump:hover { color:var(--ink); }

.msz-dash .track { display:block; height:8px; background:var(--canvas);
  border-radius:999px; overflow:hidden; }
.msz-dash .fill { display:block; height:100%; background:var(--accent);
  border-radius:999px; transition:width .8s cubic-bezier(.22,.68,.32,1); }
.msz-dash .teams .bar { min-width:150px; white-space:nowrap; }
.msz-dash .teams .track { display:inline-block; width:98px; height:7px;
  background:var(--line); vertical-align:middle; }
.msz-dash .pct { font-size:11.5px; color:var(--muted); margin-left:9px;
  font-weight:700; }
.msz-dash .tags { white-space:normal; min-width:150px; }
.msz-dash .tag { display:inline-block; font-size:11px; font-weight:600;
  border-radius:999px; padding:2px 9px; margin:1px 4px 1px 0; }
.msz-dash .tag.ok { background:var(--accent-wash); color:var(--accent-deep); }
.msz-dash .tag.warn { background:var(--warn-wash); color:var(--warn); }
.msz-dash .tag.alert { background:var(--alert-wash); color:var(--alert); }

.msz-dash .pill { display:inline-block; font-size:11px; font-weight:600;
  border-radius:5px; padding:2px 8px; white-space:nowrap;
  background:var(--canvas); color:var(--muted); }
.msz-dash .t-decision { background:var(--accent-wash); color:var(--accent-deep); }
.msz-dash .t-risk { background:var(--alert-wash); color:var(--alert); }
.msz-dash .s-blocked,.msz-dash .s-escalated { background:var(--alert-wash);
  color:var(--alert); }
.msz-dash .s-closed { background:var(--accent-wash); color:var(--accent-deep); }
.msz-dash .pill.s-no-longer-needed { color:var(--muted); text-decoration:line-through; }

.msz-dash .flag { display:inline-block; font-size:11px; font-weight:700;
  border-radius:5px; padding:2px 8px; white-space:nowrap; }
.msz-dash .flag.ok { background:var(--accent-wash); color:var(--accent-deep); }
.msz-dash .flag.warn { background:var(--warn-wash); color:var(--warn); }
.msz-dash .flag.alert { background:var(--alert-wash); color:var(--alert); }

.msz-dash .filters { display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  margin:0 0 13px; }
.msz-dash .filters input,.msz-dash .filters select,
.msz-dash .filters button { font:inherit; font-size:13px; padding:8px 11px;
  border:1px solid var(--line); border-radius:7px; background:var(--white);
  color:var(--ink); }
.msz-dash .filters input { flex:1 1 210px; min-width:150px; }
.msz-dash .filters button { cursor:pointer; font-weight:600;
  color:var(--muted); }
.msz-dash .filters button:hover { color:var(--ink); border-color:var(--muted); }
.msz-dash .filters input:focus,.msz-dash .filters select:focus,
.msz-dash .filters button:focus-visible { outline:none;
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(66,125,70,.16); }
.msz-dash .shown { font-size:12px; color:var(--muted); margin-left:auto;
  white-space:nowrap; }
.msz-dash .shown b { color:var(--ink); }
/* The way back to the finished rows a list is holding back. A link rather than a
   fourth button, because it is an aside to the count beside it. */
.msz-dash .filters .f-done { border-color:transparent; background:none;
  padding:0 2px; margin-left:8px; font-size:12px; color:var(--accent-deep);
  text-decoration:underline; text-underline-offset:3px; }
.msz-dash .filters .f-done:hover { border-color:transparent; color:var(--ink); }
.msz-dash .filters .f-done[hidden] { display:none; }

/* A row on its way out of a list after a save: it holds long enough for the
   saved flash, then fades. msz-dash.js hides it for good once this has run. */
@keyframes msz-leave { 0%, 55% { opacity:1; } 100% { opacity:0; } }
.msz-dash tr.leaving { animation:msz-leave 1.2s ease-in forwards; }

.msz-dash footer.end { text-align:center; font-size:11.5px; color:var(--muted);
  padding-top:18px; }

@media (max-width:860px) {
  .msz-dash .stat { min-height:0; padding:18px 20px 16px; }
  .msz-dash .stat .n { font-size:40px; margin-top:12px; }
  .msz-dash .compbar { height:54px; }
  .msz-dash .keys { gap:18px; }
  .msz-dash .wrap { padding:0 16px; }
  .msz-dash .heroside { margin-left:0; width:100%; }
  .msz-dash .tabpane.card { padding:18px 14px; border-radius:var(--radius); }
  .msz-dash .tabs { margin-bottom:10px; }
  .msz-dash .tab-btn { border-color:var(--line); border-bottom-width:1px;
    border-radius:999px; background:var(--white); }
  .msz-dash h1 { font-size:25px; }
  .msz-dash .shown { margin-left:0; }
}
/* --- phones and small tablets ---------------------------------------------
   Below this width the grid stops being a table. The two ways to keep a table
   are both bad on a small screen: shrink it and the type goes to six point, or
   scroll it sideways and the leftmost column -- the thing each row is about --
   slides off before you reach the column you were going to read.

   860px, and not something narrower, because the widest board needs about 840
   of table and this is where it stops fitting. Drawing the line anywhere below
   here would leave a band -- a tablet held upright is 768 -- where the table is
   still a table but no longer fits inside one, and every row has to be read by
   swiping sideways.

   So each row becomes a card. The DOM does not change at all: it is still a
   table, still the same rows the filters hide and show, still the same elements
   the editor refills after a save. Only the display changes, which is why there
   is no second layout to keep in step with this one.

   Every cell carries its column name in data-label, and prints it where the
   heading used to be. Cells that are genuinely empty are dropped rather than
   printed as a label with nothing after it -- on a phone the whole row is
   visible at once, so a blank line reads as a mistake rather than as a gap in a
   column somebody can see the shape of. */
@media (max-width:860px) {
  .msz-dash .scroller,.msz-dash .scroller.short { max-height:none; overflow:visible;
    border:0; border-radius:0; }
  .msz-dash table.grid { min-width:0; display:block; font-size:14px; }
  .msz-dash .grid thead { display:none; }
  .msz-dash .grid tbody { display:block; }
  .msz-dash .grid tr { display:block; background:var(--white);
    border:1px solid var(--line); border-left-width:4px;
    border-radius:var(--radius); box-shadow:var(--lift);
    padding:13px 15px 11px; margin:0 0 11px; }
  .msz-dash .grid tr.r-ok { border-left-color:var(--accent); }
  .msz-dash .grid tr.r-warn { border-left-color:var(--warn); }
  .msz-dash .grid tr.r-alert { border-left-color:var(--alert); background:#fdf7f7; }

  .msz-dash .grid td { display:flex; gap:10px; align-items:baseline;
    padding:4px 0; border:0; background:none; white-space:normal;
    min-width:0; max-width:none; }
  /* The desktop rules these undo are written as .grid .item, .grid .dim and so
     on -- one class more specific than .grid td -- so they have to be named
     rather than reset in the line above, which loses to them. */
  .msz-dash .grid td.item,.msz-dash .grid td.dim,.msz-dash .grid td.id,
  .msz-dash .grid td.num,.msz-dash .grid td.when,.msz-dash .grid td.team,
  .msz-dash .grid td.tags,.msz-dash .grid td.link,.msz-dash .grid td.objcell,
  .msz-dash .grid.teams td.bar {
    white-space:normal; min-width:0; max-width:none; overflow:visible; }
  .msz-dash .grid td.objcell { flex-wrap:wrap; }
  .msz-dash .grid td.objcell .oproj { flex:1 1 0; min-width:0; }
  .msz-dash .grid td.objcell .note { flex:1 0 100%; margin:0 0 0 114px; }
  .msz-dash .grid tr.r-alert td { background:none; }
  /* A fixed gutter, not a percentage: the labels are all short and of a similar
     length, so a share of the width would grow into a stripe of empty paper on
     the wide end of this range while staying cramped on a narrow phone. */
  .msz-dash .grid td::before { content:attr(data-label); flex:0 0 104px;
    font-size:10px; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); font-weight:700; }
  .msz-dash .grid td:empty { display:none; }

  /* The row's own words, as the card's heading. */
  .msz-dash .grid td.item { display:block; font-size:15px; font-weight:600;
    line-height:1.4; color:var(--ink); padding:1px 0 7px; }
  .msz-dash .grid td.item::before { display:none; }
  .msz-dash .grid td.item .note { font-size:12.5px; margin-top:4px; }

  /* Team and ID, together on the line above it. */
  .msz-dash .grid td.team,.msz-dash .grid td.id { display:inline-block;
    padding:0; font-size:11px; letter-spacing:.02em; }
  .msz-dash .grid td.team::before,.msz-dash .grid td.id::before { display:none; }
  .msz-dash .grid td.team { font-weight:700; color:var(--accent-deep); }
  .msz-dash .grid td.team::after { content:'\00b7'; color:var(--muted);
    font-weight:400; margin:0 5px; }
  .msz-dash .grid td.id { color:var(--muted); }

  .msz-dash .grid td.num,.msz-dash .grid td.when { text-align:left; }
  .msz-dash .grid td.statuscell select,
  .msz-dash .grid td.when .quickdate { flex:1 1 auto; min-width:0;
    max-width:none; }

  /* The verdict is what you look for, so it goes last and stands out. */
  .msz-dash .grid td.checkcell { margin-top:5px; padding-top:8px;
    border-top:1px solid var(--line); }

  /* A tap target, not a link-sized word tucked in a column. In a card it is the
     last thing on the card, so it takes the full width of it. */
  .msz-dash .grid td.editcell { display:block; padding:10px 0 1px; }
  .msz-dash .grid td.editcell::before { display:none; }
  .msz-dash .grid .rowedit { width:100%; padding:10px; font-size:14px; }

  /* The By Team table is the same treatment, minus the bar, which says nothing
     a card this narrow has room for that the percentage does not say better. */
  .msz-dash .grid.teams td.bar { min-width:0; }
  .msz-dash .grid.teams .track { width:100%; }

  .msz-dash .filters { gap:7px; }
  .msz-dash .filters input,.msz-dash .filters select,
  .msz-dash .filters button { padding:10px 12px; }
  .msz-dash .filters input { flex:1 1 100%; }
  .msz-dash .filters select { flex:1 1 calc(50% - 4px); }

  /* 16px on everything you can type into or pick from, and not a pixel less.
     Safari on iOS zooms the page in when it focuses a form control whose text is
     smaller than that, and it does not zoom back out afterwards -- you tap the
     team filter and the rest of the board is off the side of the screen. The
     buttons are left alone: it is only fields that trigger it. */
  .msz-dash .filters input,.msz-dash .filters select,
  .msz-dash .grid select,.msz-dash .grid input,
  .msz-dash .quickstatus,.msz-dash .quickdate { font-size:16px; }

  /* At 16px "No longer needed" is wider than the space beside the label on a
     phone, so that one goes under it rather than losing its last letters. */
  .msz-dash .grid td:has(.quickstatus.s-no-longer-needed) { flex-wrap:wrap; row-gap:6px; }
  .msz-dash .grid td .quickstatus.s-no-longer-needed { flex:1 0 100%; }
}

/* ------------------------------------------------- Taha Foundation strip -- */
/* At the top of the Materials board's Taha Foundation tab. Labels are given a
   display of their own because the live theme styles bare ones. */
.msz-dash .msz-taha { margin:4px 0 18px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--accent-wash); }
.msz-dash .msz-taha .mt-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.msz-dash .msz-taha .mt-say { flex:1 1 320px; margin:0; font-size:13px; color:var(--ink); }
.msz-dash .msz-taha .mt-last { display:block; margin-top:3px; color:var(--muted); font-size:12.5px; }
.msz-dash .msz-taha .mt-btns { display:flex; gap:8px; flex-wrap:wrap; }
.msz-dash .msz-taha .mt-dl,.msz-dash .msz-taha .mt-open,
.msz-dash .msz-taha .mt-send,.msz-dash .msz-taha .mt-cancel { display:inline-flex;
  align-items:center; font:inherit; font-size:13px; font-weight:700; line-height:1.2;
  padding:9px 16px; border-radius:999px; border:1px solid var(--accent-deep);
  text-decoration:none; cursor:pointer; white-space:nowrap; }
.msz-dash .msz-taha .mt-dl,.msz-dash .msz-taha .mt-cancel { background:var(--white);
  color:var(--accent-deep); }
.msz-dash .msz-taha .mt-open,.msz-dash .msz-taha .mt-send { background:var(--accent-deep);
  color:var(--white); }
.msz-dash .msz-taha .mt-dl:hover,.msz-dash .msz-taha .mt-cancel:hover { background:var(--canvas); }
.msz-dash .msz-taha .mt-open:hover,.msz-dash .msz-taha .mt-send:hover { background:var(--accent); }
.msz-dash .msz-taha .mt-send:disabled { opacity:.6; cursor:default; }
.msz-dash .msz-taha [hidden] { display:none; }
.msz-dash .msz-taha .mt-form { margin-top:14px; padding-top:14px; border-top:1px solid #cfdccf; }
.msz-dash .msz-taha .mt-f { margin:0 0 10px; }
.msz-dash .msz-taha .mt-l { display:block; margin:0 0 4px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.msz-dash .msz-taha .mt-l span { text-transform:none; letter-spacing:0; font-weight:500; }
.msz-dash .msz-taha .mt-to,.msz-dash .msz-taha .mt-note { display:block; width:100%;
  max-width:520px; font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; background:var(--white); color:var(--ink); }
.msz-dash .msz-taha .mt-note { resize:vertical; min-height:70px; }
.msz-dash .msz-taha .mt-hint { margin:0 0 10px; font-size:12px; color:var(--muted); }
.msz-dash .msz-taha .mt-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.msz-dash .msz-taha .mt-msg { flex:1 1 220px; margin:0; font-size:13px; color:var(--accent-deep); }
.msz-dash .msz-taha .mt-msg.bad { color:var(--alert); }
@media (max-width:860px) {
  .msz-dash .msz-taha .mt-to,.msz-dash .msz-taha .mt-note { font-size:16px; max-width:none; }
  .msz-dash .msz-taha .mt-btns,.msz-dash .msz-taha .mt-btns > * { flex:1 1 auto; justify-content:center; }
}

/* --------------------------------------------------------- which event -- */
/* Above the row of tabs, in the dark header, on every page of an event: the
   pages of two events are otherwise identical. Unscoped, because the budget,
   storage, meetings and deadlines pages draw it inside roots of their own. */
.msz-project { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.7); }
.msz-project-name { font-weight:700; color:#fff; }
.msz-project-closed { font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#f1d58b; background:rgba(138,106,31,.28);
  border:1px solid rgba(226,183,74,.42); border-radius:999px; padding:2px 9px; }
.msz-project-switch { color:#c9e3c4; text-decoration:underline;
  text-underline-offset:2px; }
.msz-project-switch:hover,.msz-project-switch:focus-visible { color:#fff; }

/* Activities only: the request form for the board. Greyed with a list of what
   is left until the plan is finished. */
.msz-request { position:relative; }
.msz-request-go { display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:#121309; background:#c9e3c4;
  border:1px solid #c9e3c4; border-radius:999px; padding:6px 14px;
  text-decoration:none; cursor:pointer; list-style:none; }
.msz-request-go::-webkit-details-marker { display:none; }
.msz-request-go:hover,.msz-request-go:focus-visible { background:#fff;
  border-color:#fff; color:#121309; }
.msz-request-go.is-off { background:transparent; color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.35); }
.msz-request-go.is-off:hover,.msz-request-go.is-off:focus-visible {
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.6); }
.msz-request-why { position:absolute; z-index:30; top:calc(100% + 8px); right:0;
  width:min(340px, 86vw); background:#fff; color:#121309; border-radius:10px;
  padding:12px 16px; font-size:13px; line-height:1.45;
  box-shadow:0 2px 4px rgba(18,19,9,.08), 0 18px 44px rgba(18,19,9,.18); }
.msz-request-why p { margin:0 0 6px; font-weight:700; }
.msz-request-why ul { margin:0; padding-left:18px; }
.msz-request-why li + li { margin-top:4px; }
@media (max-width:560px) { .msz-request-why { position:static; margin-top:8px; width:auto; min-width:0; max-width:none; } }

/* ----------------------------------------------------------- the landing -- */
.msz-land .wrap > .block { max-width:820px; margin-left:auto; margin-right:auto; }
.msz-land-said,.msz-land-remind { max-width:820px; margin:0 auto 16px;
  padding:12px 16px; border-radius:10px; font-size:14px;
  background:var(--warn-wash); border:1px solid rgba(138,106,31,.25); }
.msz-land-said.good { background:var(--accent-wash);
  border-color:rgba(66,125,70,.25); }
.msz-land-note { font-size:13px; color:var(--muted); margin:0 0 14px; }
.msz-land-go { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.msz-land-go select { flex:1 1 280px; min-width:0; font:inherit; font-size:15px;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--white); color:var(--ink); }
.msz-land-go .gatebtn,.msz-land form .gatebtn { border:0; cursor:pointer;
  font:inherit; font-weight:600; }
.msz-land-items { list-style:none; margin:0; padding:0; }
.msz-land-item { border-top:1px solid var(--line); padding:14px 0; }
.msz-land-item:first-child { border-top:0; padding-top:0; }
.msz-land-head { display:flex; flex-direction:column; gap:2px; }
.msz-land-head b { font-size:16px; }
.msz-land-head span { font-size:12.5px; color:var(--muted); }
.msz-land-acts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.msz-land-btn { display:inline-block; font:inherit; font-size:13px;
  font-weight:600; padding:7px 16px; border-radius:8px; cursor:pointer;
  text-decoration:none; background:var(--accent-deep); color:var(--white);
  border:1px solid var(--accent-deep); }
.msz-land-btn.quiet { background:var(--white); color:var(--ink);
  border-color:var(--line); }
.msz-land-btn:hover,.msz-land-btn:focus-visible { background:var(--ink);
  border-color:var(--ink); color:var(--white); }
.msz-land-small { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:10px 0 0; }
.msz-land-sure { font-size:13px; color:var(--muted); }
.msz-land-edit { margin:10px 0 0; font-size:13px; }
.msz-land-edit summary,.msz-land-new summary { cursor:pointer; }
.msz-land-new summary { list-style:none; }
.msz-land-new summary::-webkit-details-marker { display:none; }
.msz-land-new summary h3 { margin:0; }
.msz-land-new details[open] summary h3 { margin-bottom:16px; }
.msz-land-field { display:flex; flex-direction:column; gap:4px; margin:0 0 12px; }
.msz-land-field label,.msz-land-more legend { font-size:12px; font-weight:700;
  color:var(--muted); }
.msz-land-field input,.msz-land-field select,.msz-land-more input {
  font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; background:var(--white); color:var(--ink); max-width:420px; }
.msz-land-more { border:0; margin:0 0 12px; padding:0; display:flex;
  flex-wrap:wrap; gap:8px; }
.msz-land-more legend { margin-bottom:4px; }

@media (prefers-reduced-motion:reduce) {
  .msz-dash *,.msz-dash *::before { transition:none !important;
    animation:none !important; }
}
@media print {
  .msz-dash { background:var(--white); padding:0; }
  .msz-dash .filters,.msz-dash .tabs,.msz-dash .stat .go { display:none; }
  .msz-dash .tabpane { display:block; break-inside:avoid;
    page-break-inside:avoid; border-color:#ccc; margin-bottom:16px; }
  .msz-dash .block,.msz-dash .stat,
  .msz-dash .tabpane.card { box-shadow:none; }
  .msz-dash .scroller { max-height:none; overflow:visible; }
}