/* The Microsoft 365 workspace (session 8) — the hub, its pictures and the access review.
 *
 * NO COLOUR OF ITS OWN. Every colour is a token with the portal's light value as its fallback — `var(--ok-ink, #1c7a55)` —
 * so in light it is the portal's palette and in dark theme.css's, with no second definition to drift. Dark-only
 * adjustments sit under [data-theme="dark"] .m3 and follow the page's theme, never the device on its own.
 * Colour is never the only signal: every state also has words.
 */
.m3 {
  --m3-good: var(--ok-ink, #1c7a55);
  --m3-warn: var(--warn-ink, #b5811f);
  --m3-bad: var(--bad-ink, #a8393c);
  --m3-series: var(--link, #23519e);
  --m3-series2: var(--mint-ink, #006b52);
  --m3-series3: var(--m3-series3-tone, #8eaadb);
  --m3-guest: var(--m3-guest-tone, #7a4fb5);
  --m3-neutral: var(--muted, #818a96);
  --m3-muted: var(--faint, #c3c8cf);
  --m3-track: var(--line, #e6e8ea);
  --m3-rule: var(--line, #e3e6ea);
  --m3-tint: var(--surface-2, #f4f6fa);
  --m3-card: var(--card, #ffffff);
  --m3-ink: var(--brand-ink, #222429);
  --m3-text: var(--text, #4a4d52);
  --m3-soft: var(--muted, #6d6e71);
  display: flex; flex-direction: column; gap: 1rem; color: var(--m3-text);
}
[data-theme="dark"] .m3 { --m3-guest-tone: var(--m3-guest-dark, #b99be6); --m3-muted: var(--faint, #5d6675); --m3-series3-tone: var(--m3-series3-dark, #4f6ea8); }
.m3-section-title { margin: .6rem 0 .6rem; }

.m3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m3-muted { color: var(--m3-soft); }
.m3-small { font-size: .84rem; }
.m3-click { cursor: pointer; }
.m3-click:hover { filter: brightness(1.08); }
.m3 h2, .m3 h3 { margin: 0 0 .35rem; }

/* ---------------------------------------------------------------- the hero */
.m3-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding: 1.4rem 1.5rem;
  border-radius: 14px; color: var(--m3-on-dark, #fff); background: var(--hero-grad); position: relative; overflow: hidden; }
.m3-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--signature, #00f1b6); }
.m3-hero h2 { color: var(--m3-on-dark, #fff); font-size: 1.5rem; }
.m3-hero .m3-eyebrow { color: var(--brand-mint, #00f1b6); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.m3-hero p { margin: .25rem 0 .6rem; color: rgba(255,255,255,.9); max-width: 46rem; }
.m3-hero .m3-ring-big { fill: var(--m3-on-dark, #fff); }
.m3-hero .m3-ring-small { fill: rgba(255,255,255,.8); }
.m3-hero .m3-ring circle:first-child { stroke: rgba(255,255,255,.22); }
.m3-hero-figs { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: .4rem; }
.m3-hero-figs b { display: block; font-family: var(--heading-font, inherit); font-size: 1.6rem; font-weight: 800; color: var(--m3-on-dark, #fff); line-height: 1.1; }
.m3-hero-figs span { font-size: .8rem; color: rgba(255,255,255,.8); }
.m3-hero button.m3-cta { margin-top: .8rem; background: var(--brand-mint, #00f1b6); color: var(--navy-solid, #0b3777); border: 0; border-radius: 999px;
  padding: .55rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; }
.m3-hero button.m3-cta:hover { filter: brightness(1.05); }
.m3-projection { font-size: .85rem; color: rgba(255,255,255,.88); }
.m3-projection b { color: var(--brand-mint, #00f1b6); }

/* ---------------------------------------------------------------- sub-navigation inside the page */
.m3-nav { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--m3-rule); padding-bottom: .5rem; }
.m3-nav button { font: inherit; font-size: .92rem; background: transparent; border: 1px solid transparent; color: var(--m3-text);
  padding: .4rem .8rem; border-radius: 999px; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.m3-nav button:hover { background: var(--m3-tint); }
.m3-nav button[aria-current="page"] { background: var(--btn, #0b3777); color: var(--btn-ink, #f0faf6); }
.m3-badge { font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--m3-warn); color: var(--m3-card); }
.m3-nav button[aria-current="page"] .m3-badge { background: var(--brand-mint, #00f1b6); color: var(--navy-solid, #0b3777); }

/* ---------------------------------------------------------------- cards and grids */
.m3-card { background: var(--m3-card); border: 1px solid var(--m3-rule); border-radius: 14px; padding: 1.2rem 1.35rem; box-shadow: var(--shadow-card, none); min-width: 0; }
.m3-card > h3:first-child { margin-top: 0; }
.m3-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.m3-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.m3-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.m3-lead { font-size: 1.02rem; color: var(--m3-ink); margin: .2rem 0 .6rem; }

/* the tiles on the Overview: each a number and its state, each a way into its view */
.m3-tiles { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m3-tile { text-align: left; font: inherit; background: var(--m3-card); border: 1px solid var(--m3-rule); border-radius: 12px; padding: .8rem .95rem;
  cursor: pointer; display: flex; flex-direction: column; gap: .15rem; color: var(--m3-text); }
.m3-tile:hover { border-color: var(--m3-series); }
.m3-tile b { font-family: var(--heading-font, inherit); font-size: 1.65rem; font-weight: 800; color: var(--heading, var(--m3-ink)); line-height: 1.1; }
.m3-tile .m3-tile-name { font-weight: 600; color: var(--m3-ink); }
.m3-tile .m3-state { font-size: .82rem; display: flex; align-items: center; gap: .35rem; }
.m3-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: none; }

.m3-pill { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; border: 1px solid currentColor; white-space: nowrap; }
.m3-pill.good { color: var(--m3-good); } .m3-pill.warn { color: var(--m3-warn); } .m3-pill.bad { color: var(--m3-bad); }
.m3-pill.guest { color: var(--m3-guest); } .m3-pill.neutral { color: var(--m3-soft); } .m3-pill.series { color: var(--m3-series); }

/* ---------------------------------------------------------------- charts */
.m3-ring-big { font-family: var(--heading-font, inherit); font-weight: 800; fill: var(--heading, var(--m3-ink)); }
.m3-ring-small { fill: var(--m3-soft); font-size: 11px; }
.m3-donut { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.m3-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; min-width: 12rem; flex: 1; }
.m3-legend li { display: grid; grid-template-columns: .8rem 1fr auto; gap: .5rem; align-items: center; font-size: .9rem; }
.m3-legend li.m3-zero { opacity: .55; }
.m3-legend b { color: var(--m3-ink); font-variant-numeric: tabular-nums; }
.m3-swatch { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.m3-bars { width: 100%; border-collapse: collapse; }
.m3-bars caption { text-align: left; color: var(--m3-soft); font-size: .84rem; padding-bottom: .3rem; }
.m3-bars th { text-align: left; font-weight: 500; padding: .3rem .6rem .3rem 0; width: 34%; color: var(--m3-ink); text-transform: none; letter-spacing: 0; font-size: .9rem; }
.m3-heat th, .m3-people, .m3-objlist { text-transform: none; letter-spacing: 0; }
.m3-bars td { padding: .3rem 0; }
.m3-bar-cell { width: 54%; }
.m3-bar-track { position: relative; height: .7rem; background: var(--m3-track); border-radius: 999px; }
.m3-bar { height: 100%; border-radius: 999px; }
.m3-limit { position: absolute; top: -.25rem; bottom: -.25rem; width: 0; border-left: 2px dashed var(--m3-bad); }
.m3-limit-key { display: inline-block; width: 1rem; border-top: 2px dashed var(--m3-bad); vertical-align: middle; }
.m3-bar-value { text-align: right; padding-left: .6rem !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m3-spark { display: block; }
.m3-tree svg { display: block; border-radius: 10px; }
.m3-tree-label { fill: var(--m3-on-dark, #fff); font-size: 12px; font-weight: 600; }
.m3-tree-value { fill: rgba(255,255,255,.88); font-size: 11px; }
.m3-tree-label.m3-tree-dim, .m3-tree-value.m3-tree-dim { fill: var(--m3-ink); }
.m3-table-alt summary { cursor: pointer; color: var(--m3-series); font-size: .85rem; margin-top: .4rem; }
.m3-table-alt table, .m3-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.m3-table-alt th, .m3-table-alt td, .m3-table th, .m3-table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--m3-rule); }
.m3-table th { color: var(--m3-soft); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.m3-table td.num, .m3-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.m3-table tr.m3-click:hover td { background: var(--m3-tint); }
.m3-heat-wrap { overflow-x: auto; }
.m3-heat { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .88rem; }
.m3-heat th { text-align: left; font-weight: 500; color: var(--m3-ink); padding: .25rem .5rem .25rem 0; white-space: nowrap; }
.m3-heat thead th { color: var(--m3-soft); font-size: .78rem; text-align: center; }
.m3-heat td { text-align: center; border-radius: 6px; padding: .35rem .3rem; min-width: 3.2rem; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--hc) calc(var(--h) * 70%), var(--m3-tint)); color: var(--m3-ink); }
.m3-heat td.m3-zero { color: var(--m3-soft); }
.m3-progress { height: .75rem; background: var(--m3-track); border-radius: 999px; overflow: hidden; }
.m3-progress-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.m3-const-label { fill: var(--m3-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.m3-const-key { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: .4rem 0 0; font-size: .82rem; color: var(--m3-soft); }
.m3-const-key li { display: flex; align-items: center; gap: .35rem; }
.m3-const-key b { color: var(--m3-ink); }
.m3-constellation { margin: 0; }
.m3-dial-wrap { display: flex; flex-direction: column; align-items: center; }
.m3-dial-stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; width: 100%; max-width: 22rem; font-size: .72rem; text-align: center; color: var(--m3-soft); }
.m3-dial-stops .on { color: var(--m3-ink); font-weight: 700; }
.m3-weeks { margin: 0; }
.m3-weeks svg { display: block; background: var(--m3-tint); border-radius: 8px; }
.m3-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .8rem; }
.m3-fig b { display: block; font-family: var(--heading-font, inherit); font-weight: 800; font-size: 1.55rem; color: var(--heading, var(--m3-ink)); line-height: 1.1; }
.m3-fig span { font-size: .8rem; color: var(--m3-soft); }

/* ---------------------------------------------------------------- who can get into what */
.m3-access { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.m3-search { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.m3-search input[type=search], .m3-review-search { font: inherit; font-size: .9rem; padding: .4rem .7rem; border: 1px solid var(--m3-rule); border-radius: 999px; background: var(--input-bg, var(--m3-card)); color: var(--m3-text); min-width: 0; }
.m3-review-search { flex: 1 1 16rem; }
.m3-objlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; max-height: 34rem; overflow: auto; }
.m3-objlist button { width: 100%; text-align: left; font: inherit; background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: .5rem .6rem; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; color: var(--m3-text); }
.m3-objlist button:hover { background: var(--m3-tint); }
.m3-objlist button[aria-pressed="true"] { border-color: var(--m3-series); background: var(--m3-tint); color: var(--m3-ink); font-weight: 600; }
.m3-kinds { display: inline-flex; gap: .25rem; background: var(--m3-tint); padding: .2rem; border-radius: 999px; margin-bottom: .6rem; flex-wrap: wrap; }
.m3-kinds button { font: inherit; font-size: .85rem; border: 0; background: transparent; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; color: var(--m3-text); }
.m3-kinds button[aria-pressed="true"] { background: var(--m3-card); color: var(--m3-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.m3-orbit { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.m3-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.m3-people li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--m3-rule); font-size: .9rem; }
.m3-people li .m3-who { color: var(--m3-ink); }
.m3-people .m3-why { grid-column: 2 / 4; font-size: .8rem; color: var(--m3-warn); margin-top: -.15rem; }
.m3-group-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--m3-soft); margin: .7rem 0 .2rem; }

/* ---------------------------------------------------------------- the access review */
.m3-review-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.m3-review-figs { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .88rem; margin-top: .5rem; }
.m3-review-figs b { color: var(--m3-ink); }
.m3-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.m3-filters button { font: inherit; font-size: .85rem; border: 1px solid var(--m3-rule); background: var(--m3-card); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; color: var(--m3-text); }
.m3-filters button[aria-pressed="true"] { border-color: var(--m3-series); color: var(--m3-series); font-weight: 600; }
.m3-item { border: 1px solid var(--m3-rule); border-radius: 12px; background: var(--m3-card); overflow: hidden; }
.m3-item-head { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .7rem .95rem; background: var(--m3-tint); flex-wrap: wrap; }
.m3-item-head h4 { margin: 0; font-size: 1rem; color: var(--m3-ink); font-family: var(--heading-font, inherit); }
.m3-kindword { font-size: .74rem; color: var(--m3-soft); text-transform: uppercase; letter-spacing: .06em; }
.m3-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: .7rem .95rem; border-top: 1px solid var(--m3-rule); align-items: center; }
.m3-line .m3-who { color: var(--m3-ink); font-weight: 600; }
.m3-line .m3-reason { font-size: .86rem; color: var(--m3-soft); }
.m3-line .m3-reason b { color: var(--m3-warn); font-weight: 600; }
.m3-choice { display: inline-flex; border: 1px solid var(--m3-rule); border-radius: 10px; overflow: hidden; }
.m3-choice button { font: inherit; font-size: .84rem; border: 0; background: var(--m3-card); color: var(--m3-text); padding: .4rem .7rem; cursor: pointer; border-left: 1px solid var(--m3-rule); }
.m3-choice button:first-child { border-left: 0; }
.m3-choice button.m3-suggested { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--m3-series) 45%, transparent); }
.m3-choice button[aria-pressed="true"].keep { background: var(--m3-good); color: var(--m3-card); }
.m3-choice button[aria-pressed="true"].change { background: var(--m3-series); color: var(--m3-card); }
.m3-choice button[aria-pressed="true"].unsure { background: var(--m3-neutral); color: var(--m3-card); }
.m3-change-label { font-size: .8rem; color: var(--m3-series); }
.m3-submit { position: sticky; bottom: .5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--m3-card); border: 1px solid var(--m3-rule); border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--shadow-card, none); }
.m3 button.m3-primary { font: inherit; font-weight: 700; background: var(--btn, #0b3777); color: var(--btn-ink, #f0faf6); border: 0; border-radius: 999px; padding: .55rem 1.15rem; cursor: pointer; }
.m3 button.m3-primary:disabled { opacity: .5; cursor: not-allowed; }
.m3 button.m3-secondary { font: inherit; background: var(--m3-card); color: var(--m3-ink); border: 1px solid var(--m3-rule); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; }
.m3 button.m3-link { font: inherit; background: none; border: 0; padding: 0; color: var(--m3-series); cursor: pointer; text-decoration: underline; }
.m3-ticket { white-space: pre-wrap; font-size: .85rem; background: var(--m3-tint); border-radius: 10px; padding: .8rem 1rem; border: 1px solid var(--m3-rule); max-height: 22rem; overflow: auto; }
.m3-note { width: 100%; min-height: 4rem; font: inherit; }
.m3-done { border-left: 4px solid var(--m3-good); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .m3-hero { grid-template-columns: 1fr; text-align: left; padding: 1.1rem; }
  .m3-hero .m3-ring { width: 104px; height: 104px; }
  .m3-split, .m3-access, .m3-orbit { grid-template-columns: 1fr; }
  .m3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3-line { grid-template-columns: 1fr; }
  .m3-choice { width: 100%; } .m3-choice button { flex: 1; }
  .m3-bars th { width: 40%; }
  .m3-objlist { max-height: 16rem; }
  .m3-card { padding: 1rem; }
  .m3-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; }
  .m3-nav button { flex: none; }
  .m3-review-head { grid-template-columns: 1fr; }
  .m3-submit { padding: .6rem .8rem; }
  .m3-submit .m3-long { display: none; }
  .m3-hero-figs { gap: .9rem 1.4rem; }
}
@media print {
  .m3-nav, .m3-submit, .m3 button.m3-cta, .m3-filters { display: none !important; }
  .m3-card, .m3-item { break-inside: avoid; box-shadow: none; }
}