/* ICE Notice Board: physical notice-board material with a fast document system. */

body.page-notices{
  --notice-red:#8e1630;
  --notice-red-deep:#650c20;
  --notice-red-dark:#430714;
  --notice-paper:#fffdf5;
  --notice-paper-edge:#e6ddc9;
  --notice-ink:#1b2030;
  --notice-muted:#616570;
  /* Matte fabric (felt/baize) notice surface */
  --notice-felt:#8a1a2f;
  --notice-felt-deep:#5c0f1d;
  /* Carved Nepali (Newari) hardwood frame */
  --notice-wood:#5a3620;
  --notice-wood-light:#8a5730;
  --notice-wood-mid:#6b3f24;
  --notice-wood-dark:#3a2013;
  --notice-wood-deep:#28150b;
  --notice-control-radius:6px;
  background:var(--bg);
  color:var(--ink);
}

body.page-notices header.site{
  position:relative;
  background:var(--navy-deep);
}

.notice-page{
  overflow-x:clip;
  padding-bottom:var(--ice-space-fluid-48-96);
}

.notice-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--slate);
  font:700 .72rem/1.2 var(--sans);
  letter-spacing:.07em;
  text-transform:uppercase;
}

.notice-breadcrumb a{
  color:inherit;
  text-decoration:none;
}

.notice-breadcrumb a:hover{color:var(--crimson)}

.notice-controls h1{
  margin:4px 0 14px;
  color:var(--ink);
  font:600 clamp(1.4rem,2.4vw,1.8rem)/1.1 var(--display);
  letter-spacing:-.025em;
}

.notice-workspace{
  width:min(100% - 32px,var(--ice-container-wide));
  margin:clamp(16px,2.4vw,24px) auto 0;
  padding:0 0 clamp(28px,4vw,52px);
}

.notice-controls{
  border-bottom:1px solid var(--hairline);
  padding-bottom:12px;
}

.notice-toolbar{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:12px;
}

.notice-search,.notice-audience{
  display:grid;
  gap:6px;
}

.notice-search label,.notice-audience label,.notice-view>span{
  color:var(--slate);
  font:750 .72rem/1.2 var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.notice-search input,.notice-audience select{
  width:100%;
  min-height:48px;
  border:1px solid var(--hairline);
  border-radius:var(--notice-control-radius);
  background:var(--card);
  color:var(--ink);
  padding:0 14px;
  font:500 .94rem/1 var(--sans);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.notice-search input:hover,.notice-audience select:hover{border-color:color-mix(in srgb,var(--slate) 58%,var(--hairline))}
.notice-search input:focus-visible,.notice-audience select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--crimson) 35%,transparent);
  outline-offset:2px;
  border-color:var(--crimson);
}

.notice-view{
  min-height:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-self:end;
  border:1px solid var(--hairline);
  border-radius:var(--notice-control-radius);
  overflow:hidden;
  background:var(--card);
}

.notice-view>span{
  grid-column:1/-1;
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

.notice-view button,.notice-reset,.notice-tabs button,.notice-empty button{
  border:0;
  font-family:var(--sans);
  cursor:pointer;
  touch-action:manipulation;
}

.notice-view button{
  min-height:46px;
  background:transparent;
  color:var(--slate);
  font-size:.86rem;
  font-weight:750;
}

.notice-view button+button{border-left:1px solid var(--hairline)}
.notice-view button:hover{background:var(--field);color:var(--ink)}
.notice-view button.is-active{background:var(--navy-deep);color:#fff}

.notice-reset{
  min-height:48px;
  align-self:end;
  border:1px solid var(--hairline);
  border-radius:var(--notice-control-radius);
  background:transparent;
  color:var(--ink);
  padding:0 16px;
  font-size:.84rem;
  font-weight:750;
}
.notice-reset:hover{border-color:var(--crimson);color:var(--crimson)}
.notice-reset:active{transform:translateY(1px)}

.notice-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:2px 2px 4px;
}

.notice-tabs button{
  flex:0 0 auto;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--hairline);
  border-radius:var(--notice-control-radius);
  background:var(--card);
  color:var(--slate);
  padding:0 12px;
  font-size:.82rem;
  font-weight:720;
  transition:border-color 160ms ease,color 160ms ease,background-color 160ms ease;
}

.notice-tabs button:hover{border-color:var(--slate);color:var(--ink)}
.notice-tabs button.is-active{border-color:var(--crimson);background:var(--crimson);color:#fff}
/* The count badge is a <span>, not a <b>: it is a number in a chip, not
   emphasised prose. It was a <b> until 2026-08-28, when adding one notice
   made three category tabs read "2" and audit:onpage correctly flagged the
   page for emphasising the same phrase three times. The audit was right
   about the markup and the markup was wrong; the tie will happen again
   every time two categories hold the same number of notices. */
.notice-tabs button .notice-tabs__count{
  min-width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:var(--field);
  color:var(--ink);
  font-size:.68rem;
  font-variant-numeric:tabular-nums;
}
/* Darken rather than lighten: a white tint over crimson lands at 4.45:1
   against the white count, just under AA for this size. */
.notice-tabs button.is-active .notice-tabs__count{background:rgba(0,0,0,.22);color:#fff}
.notice-tab__full{display:none}

.notice-toolbar button:focus-visible,.notice-tabs button:focus-visible,.notice-card button:focus-visible,.notice-card a:focus-visible,.notice-empty button:focus-visible,.notice-dialog button:focus-visible,.notice-dialog a:focus-visible,.notice-source-note a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--crimson) 40%,transparent);
  outline-offset:3px;
}

.notice-result-line{
  min-height:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 24px;
  padding:8px 2px;
  color:var(--slate);
  font:.78rem/1.4 var(--sans);
}
.notice-result-line p{margin:0}
#notice-result-status{color:var(--ink);font-weight:750}
.notice-drag-help{display:none}

.notice-board-frame{
  position:relative;
  isolation:isolate;
  padding:8px;
  border-radius:8px;
  background:linear-gradient(160deg,var(--notice-wood-light),var(--notice-wood) 40%,var(--notice-wood-dark));
  box-shadow:
    0 12px 32px rgba(26,14,6,.22),
    0 2px 6px rgba(26,14,6,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 2px rgba(0,0,0,.3);
}

.notice-board-frame::before{content:none}

.notice-board-corner{display:none}

.notice-canvas{
  position:relative;
  z-index:1;
  min-height:480px;
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:14px;
  overflow:hidden;
  padding:24px 14px;
  border-radius:3px;
  background:var(--notice-felt);
  box-shadow:inset 0 0 32px rgba(40,6,16,.35),inset 0 1px 3px rgba(0,0,0,.2);
}

.notice-canvas::after{content:none}

.notice-card{
  position:relative;
  z-index:calc(2 + var(--notice-order));
  min-width:0;
  color:var(--notice-ink);
  /* Below the 900px breakpoint there is no absolute-positioned corkboard —
     Board and List both render this single-column grid in DOM order unless
     told otherwise. `order` here is what actually makes Board view
     date-first on a phone; at >=900px Board view switches to
     position:absolute, where `order` has no effect, so this is inert there
     and List view's own copy (below) is redundant but harmless. */
  order:var(--list-order,0);
}

.notice-card[hidden]{display:none!important}

.notice-paper{
  position:relative;
  min-height:220px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--notice-paper-edge);
  border-radius:4px;
  background:var(--notice-paper);
  box-shadow:0 4px 12px rgba(52,4,17,.12),0 1px 3px rgba(52,4,17,.10),inset 0 1px 0 #fff;
  transition:transform 180ms ease,box-shadow 180ms ease;
}

.notice-card::before{content:none}

.notice-card:hover .notice-paper{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(52,4,17,.18),0 2px 5px rgba(52,4,17,.12),inset 0 1px 0 #fff;
}

.notice-card.is-dragging{
  user-select:none;
  -webkit-user-select:none;
}
.notice-card.is-dragging .notice-paper{
  transform:scale(1.01);
  box-shadow:0 14px 28px rgba(52,4,17,.24),0 4px 8px rgba(52,4,17,.16);
}

.notice-card__drag{
  position:relative;
  min-height:36px;
  display:grid;
  grid-template-columns:14px 1fr auto;
  align-items:center;
  gap:8px;
  border:0;
  border-bottom:1px solid #e4ddd0;
  background:transparent;
  color:#6a2636;
  padding:6px 12px;
  font:800 .64rem/1.2 var(--sans);
  letter-spacing:.075em;
  text-align:left;
  text-transform:uppercase;
  cursor:default;
}

.notice-drag-enabled .notice-card__drag{cursor:grab;touch-action:none}
.notice-card.is-dragging .notice-card__drag{cursor:grabbing}
.notice-card__drag small{
  color:#8c8a84;
  font-size:.6rem;
  font-weight:700;
  opacity:0;
  transition:opacity 140ms ease;
}
.notice-drag-enabled .notice-card:hover .notice-card__drag small,.notice-card__drag:focus-visible small{opacity:1}

.notice-pin{
  width:10px;
  height:10px;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e8455a,#a01828 80%);
  box-shadow:0 1px 2px rgba(30,3,12,.35);
}
.notice-pin::before,.notice-pin::after,.notice-pin i{display:none}

/* Category colour system. A coloured spine (left edge of the paper), pin and
   label make each notice type readable at a glance. exams was previously
   uncoloured — the largest group — so most cards fell back to the same maroon
   and the board read as "everything looks the same". Each category now sets one
   accent that drives the spine, the pin gradient and the drag label. */
.notice-card{--notice-accent:var(--notice-red);--notice-pin-lo:#e8455a;--notice-pin-hi:#a01828}
.notice-card[data-category="admissions"]{--notice-accent:#1d4ed8;--notice-pin-lo:#60a5fa;--notice-pin-hi:#1d4ed8}
.notice-card[data-category="exams"]{--notice-accent:#6d28d9;--notice-pin-lo:#a78bfa;--notice-pin-hi:#6d28d9}
.notice-card[data-category="academics"]{--notice-accent:#b45309;--notice-pin-lo:#fbbf24;--notice-pin-hi:#b45309}
.notice-card[data-category="campus"]{--notice-accent:#047857;--notice-pin-lo:#34d399;--notice-pin-hi:#047857}
.notice-card--reference,.notice-card--archive{--notice-accent:#6b7280;--notice-pin-lo:#c8ccd0;--notice-pin-hi:#8b959c}

/* Sticky-note header: the card's whole header band takes the category colour (a
   soft tint that keeps the label and pin legible) as the single at-a-glance
   signal. The body summary is hidden once JS can offer the "Read brief" dialog,
   so a scanning or ADHD reader sees only type + headline until they choose to
   open the full notice. Without JS the summary stays visible as a fallback. */
.notice-pin{background:radial-gradient(circle at 38% 32%,var(--notice-pin-lo),var(--notice-pin-hi) 80%)}
.notice-card__drag{
  border-radius:3px 3px 0 0;
  color:color-mix(in srgb,var(--notice-accent) 80%,#111);
  border-bottom-color:color-mix(in srgb,var(--notice-accent) 40%,#e4ddd0);
  background:color-mix(in srgb,var(--notice-accent) 26%,#fffdf5);
}
.notice-js .notice-card__body>p{display:none}

.notice-card__body{
  flex:1 1 auto;
  min-width:0;
  padding:14px 15px 10px;
}

.notice-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  margin-bottom:10px;
  color:var(--notice-muted);
  font:700 .64rem/1.25 var(--sans);
  letter-spacing:.035em;
}
.notice-card__meta time{font-variant-numeric:tabular-nums}

.notice-card__when{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.notice-new{
  border-radius:3px;
  background:var(--notice-red);
  color:#fff;
  padding:2px 6px;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.notice-state{
  border-radius:3px;
  background:#eee9dc;
  color:#56554f;
  padding:4px 6px;
}
.notice-state[data-timing="urgent"]{background:#a81830;color:#fff}
.notice-state[data-timing="soon"]{background:#f1ddc9;color:#73230e}
.notice-state[data-timing="active"]{background:#e7e1d6;color:#5b381f}
.notice-state[data-timing="archived"]{background:#e3e5e7;color:#51565a}

/* h2, not h3: each notice is a top-level item under the page <h1>, and there
   is no h2 between them. The card title carries its own type, so the level is
   free to be the honest one. */
.notice-card h2{
  margin:0 0 8px;
  color:var(--notice-ink);
  font:750 clamp(1.05rem,1.6vw,1.22rem)/1.14 var(--sans);
  letter-spacing:-.025em;
  text-wrap:pretty;
}

.notice-card__body>p{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  margin:0;
  color:var(--notice-muted);
  font:450 .79rem/1.46 var(--sans);
}

.notice-card__actions{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  min-height:46px;
  border-top:1px solid #e8e1d3;
  padding:7px 11px;
}

.notice-card__actions a,.notice-open{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  text-decoration:none;
  font:750 .67rem/1.2 var(--sans);
}

.notice-open{
  display:none;
  border:1px solid #cbbfac;
  background:transparent;
  color:#5f2734;
  padding:0 9px;
  cursor:pointer;
}
.notice-js .notice-open{display:inline-flex}
.notice-open:hover{border-color:#74233a;background:#fbf3ef}
.notice-card__actions a{
  justify-self:end;
  color:#701b31;
  padding:0 4px;
  text-align:right;
}
.notice-card__actions a:hover{text-decoration:underline;text-underline-offset:3px}

.notice-empty{
  position:relative;
  z-index:4;
  align-self:center;
  justify-self:center;
  width:min(100%,390px);
  margin:auto;
  border:1px solid rgba(255,255,255,.5);
  border-radius:6px;
  background:rgba(67,7,20,.72);
  color:#fff;
  padding:28px;
  text-align:center;
  box-shadow:0 16px 34px rgba(40,2,11,.28);
}
.notice-empty[hidden]{display:none}
.notice-empty h2{margin:0 0 8px;color:#fff;font:600 1.5rem/1.2 var(--display)}
.notice-empty p{margin:0 0 18px;color:rgba(255,255,255,.75);font:.9rem/1.5 var(--sans)}
.notice-empty button{min-height:44px;border-radius:4px;background:#fff;color:#651027;padding:0 16px;font-weight:800}

.notice-board-frame[data-view="list"] .notice-canvas{
  min-height:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.notice-board-frame[data-view="list"] .notice-card{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  /* order:var(--list-order) is on the base .notice-card rule now, since the
     >=900px desktop corkboard needs the same date-order below 900px where
     there is no absolute positioning to switch out of. */
}
.notice-board-frame[data-view="list"] .notice-paper{transform:none}
.notice-board-frame[data-view="list"] .notice-card__drag{cursor:default;touch-action:manipulation}

/* The one panel on this page that follows the theme rather than staying paper.
   It therefore has to take theme-aware inks: `--crimson` is a fixed crimson-600
   in both themes and measured 1.94:1 against the graphite field in dark, so the
   link takes `--ice-color-text-action`, which is crimson-600 in light and
   crimson-200 in dark. The 4px crimson edge became a full hairline: a thick rule
   on one side only was the loudest thing in the composition and said nothing the
   heading does not. */
.notice-source-note{
  display:grid;
  gap:14px;
  margin-top:20px;
  border:1px solid var(--ice-color-border);
  border-radius:6px;
  background:var(--field);
  padding:18px 20px;
}
.notice-source-note p{max-width:78ch;margin:0;color:var(--slate);font:.9rem/1.55 var(--sans)}
.notice-source-note strong{color:var(--ink)}
.notice-source-note a{
  align-self:center;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--ice-color-text-action);
  font:750 .84rem/1.3 var(--sans);
  text-underline-offset:3px;
}

.notice-dialog{
  width:min(680px,calc(100% - 28px));
  max-height:min(82dvh,760px);
  margin:auto;
  overflow:auto;
  overscroll-behavior:contain;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--notice-ink);
  padding:0;
  box-shadow:0 30px 90px rgba(4,9,36,.42);
}
.notice-dialog::backdrop{background:rgba(4,9,36,.68);backdrop-filter:blur(5px)}
.notice-dialog__paper{
  border:1px solid var(--notice-paper-edge);
  background:var(--notice-paper);
}
.notice-dialog__top{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px dashed #d1c5b2;
  padding:8px 14px 8px 20px;
  color:#6a2636;
  font:800 .7rem/1.2 var(--sans);
  letter-spacing:.075em;
  text-transform:uppercase;
}
.notice-dialog__top button{
  min-width:64px;
  min-height:38px;
  border:1px solid #c7b9a4;
  border-radius:4px;
  background:transparent;
  color:#5d2734;
  font:750 .75rem/1 var(--sans);
  cursor:pointer;
}
.notice-dialog__top button:hover{background:#f4ece1;border-color:#713147}
.notice-dialog__content{padding:clamp(24px,6vw,52px)}
.notice-dialog__date{margin:0 0 8px;color:#8a6c52;font:750 .76rem/1.3 var(--sans);letter-spacing:.05em}
.notice-dialog h2{max-width:18ch;margin:0 0 16px;color:var(--notice-ink);font:600 clamp(1.8rem,5vw,3rem)/1.04 var(--display);letter-spacing:-.035em;text-wrap:balance}
.notice-dialog__summary{max-width:56ch;margin:0 0 24px;color:#464a54;font:550 1rem/1.56 var(--sans)}
.notice-dialog ul{display:grid;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.notice-dialog li{position:relative;padding-left:20px;color:#52555d;font:.92rem/1.58 var(--sans)}
.notice-dialog li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--notice-red)}
.notice-dialog__source{min-height:46px;display:inline-flex;align-items:center;border-radius:4px;background:var(--notice-red);color:#fff;padding:0 18px;text-decoration:none;font:800 .8rem/1.2 var(--sans)}
.notice-dialog__source:hover{background:var(--notice-red-deep)}

@media(min-width:620px){
  .notice-toolbar{grid-template-columns:minmax(230px,1fr) minmax(180px,.7fr)}
  .notice-view,.notice-reset{grid-row:2}
  .notice-view{grid-column:1}
  .notice-reset{grid-column:2}
  .notice-source-note{grid-template-columns:1fr auto;align-items:center}
  .notice-tab__full{display:inline}
  .notice-tab__short{display:none}
}

@media(min-width:760px){
  .notice-toolbar{grid-template-columns:minmax(250px,1.2fr) minmax(190px,.8fr) 190px 150px}
  .notice-view,.notice-reset{grid-row:auto;grid-column:auto}
  .notice-drag-help{display:block}
}

@media(min-width:900px){
  .notice-board-frame{padding:10px;border-radius:10px}
  /* ⚠️ `--board-pitch` IS THE ROW PITCH AND IT IS THE LAYOUT INVARIANT: it must
     stay larger than the tallest card, or the row below silently covers every
     "Read brief" button. It used to be 23.4% of a hard-coded 1280px canvas;
     it is that same 299.5px stated directly, so the canvas can grow a row
     without any other number moving. notices.astro declares it on the frame
     and tests/notice-board.spec.mjs measures every card against it.

     Height is now derived rather than fixed. `--board-rows` is the rows THIS
     PAGE uses — set by notices.astro for the no-JS render and re-set by
     notice-board.js on every filter — so a page holding four cards is not a
     screen and a half of empty cork. */
  .notice-canvas{
    min-height:calc(var(--board-top,13px) + var(--board-rows,5) * var(--board-pitch,299.5px));
    display:block;
    padding:0;
  }
  .notice-card{
    position:absolute;
    left:var(--board-x);
    top:calc(var(--board-top,13px) + var(--board-row,0) * var(--board-pitch,299.5px));
    width:clamp(238px,24%,292px);
    will-change:auto;
  }
  .notice-card.is-dragging{will-change:transform}
  .notice-card__drag{cursor:grab}
  .notice-card__drag[aria-disabled="true"]{cursor:default}
  .notice-board-frame[data-view="list"] .notice-canvas{min-height:0;display:grid}
}

@media(min-width:1180px){
  /* Cards scale with the now full-width board so the corkboard reads filled,
     not a scatter of small cards; capped so content never stretches. */
  .notice-card{width:clamp(276px,19%,340px)}
}

/* ── The pager ────────────────────────────────────────────────────────────
   Fifteen notices to a page, any number of pages. Hidden entirely while there
   is only one page: a control that always reads "1 of 1" is furniture, and
   this board sat under fifteen notices for most of its life. */
.notice-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  margin-top:14px;
}
.notice-pager[hidden]{display:none}

.notice-pager__step{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--hairline);
  border-radius:var(--notice-control-radius);
  background:var(--card);
  color:var(--ink);
  padding:0 16px;
  font-size:.84rem;
  font-weight:750;
  transition:border-color 160ms ease,color 160ms ease;
}
.notice-pager__step:hover:not(:disabled){border-color:var(--crimson);color:var(--crimson)}
.notice-pager__step:disabled{opacity:.4;cursor:default}

.notice-pager__count{
  margin:0;
  color:var(--slate);
  font:750 .82rem/1 var(--sans);
  font-variant-numeric:tabular-nums;
}

.notice-pager__dots{display:flex;flex-wrap:wrap;gap:6px}
.notice-pager__dot{
  /* 44px of tap target on a 28px dot, via padding rather than size, so a row
     of eight pages does not become a row of eight buttons the width of a
     phone. The visible dot stays small; the touch area does not. */
  min-width:28px;
  min-height:28px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:var(--card);
  color:var(--slate);
  font:750 .78rem/1 var(--sans);
  font-variant-numeric:tabular-nums;
  transition:border-color 160ms ease,background-color 160ms ease,color 160ms ease;
}
.notice-pager__dot:hover{border-color:var(--slate);color:var(--ink)}
.notice-pager__dot.is-active{border-color:var(--crimson);background:var(--crimson);color:#fff}

@media(pointer:coarse){
  .notice-pager__dot{min-width:44px;min-height:44px}
}

@media(max-width:899px){
  .notice-card,.notice-card[style]{transform:none!important}
  .notice-card__drag small{display:none}
  .notice-reset{display:none}

  /* Coarse-pointer floor, phone only. Above 900px the cards are absolutely
     positioned on the corkboard and the row pitch in the data (~300px) has to
     stay larger than the tallest card, or the row below covers every "Read
     brief" button — so the desktop card geometry is deliberately left alone and
     only the stacked phone layout grows its controls to 44px. */
  .notice-card__drag{min-height:44px}
  .notice-card__actions{min-height:56px}
  .notice-card__actions a,.notice-open{min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  .notice-paper,.notice-tabs button,.notice-card__drag small{transition:none!important}
  .notice-card:hover .notice-paper,.notice-card.is-dragging .notice-paper{transform:none}
  .notice-dialog::backdrop{backdrop-filter:none}
}

@media(prefers-contrast:more){
  .notice-paper{border-width:2px}
  .notice-card__body>p{color:#343740}
  .notice-search input,.notice-audience select,.notice-tabs button,.notice-reset{border-width:2px}
}