/* ==========================================================================
   layout.css - the application shell
   Navy sidebar, white topbar, canvas content area, thin red rule under the
   page title. Mobile first: the sidebar is an off-canvas drawer below 960px
   and a fixed rail above it. Usable down to 360px.
   ========================================================================== */

.mk-app {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 1fr;
  grid-template-rows: var(--mk-topbar-h) 1fr;
  grid-template-areas:
    "topbar"
    "main";
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.mk-sidebar {
  grid-area: sidebar;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(84vw, var(--mk-sidebar-w));
  background: var(--mk-sidebar-bg);
  color: var(--mk-sidebar-text);
  transform: translateX(-100%);
  transition: transform var(--mk-dur) var(--mk-ease);
  overflow: hidden;
}

.mk-sidebar[data-open="true"] { transform: translateX(0); }

.mk-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  height: var(--mk-topbar-h);
  padding: 0 var(--mk-space-4);
  border-bottom: 1px solid var(--mk-sidebar-line);
  flex: 0 0 auto;
}

/* The supplied ISFAP artwork carries a black wordmark: 38 percent of its
   opaque pixels are pure black, which measures 1.68:1 against the deep green
   and is effectively invisible. Recolouring someone's logo is not ours to do,
   so wherever the surface is dark the mark sits on a white plate instead.
   A reversed lockup from ISFAP would remove the need for this. */
.mk-logo-plate {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  background: var(--mk-surface);
  border-radius: var(--mk-radius-sm);
  flex: 0 0 auto;
}

/* In the sidebar the full lockup is useless: at the height available the
   wordmark cap height works out at under 6px and the strapline is smaller
   still. The sidebar already names the product in text beside it, so what is
   wanted here is the mark, not the words.

   The crop numbers are the measured bounding box of the coloured mark within
   the supplied artwork: 629x609 at (104,106) of 1920x1039, found by scanning
   for non-grey opaque pixels. Expressing them as ratios of --mark keeps the
   crop correct at any size. A cropped asset from ISFAP would replace all of
   this with a plain img. */
.mk-logo-mark {
  --mark: 28px;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--mark) * 629 / 609);
  height: var(--mark);
  overflow: hidden;
}

.mk-logo-mark img {
  position: absolute;
  height: calc(var(--mark) * 1039 / 609);
  width: auto;
  max-width: none;                        /* base.css caps images at 100% */
  left: calc(var(--mark) * -104 / 609);
  top: calc(var(--mark) * -106 / 609);
}

.mk-sidebar__brand .mk-logo-plate { padding: 5px; }

.mk-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.mk-sidebar__brand-title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mk-sidebar-text-on);
}

.mk-sidebar__brand-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-sidebar-text);
}

.mk-sidebar__nav {
  flex: 1 1 auto;
  padding: var(--mk-space-4) var(--mk-space-3) var(--mk-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mk-navgroup + .mk-navgroup { margin-top: var(--mk-space-5); }

.mk-navgroup__title {
  padding: 0 var(--mk-space-3) var(--mk-space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
}

.mk-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: 10px var(--mk-space-3);
  margin-bottom: 2px;
  font-size: var(--mk-text-base);
  font-weight: 500;
  color: var(--mk-sidebar-text);
  border: 0;
  border-radius: var(--mk-radius);
  transition: background var(--mk-dur) var(--mk-ease),
              color var(--mk-dur) var(--mk-ease);
}

.mk-navlink:hover {
  color: var(--mk-sidebar-text-on);
  background: rgb(255 255 255 / 8%);
  border-bottom-color: transparent;
}

.mk-navlink[aria-current="page"] {
  color: var(--mk-sidebar-text-on);
  background: var(--mk-sidebar-raised);
  font-weight: 600;
}

/* The red accent marks the active destination and nothing else. */
.mk-navlink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--mk-space-3) * -1 + 3px);
  top: 50%;
  width: 3px;
  height: 22px;
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
  transform: translateY(-50%);
}

.mk-navlink__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.mk-navlink__badge {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mk-brand-deep);
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
}

.mk-sidebar__footer {
  flex: 0 0 auto;
  padding: var(--mk-space-4);
  border-top: 1px solid var(--mk-sidebar-line);
}

.mk-sidebar__footer img { height: 20px; width: auto; opacity: 0.92; }

.mk-sidebar__footer p {
  margin: var(--mk-space-2) 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgb(255 255 255 / 55%);
}

.mk-sidebar__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--mk-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mk-dur) var(--mk-ease), visibility var(--mk-dur);
}

.mk-sidebar__scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.mk-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  height: var(--mk-topbar-h);
  padding: 0 var(--mk-space-4);
  background: var(--mk-surface);
  border-bottom: 1px solid var(--mk-line);
}

.mk-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--mk-heading);
  background: transparent;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  cursor: pointer;
}

.mk-topbar__toggle:hover { background: var(--mk-highlight); }

.mk-topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  min-width: 0;
}

.mk-topbar__logo img { height: 30px; width: auto; }

.mk-topbar__context {
  display: none;
  min-width: 0;
  padding-left: var(--mk-space-3);
  border-left: 1px solid var(--mk-line);
}

.mk-topbar__context-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-slate);
}

.mk-topbar__context-value {
  display: block;
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-topbar__search {
  display: none;
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}

.mk-topbar__search input { padding-left: 36px; min-height: 38px; }

.mk-topbar__search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--mk-slate);
  transform: translateY(-50%);
  pointer-events: none;
}

.mk-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-left: auto;
}

.mk-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--mk-heading);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mk-radius);
  cursor: pointer;
}

.mk-iconbtn:hover { background: var(--mk-highlight); border-color: var(--mk-line); }

.mk-iconbtn__dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--mk-danger);
  border: 2px solid var(--mk-surface);
  border-radius: 50%;
}

.mk-usermenu {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  padding: 4px 6px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mk-radius-pill);
  cursor: pointer;
  text-align: left;
}

.mk-usermenu:hover { background: var(--mk-highlight); border-color: var(--mk-line); }

.mk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mk-surface);
  background: var(--mk-brand-mid);
  border-radius: 50%;
}

.mk-usermenu__meta { display: none; line-height: 1.2; }
.mk-usermenu__name { font-size: var(--mk-text-sm); font-weight: 600; color: var(--mk-heading); }
.mk-usermenu__role { font-size: 11px; color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Main region
   -------------------------------------------------------------------------- */

.mk-main {
  grid-area: main;
  min-width: 0;
  padding: var(--mk-space-4) var(--mk-space-4) var(--mk-space-7);
}

.mk-main__inner { max-width: var(--mk-content-max); margin: 0 auto; }

.mk-pagehead { margin-bottom: var(--mk-space-5); }

.mk-pagehead__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mk-space-4);
  flex-wrap: wrap;
}

.mk-pagehead h1 { font-size: var(--mk-text-lg); }

.mk-pagehead__sub {
  margin: var(--mk-space-1) 0 0;
  font-size: var(--mk-text-sm);
  color: var(--mk-slate);
}

.mk-pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  flex-wrap: wrap;
}

/* The thin red rule under every page title. */
.mk-pagehead__rule {
  width: 48px;
  height: 3px;
  margin-top: var(--mk-space-3);
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
}

.mk-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-2);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.mk-breadcrumb li { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-breadcrumb li + li::before { content: "/"; color: var(--mk-line); }
.mk-breadcrumb a { color: var(--mk-slate); }
.mk-breadcrumb a:hover { color: var(--mk-link); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.mk-grid {
  display: grid;
  gap: var(--mk-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mk-grid--2 { grid-template-columns: 1fr; }
.mk-grid--sidebar { display: grid; gap: var(--mk-space-4); grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .mk-main { padding: var(--mk-space-5) var(--mk-space-5) var(--mk-space-7); }
  .mk-topbar { padding: 0 var(--mk-space-5); }
  .mk-usermenu__meta { display: block; }
  .mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .mk-topbar__search { display: block; }
  .mk-topbar__context { display: block; }
}

@media (min-width: 960px) {
  .mk-app {
    grid-template-columns: var(--mk-sidebar-w) 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
  }

  .mk-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--mk-sidebar-w);
    transform: none;
  }

  .mk-topbar__toggle { display: none; }
  .mk-sidebar__scrim { display: none; }
  .mk-main { padding: var(--mk-space-5) var(--mk-space-6) var(--mk-space-7); }
  .mk-grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --------------------------------------------------------------------------
   Authentication layout
   Single column on mobile. Navy brand panel beside the form from 900px.
   -------------------------------------------------------------------------- */

/* Exactly the viewport, never taller, with the page itself unable to scroll.
   min-height here instead would let the grid row grow to whichever column is
   taller, which is the sign-in form once the demonstration account list is in
   it. The brand column would then be pushed past the fold along with it, and
   its message, which sits at the bottom of the column by design, would only be
   reachable by scrolling the whole page. The form scrolls inside its own
   column instead. */
.mk-auth {
  display: grid;
  height: 100dvh;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.mk-auth__brand {
  display: none;
  flex-direction: column;
  padding: var(--mk-space-6);
  color: var(--mk-sidebar-text-on);
  background:
    radial-gradient(1100px 520px at 8% -10%, rgb(var(--mk-brand-rgb) / 45%), transparent 60%),
    var(--mk-brand-deep);
  /* min-height:0 lets a grid item shrink below its content size, which is what
     makes the overflow land here rather than on the page. The brand content
     fits comfortably, so this scrollbar should never appear; it is here so a
     very short window hides nothing rather than clipping it. */
  min-height: 0;
  overflow-y: auto;
}

.mk-auth__brand-top { display: flex; align-items: center; gap: var(--mk-space-3); }
/* Larger here than in the sidebar because there is room for it, and because
   this is the first thing anyone sees. See .mk-logo-plate for why it is on a
   white plate. */
.mk-auth__brand-top .mk-logo-plate { padding: var(--mk-space-3) var(--mk-space-4); }
.mk-auth__brand-top img { height: 56px; width: auto; display: block; }

.mk-auth__brand-body { margin-top: auto; max-width: 46ch; }

.mk-auth__brand-body h2 {
  font-size: var(--mk-text-2xl);
  color: var(--mk-sidebar-text-on);
  line-height: 1.15;
}

.mk-auth__brand-body p {
  margin-top: var(--mk-space-3);
  color: rgb(255 255 255 / 76%);
}

.mk-auth__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-top: var(--mk-space-5);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-sidebar-line);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 70%);
}

.mk-auth__tagline span:nth-child(2) { color: var(--mk-gold); }

.mk-auth__panel {
  display: flex;
  flex-direction: column;
  padding: var(--mk-space-5) var(--mk-space-4) var(--mk-space-6);
  background: var(--mk-surface);
  min-height: 0;
  overflow-y: auto;
}

/* Centred by auto margins rather than by justify-content. They do the same job
   while the form is shorter than the column, but when it is taller the auto
   margins resolve to zero and it scrolls from the top. justify-content:center
   would instead overflow equally in both directions and put the heading above
   the scrollable area, where it cannot be reached. */
.mk-auth__inner { width: 100%; max-width: 400px; margin: auto; }

.mk-auth__mobile-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--mk-space-5);
}

.mk-auth__mobile-logo img { height: 46px; width: auto; }

.mk-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  margin: var(--mk-space-5) 0;
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
}

.mk-auth__divider::before,
.mk-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mk-line);
}

.mk-auth__foot {
  margin-top: var(--mk-space-6);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-line);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
}

.mk-demo-keys { display: grid; gap: 6px; margin-top: var(--mk-space-2); }

.mk-demo-key {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  width: 100%;
  padding: 7px 10px;
  font-size: var(--mk-text-xs);
  text-align: left;
  color: var(--mk-heading);
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
}

.mk-demo-key:hover { border-color: var(--mk-brand-strong); }
.mk-demo-key strong { flex: 0 0 auto; min-width: 92px; }
.mk-demo-key span { color: var(--mk-slate); font-family: var(--mk-font-mono); }

@media (min-width: 900px) {
  .mk-auth { grid-template-columns: 1.05fr 1fr; }
  .mk-auth__brand { display: flex; }
  .mk-auth__mobile-logo { display: none; }
  .mk-auth__panel { padding: var(--mk-space-6); }
}

@media print {
  .mk-sidebar, .mk-topbar, .mk-pagehead__actions { display: none !important; }
  .mk-app { grid-template-columns: 1fr; grid-template-areas: "main"; }
  body { background: var(--mk-surface); }
}