/* ---- The calendar -------------------------------------------------------
     The grid takes the height of the page, not half of it, and the weekend is a
     quarter-column each: this practice works five days, and an equal Saturday
     costs a seventh of the screen to say "nothing". */
  .calhost { display:flex; flex-direction:column; gap:.6rem; }
  .calgrid { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
             border-radius:6px; overflow:hidden; }
  /* "week" is also the timesheet's strip, which aligns to the bottom: the
     calendar's columns start at the top and run the full height (22 Oct). */
  .calgrid.week  { align-items:stretch; gap:1px; margin:0;
                   height:calc(100vh - var(--topbar-h,48px) - 7.5rem); }
  .calgrid.month { grid-auto-rows:minmax(5.5rem,1fr);
                   min-height:calc(100vh - var(--topbar-h,48px) - 7.5rem); }
  .calgrid.wkdays { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .calcell { background:var(--surface); padding:.35rem .4rem; overflow:auto; min-width:0; }
  .calcell.today { background:var(--today); }
  .calcell.weekend { background:var(--st-wash); }
  .calcell.other { opacity:.55; }
  .calhead { all:unset; cursor:pointer; display:flex; justify-content:space-between; width:100%;
             font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
             font-weight:700; margin-bottom:.35rem; padding-bottom:.15rem;
             border-bottom:1px solid var(--rule-soft); }
  .calhead:hover { color:var(--accent); }
  .calcell.today .calhead { color:var(--accent); }
  .calnone { color:var(--ink-3); font-size:.74rem; }
  .calday { background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.7rem .8rem;
            min-height:calc(100vh - var(--topbar-h,48px) - 8rem); overflow:auto; }
  .calday h3 { margin:0 0 .6rem; font-size:.92rem; display:flex; justify-content:space-between; align-items:baseline; }
  .calday h3 span { font-size:.75rem; color:var(--ink-3); font-weight:400; }
  .calmodes { display:inline-flex; gap:.25rem; margin-left:.6rem; }
  .calmodes button { all:unset; cursor:pointer; font-size:.78rem; padding:.22rem .6rem; border-radius:999px;
                     border:1px solid var(--rule); color:var(--ink-3); }
  .calmodes button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft);
                                          color:var(--ink); font-weight:600; }
  .calwho { display:inline-flex; gap:.35rem; align-items:center; margin-left:.6rem; }
  .calwho label { font-size:.72rem; color:var(--ink-3); }
  .calpick { border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:.6rem .7rem; }
  .calpick__top { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
  .calpick__top .grow { flex:1; }
  .calpick__top .q { max-width:12rem; }
  .calpick__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:.15rem .6rem;
                   max-height:14rem; overflow:auto; }
  .calpick__list label { display:flex; gap:.35rem; align-items:center; font-size:.82rem; padding:.12rem 0; }
  .calpick__list .dot { width:.55rem; height:.55rem; border-radius:50%; display:inline-block; flex:0 0 auto; }
  .calpick__saved { margin-top:.5rem; font-size:.78rem; color:var(--ink-3); }
  .calpick__saved .admchip { margin-right:.3rem; }
  .calpick__saved .x { all:unset; cursor:pointer; margin-left:.25rem; color:var(--ink-3); }
  .calpick__saved .x:hover { color:var(--brick); }

  /* Projects | Jobs: the heading is the switch. Two tabs at the left edge, the
     one you are on drawn as a raised tab. */
  .topbar h1.pjh { display:flex; gap:.3rem; align-items:center; margin:0 auto 0 0; }
  .pjh button { all:unset; cursor:pointer; font-size:.95rem; font-weight:600; color:var(--ink-3);
                padding:.25rem .7rem; border-radius:6px; border:1px solid transparent; }
  .pjh button:hover { color:var(--ink); }
  .pjh button[aria-pressed="true"] { color:var(--ink); font-weight:700; background:var(--surface);
                                     border-color:var(--rule); box-shadow:var(--shadow); }

  /* Settings is a gear beside the name, not a place in the column: it is where
     you go to change how the app behaves, not a part of the work. */
  /* the group headings: small, quiet, and never a button */
  .navgrp { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#7f93a6; font-weight:700;
            padding:.85rem .55rem .25rem; }
  nav > .navgrp:first-child { padding-top:.1rem; }
  .navfoot { margin-bottom:.45rem; }
  /* the name is the way into settings: yours, and the firm's if you look after them */
  .signedin { all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:.5rem;
              padding:.35rem .45rem; border-radius:5px; color:#c3d2df; font-size:.86rem; }
  .signedin b { flex:1; min-width:0; color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .signedin:hover { background:rgba(255,255,255,.07); }
  .signedin:focus-visible { outline:2px solid #7fc4e8; outline-offset:1px; }
  .signedin[aria-current="page"] { background:var(--accent); }
  .signedin .avatar { flex:0 0 auto; width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
                      background:rgba(255,255,255,.12); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.02em; }
  .signedin .chev { color:#8fa3b6; font-size:1rem; }

  /* Help: asking for something is the point of the screen, so it takes two
     thirds of the top; looking a screen up is the other third. */
  .helphero { display:grid; grid-template-columns:2fr 1fr; gap:.8rem; align-items:start; margin-bottom:.8rem; }
  @media (max-width:900px){ .helphero { grid-template-columns:1fr; } }
  /* "Where did it go?" leads the Help page: the width of the page, and tall
     enough not to be lost, but not so tall that it is all there is above the
     fold. The list scrolls inside it rather than growing the page. */
  .findhero { margin-bottom:.8rem; }
  .findhero .q { width:100%; box-sizing:border-box; font-size:1rem; padding:.5rem .7rem; }
  .findhero__list { margin-top:.6rem; height:17rem; overflow:auto; border:1px solid var(--rule-soft);
                    border-radius:6px; background:var(--st-wash); padding:.2rem .4rem; }
  @media (max-height:760px){ .findhero__list { height:12rem; } }
  .helpreqs, .helptickets, .helpwho { margin-bottom:.8rem; }
  /* a problem's severity reads at a glance: four hues, the urgent one loudest */
  .tksev { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
           padding:.05rem .35rem; border:1.5px solid currentColor; border-radius:3px; margin-top:.2rem; }
  .tk--urgent .tksev { color:var(--st-critical, #c0392b); }
  .tk--high .tksev { color:var(--amber, #8a5d0f); }
  .tk--normal .tksev { color:var(--accent); }
  .tk--low .tksev { color:var(--ink-3); }
  .tk--done td { opacity:.65; }
  .tkans { margin-top:.35rem; padding:.3rem .5rem; border-left:3px solid var(--accent); background:var(--surface-2); font-size:.84rem; }
  .tkact { display:flex; gap:.35rem; margin-top:.35rem; flex-wrap:wrap; }
  .tkact .q { flex:1; min-width:10rem; margin:0; }
  .reqlist { list-style:none; margin:.2rem 0 0; padding:0; }
  .reqlist li { display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0;
                border-top:1px solid var(--rule-soft); }
  .reqlist li:first-child { border-top:0; }
  .reqbody { flex:1; min-width:0; }
  .reqbody .muted { font-size:.82rem; margin-top:.1rem; }
  .reqmeta { font-size:.74rem; color:var(--ink-3); margin-top:.15rem; }
  .votebtn { all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center;
             min-width:2.6rem; padding:.25rem .3rem; border:1px solid var(--rule); border-radius:6px;
             color:var(--ink-3); background:var(--surface); }
  .votebtn .caret { font-size:.6rem; line-height:1; }
  .votebtn b { font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--ink); }
  .votebtn:hover { border-color:var(--accent); }
  .votebtn.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
  .whogrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.7rem; }
  .whocard { border:1px solid var(--rule-soft); border-radius:6px; padding:.6rem .7rem; }
  .whocard b { display:block; }
  .whocard .muted { font-size:.78rem; }

  /* Admin, second pass: people first, then what one person holds, then what a
     category would give -- so the two can be read straight across. */
  .adm.adm2 { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
  @media (max-width:900px){ .adm.adm2 { grid-template-columns:minmax(0,1fr); } }
  .admp.on { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .admrow.odd { background:var(--st-wash); }
  .catpick { display:flex; flex-wrap:wrap; gap:.15rem .7rem; flex:1 1 100%; }
  .inlinechk { display:inline-flex; gap:.3rem; align-items:center; font-size:.78rem; color:var(--ink-2); }
  .admpane > header.sub2 { border-top:1px solid var(--rule); }
  .admbody.admhist { max-height:16rem; }
  ul.admhist { margin:0; padding-left:1.1rem; }

  .gchips { display:inline-flex; gap:.25rem; align-items:center; }
  .gchips .k { font-size:.72rem; color:var(--ink-3); margin-right:.15rem; }
  .gchips button { all:unset; cursor:pointer; font-size:.76rem; padding:.2rem .55rem; border-radius:999px;
                   border:1px solid var(--rule); color:var(--ink-3); }
  .gchips button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft);
                                        color:var(--ink); font-weight:600; }
  td .pill { margin-left:.35rem; }