/* The centre's door, told apart from the office's at a glance.
   admin.css does the work; this only changes what must look different, because
   two stylesheets kept in step by hand stop being in step by about March. */
.bar{background:var(--deep)}
.bar nav a{color:#e3c3b4}
.bar nav a.on{border-bottom-color:#f0a882}
.bar .who{color:#c49a86}
.bar .out{color:#e3c3b4}
.bar .crest{display:inline-block;width:26px;height:32px;background:#fff;opacity:.92;border-radius:3px}

.whoami{background:#fff;border:1px solid var(--line);border-left:3px solid var(--deep);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 22px}
.whoami b{font:700 15px 'Playfair Display',serif;color:var(--ink2)}
.whoami span{display:block;font-size:13px;color:var(--soft);margin-top:2px}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.tile .n{font:800 26px 'Playfair Display',serif;color:var(--ink2);line-height:1}
.tile .l{font:600 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:7px}
.tile.warn{border-color:#fed7aa;background:#fffbeb}
.tile.warn .n{color:#b45309}
.tile.good{border-color:#bbf7d0;background:#f0fdf4}
.tile.good .n{color:#15803d}

.step{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .mark{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 12px Inter;background:var(--paper2);color:var(--soft)}
.step.on .mark{background:#15803d;color:#fff}
.step.now .mark{background:var(--deep);color:#fff}
.step .body{flex:1;min-width:0}
.step .body b{display:block;font-size:14.5px;color:var(--ink2)}
.step .body span{display:block;font-size:13px;color:var(--soft);margin-top:2px;line-height:1.55}