/* =====================================================================
   PKWORLD Mail Manager — design system
   Shares its tokens with the PKWORLD Mail webmail skin, value for value.
   ===================================================================== */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2')}

:root{
  --green:#3CB54B; --green-700:#2E9A3C; --green-800:#237A2F;
  --navy:#1B4353; --navy-900:#0E2733; --teal:#51BAC0; --teal-deep:#216E85; --gold:#E8CA35;
  --page:#F4F7F6; --panel:#FFFFFF; --sunken:#EDF1F0; --rail:#12333F; --rail-2:#0E2733;
  --hover:#F0F4F3; --active:#E6F4E9; --selected:#DCF0E1; --mint:#EFFCF1;
  --strong:#10262E; --body:#33474F; --muted:#6B7C82; --faint:#93A2A7; --link:#216E85;
  --on-rail:#C9DCDA; --on-rail-dim:#7E9AA0;
  --hair:#E3EAE8; --solid:#D3DDDA; --line-strong:#B8C6C2;
  --alert:#C8452F; --alert-bg:#FCEFEC; --warn:#B07908; --warn-bg:#FDF6E3;
  --info:#216E85; --info-bg:#EAF4F7; --ok:#237A2F; --ok-bg:#EAF6EC;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --e-1:0 1px 2px rgba(16,38,46,.06),0 1px 3px rgba(16,38,46,.05);
  --e-2:0 2px 6px rgba(16,38,46,.07),0 6px 16px rgba(16,38,46,.06);
  --e-3:0 8px 20px rgba(16,38,46,.10),0 20px 44px rgba(16,38,46,.10);
  --focus:0 0 0 3px rgba(60,181,75,.28);
  --fast:110ms cubic-bezier(.4,0,.2,1); --base:180ms cubic-bezier(.4,0,.2,1);
  --ui:Inter,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --brand:Poppins,'Century Gothic',Futura,'Trebuchet MS',sans-serif;
  --side:248px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:var(--body);font-family:var(--ui);font-size:14px;line-height:1.55;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--link);text-decoration:none}
h1,h2,h3,h4{font-family:var(--brand);color:var(--strong);font-weight:600;margin:0;line-height:1.25}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px} h4{font-size:13.5px;font-family:var(--ui);font-weight:600}
p{margin:0 0 10px} p:last-child{margin-bottom:0}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-xs)}

/* ============================================================ THE SHELL */
.app{display:flex;min-height:100vh}

/* ---- sidebar ---- */
.side{
  width:var(--side);flex:0 0 var(--side);
  background:linear-gradient(180deg,var(--rail) 0%,var(--rail-2) 100%);
  color:var(--on-rail);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.side-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.side-brand .mark{width:32px;height:32px;color:var(--green);flex:0 0 32px}
.side-brand .mark svg{width:100%;height:100%;display:block}
.side-brand .name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.side-brand .name b{font-family:var(--brand);font-weight:600;font-size:15px;color:#fff;letter-spacing:.1px}
.side-brand .name span{font-size:11px;color:var(--on-rail-dim);letter-spacing:.02em}

.side-nav{padding:14px 10px 24px;flex:1}
.side-group{margin-bottom:18px}
.side-group > h5{
  margin:0 0 6px;padding:0 10px;font-family:var(--ui);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-rail-dim)}
.side-nav a{
  display:flex;align-items:center;gap:11px;padding:9px 10px;margin-bottom:2px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--on-rail);
  transition:background var(--fast),color var(--fast)}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.on{background:rgba(60,181,75,.16);color:#fff;box-shadow:inset 2px 0 0 var(--green)}
.side-nav a .ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.side-nav a.on .ic{opacity:1;color:var(--green)}
.side-nav a .pill{margin-left:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--alert);color:#fff}
.side-nav a .pill.quiet{background:rgba(255,255,255,.14);color:var(--on-rail)}

.side-foot{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:var(--on-rail-dim)}
.side-foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;
  box-shadow:0 0 0 3px rgba(60,181,75,.18)}

/* ---- main column ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:18px;padding:0 26px;height:64px;
  background:var(--panel);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:30}
.topbar .title{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.topbar .title h1{font-size:18px}
.topbar .title span{font-size:12px;color:var(--muted)}
.search{margin-left:auto;position:relative}
.search input{
  width:280px;padding:9px 14px 9px 36px;font-family:var(--ui);font-size:13.5px;
  background:var(--sunken);border:1px solid transparent;border-radius:var(--r-pill);color:var(--strong)}
.search input:focus{outline:none;background:var(--panel);border-color:var(--green);box-shadow:var(--focus)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.topbar .topmail{white-space:nowrap;flex:0 0 auto}

.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:0 0 34px;font-family:var(--ui)}

.content{padding:24px 26px 44px;flex:1}
.content > .row{margin-bottom:20px}

/* =========================================================== COMPONENTS */

/* ---- card ---- */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e-1);overflow:hidden}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--hair)}
.card-head h3{flex:1;min-width:0}
.card-head .sub{font-size:12px;color:var(--muted);font-weight:400}
.card-body{padding:18px}
.card-body.flush{padding:0}
.card-foot{padding:12px 18px;background:var(--sunken);border-top:1px solid var(--hair);font-size:12.5px}

/* ---- stat tile ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tile{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--e-1);padding:16px 18px}
.tile .lbl{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px}
.tile .val{font-family:var(--brand);font-size:27px;font-weight:600;color:var(--strong);line-height:1.15;margin-top:5px;
  display:flex;align-items:baseline;gap:6px}
.tile .val small{font-size:14px;font-weight:500;color:var(--muted);font-family:var(--ui)}
.tile .delta{margin-top:5px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px}
.tile .delta.up{color:var(--ok)} .tile .delta.down{color:var(--alert)} .tile .delta.flat{color:var(--muted)}
.tile .spark{margin-top:9px;height:26px}

/* ---- badge ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;line-height:1.7;white-space:nowrap}
.badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--alert-bg);color:var(--alert)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.mute{background:var(--sunken);color:var(--muted)}

/* ---- meter / quota bar ---- */
.meter{height:6px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden;min-width:80px}
.meter > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--green);transition:width var(--base)}
.meter.warn > i{background:var(--gold)}
.meter.bad > i{background:var(--alert)}
.meter-row{display:flex;flex-direction:column;gap:4px;min-width:120px}
.meter-row .t{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.meter-row .t b{color:var(--strong);font-weight:600}
.meter-row .t span{color:var(--muted)}

/* ---- initials disc ----
   The base. Anywhere .av appears on its own it still comes out round,
   centred and white on its colour. The table and page-head versions
   below only change the size. */
.av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;background:var(--navy);
  color:#fff;font-weight:600;font-size:11.5px;letter-spacing:.02em;line-height:1}

/* ---- table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl thead th{
  background:var(--sunken);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;text-align:left;padding:10px 16px;border-bottom:1px solid var(--solid);white-space:nowrap}
.tbl thead th.num{text-align:right}
.tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .who{display:flex;align-items:center;gap:11px;min-width:0}
.tbl .who .av{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:#fff;background:var(--teal-deep)}
.tbl .who .nm{min-width:0}
.tbl .who .nm b{display:block;color:var(--strong);font-weight:600;font-size:13.5px}
.tbl .who .nm span{display:block;color:var(--muted);font-size:12px}

/* ---- attention list ---- */
.att{list-style:none;margin:0;padding:0}
.att li{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hair);align-items:flex-start}
.att li:last-child{border-bottom:0}
.att li:hover{background:var(--hover)}
.att .ico{width:30px;height:30px;border-radius:var(--r-sm);flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.att .ico svg{width:15px;height:15px}
.att .ico.bad{background:var(--alert-bg);color:var(--alert)}
.att .ico.warn{background:var(--warn-bg);color:var(--warn)}
.att .ico.info{background:var(--info-bg);color:var(--info)}
.att .txt{min-width:0;flex:1}
.att .txt b{display:block;color:var(--strong);font-size:13.5px;font-weight:600}
.att .txt span{display:block;color:var(--muted);font-size:12.5px}
.att .go{color:var(--faint);flex:0 0 auto;align-self:center}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;
  font-family:var(--ui);font-size:13.5px;font-weight:600;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--green);background:var(--green);color:#fff;box-shadow:var(--e-1);
  transition:background var(--fast),border-color var(--fast),box-shadow var(--fast)}
.btn:hover{background:var(--green-700);border-color:var(--green-700);box-shadow:var(--e-2)}
.btn.ghost{background:var(--panel);border-color:var(--solid);color:var(--body)}
.btn.ghost:hover{background:var(--panel);border-color:var(--green);color:var(--green-800)}
.btn.danger{background:var(--panel);border-color:var(--solid);color:var(--alert)}
.btn.danger:hover{background:var(--alert);border-color:var(--alert);color:#fff}
.btn.sm{padding:6px 13px;font-size:12.5px}
.btn .ic{width:15px;height:15px}

/* ---- filter bar ---- */
.filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;color:var(--body);background:var(--panel);border:1px solid var(--hair);cursor:pointer;
  transition:border-color var(--fast),color var(--fast),background var(--fast)}
.chip:hover{border-color:var(--line-strong)}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.chip .n{font-size:11.5px;opacity:.75}

/* ---- segmented ---- */
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:transparent;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--muted);
  padding:5px 14px;border-radius:var(--r-pill);cursor:pointer}
.seg button.on{background:var(--panel);color:var(--strong);box-shadow:var(--e-1)}

/* ---- layout helpers ---- */
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:2fr 1fr}
.g-11{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:1fr 1fr 1fr}
.stack{display:flex;flex-direction:column;gap:18px}
.between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mut{color:var(--muted)} .sm{font-size:12.5px} .b{font-weight:600;color:var(--strong)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--strong);margin-bottom:4px}

/* ---- chart ---- */
.chart{width:100%;display:block;overflow:visible}
.chart .grid-line{stroke:var(--hair);stroke-width:1}
.chart .axis{fill:var(--faint);font-size:10.5px;font-family:var(--ui)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* ================================================================ PHONE */
/* ---- the drawer, hidden on anything wider than a phone ---- */
.burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  flex:0 0 38px;border-radius:var(--r-sm);border:1px solid var(--hair);
  background:var(--panel);color:var(--strong);cursor:pointer}
.burger svg{width:19px;height:19px}
.burger:hover{background:var(--sunken)}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(14,39,51,.45);
  opacity:0;pointer-events:none;transition:opacity var(--base)}

@media (max-width:1100px){ .g-2,.g-11,.g-3{grid-template-columns:1fr} }
/* ---- tablet and phone: the drawer, not a column of bare icons ----
   Between 641 and 860 pixels the sidebar used to shrink to 64px and hide
   every word, leaving fourteen identical grey squares. The drawer costs
   one tap and gives the words back, so it takes over everywhere the full
   sidebar will not fit. */
@media (max-width:860px){
  .burger{display:flex}
  .side{
    position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(272px,84vw);
    height:100vh;transform:translateX(-102%);transition:transform var(--base);
    box-shadow:none;overflow-y:auto}
  .drawer-toggle:checked ~ .side{transform:translateX(0);box-shadow:var(--e-3)}
  .drawer-toggle:checked ~ .scrim{opacity:1;pointer-events:auto}
  .main{width:100%}
  .search input{width:200px}
  .side-group > h5{font-size:11.5px}
  /* a link in a row is something a thumb has to hit, at any touch size */
  .tbl tbody td > a, .tbl tbody td > b > a{display:inline-block;padding:4px 0}
}
@media (max-width:640px){
  /* ---- the phone: a drawer, not a strip of unlabelled icons ----
     The old phone layout turned the sidebar into a horizontal row of
     icons with the words hidden. On a 390px screen that is fourteen
     identical grey squares and a guess. A drawer costs one tap and
     gives back the words, the groups and the counts. No JavaScript:
     a checkbox and a label, so it works even when nothing else has
     loaded, which is exactly when somebody opens this console. */
  .content{padding:16px 14px 34px}
  .topbar{padding:10px 14px;height:auto;flex-wrap:wrap;gap:10px 12px}
  .topbar .title{order:2;flex:1;min-width:0}
  .topbar .title h1{font-size:17px}
  .topbar .title span{font-size:11.5px;display:block;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .topbar .burger{order:1}
  .topbar .avatar{order:3;margin-left:auto}
  .topbar .topmail{order:4}
  .search{order:5;margin-left:0;width:100%}
  .search input{width:100%}

  /* a table with no room becomes one card per row, with every column
     keeping the word that named it */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tbody tr{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);
    box-shadow:var(--e-1);margin:0 0 10px;padding:12px 14px}
  .tbl tbody td{border:0;padding:4px 0}
  .tbl tbody td.num,.tbl tbody td.right{text-align:left}
  .tbl tbody td:empty{display:none}
  .tbl tbody td::before{content:attr(data-l);display:block;font-size:11px;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);font-weight:600}
  .tbl tbody td:not([data-l])::before{display:none}
  /* the first cell of a card is a name with a face beside it: labelling
     it PERSON says nothing anybody did not already know */
  .tbl tbody td:first-child::before{display:none}
  .tbl .who .nm b{font-size:14px}
  .tbl .who .nm span{white-space:normal;word-break:break-word}

  /* forms stop being a row and become a column, always */
  .setform{flex-direction:column;align-items:stretch}
  .setform label{width:100%}
  .setform input,.setform select{min-width:0;width:100%}
  .setform .btn{width:100%;justify-content:center}
  .fgrid{grid-template-columns:1fr}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%;justify-content:center}
  .actions form{width:100%}
  .card-head{flex-wrap:wrap}
  .card-head .btn{margin-left:0}
  .tabrow{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .tab{white-space:nowrap}
  /* nothing may push the page sideways */
  .mono,.code,code{word-break:break-word;overflow-wrap:anywhere}
}

/* cards in a row size to their own content, they do not stretch to match */
.grid{align-items:start}

/* ========================================================== the sign in */
body.signin{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:radial-gradient(1100px 620px at 50% -10%,rgba(60,181,75,.16),transparent 62%),var(--rail)}
.signin-box{
  width:100%;max-width:390px;padding:38px 34px 32px;background:var(--panel);
  border-radius:var(--r-lg);box-shadow:var(--e-3)}
.signin-mark{display:flex;justify-content:center;margin-bottom:30px}
.signin-mark svg{width:150px;height:auto;display:block}
.signin-box label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:500;color:var(--muted)}
.signin-box input{
  width:100%;margin-bottom:16px;padding:11px 13px;font-family:var(--ui);font-size:14px;color:var(--strong);
  background:var(--panel);border:1px solid var(--solid);border-radius:var(--r-sm)}
.signin-box input:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
.signin-box .btn{width:100%;margin-top:6px;padding:12px 20px}
.signin-msg{margin-bottom:18px;display:block;padding:11px 14px;border-radius:var(--r-md);
  background:var(--alert-bg);color:var(--alert);border:1px solid rgba(200,69,47,.2);
  border-left:3px solid var(--alert);font-size:13px}

/* ---- a record header: avatar, name, address, status ---- */
.pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagehead .av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:600;color:#fff}
.pagehead .nm{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pagehead .nm b{font-family:var(--brand);font-size:19px;font-weight:600;color:var(--strong)}
.pagehead .nm span{font-size:13px;color:var(--muted)}

/* ---- tabs on a record page ---- */
ul.tabs{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
ul.tabs li{margin:0;list-style:none}
ul.tabs li a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--body);background:var(--panel);
  border:1px solid var(--hair);transition:background var(--fast),color var(--fast),border-color var(--fast)}
ul.tabs li a:hover{border-color:var(--line-strong);color:var(--strong)}
ul.tabs li a.selected{background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--e-1)}


/* ---- one-time message after something changed ---- */
.note-flash{padding:13px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;
  border:1px solid transparent}
.note-flash.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(35,122,47,.25)}
.note-flash.bad{background:var(--alert-bg);color:var(--alert);border-color:rgba(200,69,47,.25)}

.note-pw{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r-sm);background:var(--mint);
  border:1px solid rgba(60,181,75,.35)}
.note-pw b{color:var(--ok);font-size:13.5px}
.note-pw code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:17px;font-weight:600;
  letter-spacing:.5px;color:var(--strong);background:var(--panel);padding:7px 13px;
  border-radius:var(--r-xs);border:1px solid var(--solid);user-select:all}
.note-pw span{color:var(--muted);font-size:12.5px}

/* ---- a form that changes something ---- */
.setform{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.setform label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.setform input[type=password], .setform input[type=text],
.setform input[type=search],
.setform input[type=number], .setform select{
  padding:9px 13px;font-family:var(--ui);font-size:13.5px;min-width:240px;line-height:16px;
  border:1px solid var(--solid);border-radius:var(--r-sm);background:var(--panel);color:var(--strong)}
.setform input:focus, .setform select:focus{
  outline:none;border-color:var(--green);box-shadow:var(--focus)}
/* iOS draws its own rounded pill for a search box and its own grey lozenge
   for a dropdown. Both ignore the border above, which is what made the
   Email designs screen look like a different website. */
.setform input[type=search]{-webkit-appearance:none;appearance:none}
.setform input[type=search]::-webkit-search-decoration,
.setform input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* one long box and one short one on the same line, the long one taking
   whatever is left over */
.findform{align-items:flex-end}
.findform .grow{flex:1 1 320px;min-width:0}
.findform .grow input{width:100%;min-width:0}
@media (max-width:760px){
  .findform .grow{flex:1 1 100%}
}

/* ---- settings ---- */
.setrow{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.setinfo{display:flex;flex-direction:column;gap:4px;min-width:260px;flex:1}
.setinfo b{font-size:14px;color:var(--strong)}
.setrow .setform{align-items:center;flex:0 0 auto}
@media (max-width:760px){
  .setrow{flex-direction:column;gap:12px}
  .setrow .setform{width:100%}
  .setrow .setform input, .setrow .setform select{min-width:0;flex:1}
}

/* ---- creating a mailbox ---- */
.btn.off{background:var(--panel);border-color:var(--hair);color:var(--muted);cursor:not-allowed}
.newbox .card-head + .card-body{padding-top:16px}
.newbox .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--hair);background:var(--sunken)}
.newbox .actions .sub{flex:1;min-width:200px;font-size:12px;color:var(--muted);text-align:right}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld > span{font-size:12.5px;font-weight:600;color:var(--strong)}
.fld em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.5}
.fld input[type=text], .fld input[type=number], .fld select{
  padding:9px 13px;font-family:var(--ui);font-size:13.5px;width:100%;line-height:16px;
  border:1px solid var(--solid);border-radius:var(--r-sm);background:var(--panel);color:var(--strong)}
.fld input:focus, .fld select:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
.fld .addr{display:flex;align-items:center;gap:8px}
.fld .addr input{flex:1;min-width:90px}
.fld .addr b{color:var(--muted);font-weight:500}
.fld .addr select{width:auto;max-width:60%}
.roomlist{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--muted);line-height:1.5}
.roomlist b{color:var(--strong);font-weight:600;margin-right:6px}
.pick{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;margin-bottom:8px;
  border:1px solid var(--hair);border-radius:var(--r-sm);cursor:pointer}
.pick:hover{border-color:var(--solid);background:var(--sunken)}
.pick input{margin-top:2px;accent-color:var(--green)}
.pick span{display:flex;flex-direction:column;gap:3px}
.pick b{font-size:13px;color:var(--strong)}
.pick em{font-style:normal;font-size:11.5px;color:var(--muted)}
.note-pw.made{align-items:flex-start}
.note-pw.made b{font-size:14px}
.note-pw.made span{flex:1;min-width:220px;line-height:1.55}
.pwpair.off{opacity:.42}
.pwpair.off input{background:var(--sunken);cursor:not-allowed}

@media (max-width:640px){
  .newbox .setform{flex-direction:column;align-items:stretch}
  .newbox .setform label{width:100%}
  .newbox .setform input{min-width:0;width:100%}
  .newbox .actions .sub{text-align:left}
}
.btn[disabled]{background:var(--sunken);border-color:var(--hair);color:var(--muted);cursor:not-allowed;box-shadow:none}

/* ---- deleting a mailbox ---- */
.danger-card{border-color:rgba(200,69,47,.3)}
.danger-card .card-head{background:var(--alert-bg);border-bottom-color:rgba(200,69,47,.22)}
.danger-card .card-head h3{color:var(--alert)}
.warnmark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 34px;border-radius:50%;background:var(--panel);color:var(--alert);
  border:1px solid rgba(200,69,47,.3)}
.blockhead{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px}
.factlist{list-style:none;display:flex;flex-direction:column;gap:8px;
  font-size:13.5px;color:var(--body);line-height:1.55;padding-left:0}
.factlist li{padding-left:17px;position:relative}
.factlist li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--solid)}
.para{font-size:13.5px;color:var(--body);line-height:1.6}
.para + .para{margin-top:7px}
.para.muted, .muted{color:var(--muted)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;word-break:break-all}
.stayput{padding:14px 16px;border-radius:var(--r-sm);background:var(--alert-bg);
  border:1px solid rgba(200,69,47,.25)}
.stayput > b{display:block;color:var(--alert);font-size:13.5px;margin-bottom:7px}
.stayput p{font-size:13px;color:var(--body);line-height:1.6}
.stayput p + p{margin-top:7px}
.stayput .factlist{margin:7px 0}
.btn.danger-solid{background:var(--alert);border-color:var(--alert);color:#fff}
.btn.danger-solid:hover{background:#a83a27;border-color:#a83a27}
.btn.danger-solid[disabled]{background:var(--sunken);border-color:var(--hair);color:var(--muted)}
.note-del{display:flex;flex-direction:column;gap:6px;padding:15px 18px;
  border-radius:var(--r-sm);background:var(--alert-bg);border:1px solid rgba(200,69,47,.25)}
.note-del b{color:var(--alert);font-size:13.5px}
.note-del span{color:var(--body);font-size:12.5px;line-height:1.55}
.right{text-align:right}
.tbl td.right{white-space:nowrap}

/* ---- joining and leaving ---- */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.pickgrid .pick{margin-bottom:0}
.sheettbl{width:100%;border-collapse:collapse;font-size:13.5px}
.sheettbl th{text-align:left;padding:9px 14px 9px 0;color:var(--muted);font-weight:500;
  width:210px;vertical-align:top;border-bottom:1px solid var(--hair)}
.sheettbl td{padding:9px 0;color:var(--strong);border-bottom:1px solid var(--hair)}
.sheettbl tr:last-child th,.sheettbl tr:last-child td{border-bottom:0}
.sheettbl .b{font-weight:600;font-size:15px}
@media print{
  .rail,.topbar,.noprint,.note-pw span{display:none !important}
  .shell,.content{margin:0 !important;padding:0 !important}
  .sheet{border:0 !important;box-shadow:none !important}
  body{background:#fff}
}

/* ---- the audit log ---- */
.tbl.audit td{vertical-align:top}
.tbl.audit .sm{font-size:12px}
/* The confirmation expands the row in place. An absolutely positioned
   panel gets clipped by the card, which is exactly what the screenshots
   showed, and it would be worse on a phone. */
.tbl .undorow td{background:var(--sunken);border-top:0}
.undobox{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.undobox > div{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.undobox b{font-size:13.5px;color:var(--strong);line-height:1.5}
.filters select,.filters input[type=text]{padding:8px 12px;font-family:var(--ui);
  font-size:13px;border:1px solid var(--solid);border-radius:var(--r-sm);
  background:var(--panel);color:var(--strong)}
.filters input[type=text]{min-width:150px}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
@media (max-width:640px){ .undobox{right:auto;left:0;width:min(270px,80vw)} }
.askbox .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- admins, settings, profile ---- */
.setrow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.setinfo{flex:1;min-width:260px;display:flex;flex-direction:column;gap:3px}
.setinfo b{font-size:13.5px;color:var(--strong)}
.setrow .setform select,.setrow .setform input{min-width:200px}
.setrow + .setrow{border-top:1px solid var(--hair)}
.badge.info{background:var(--info-bg,#E7F3F6);color:var(--info,#216E85)}

/* ---- alerts ---- */
.tabrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.tab{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--panel);border:1px solid var(--hair);
  text-decoration:none;transition:.12s}
.tab:hover{color:var(--strong);border-color:var(--solid)}
.tab.on{background:var(--green);border-color:var(--green);color:#fff}
.alerttbl .nm span{white-space:normal;line-height:1.5;max-width:64ch}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  margin-top:6px;background:var(--solid)}
.dot.bad{background:var(--alert)}
.dot.warn{background:#B07908}
.dot.info{background:var(--green)}
.muted-row{opacity:.62}
.offrow{opacity:.66}
.warnmark.quiet{color:var(--green);border-color:rgba(60,181,75,.32)}
.mutebox{position:relative}
.mutebox > summary{list-style:none;cursor:pointer;display:inline-flex}
.mutebox > summary::-webkit-details-marker{display:none}
.mutebox[open] > summary{border-color:var(--green);color:var(--green)}
.mutebox .setform{margin-top:10px;padding:12px;border:1px solid var(--hair);
  border-radius:var(--r-sm);background:var(--sunken);text-align:left;
  flex-direction:column;align-items:stretch;min-width:250px}
.mutebox .setform input, .mutebox .setform select{min-width:0;width:100%}
@media (max-width:760px){ .mutebox .setform{min-width:0} }

/* ---- who you are, and how to stop being signed in ----
   The console had no way out of it at all: you could sign in and never
   sign out, on a shared or borrowed screen as much as your own. */
.mebox{position:relative}
.mebox > summary{list-style:none;cursor:pointer}
.mebox > summary::-webkit-details-marker{display:none}
.mebox[open] > summary{box-shadow:0 0 0 3px rgba(60,181,75,.3)}
.memenu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:212px;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--e-3);overflow:hidden;display:flex;flex-direction:column}
.mewho{padding:12px 15px;border-bottom:1px solid var(--hair);background:var(--sunken);
  display:flex;flex-direction:column;line-height:1.3}
.mewho b{font-size:13.5px;color:var(--strong)}
.mewho span{font-size:11.5px;color:var(--muted);word-break:break-all}
.memenu a{padding:11px 15px;font-size:13.5px;color:var(--body);text-decoration:none;
  border-bottom:1px solid var(--hair)}
.memenu a:last-child{border-bottom:0}
.memenu a:hover{background:var(--hover);color:var(--strong)}
.memenu a.out{color:var(--alert);font-weight:600}
.memenu a.out:hover{background:var(--alert-bg)}

/* =====================================================================
   The arrow on a dropdown.
   This has to be the LAST word on selects in this file. Both .setform and
   .fld set `background:` as a shorthand, and a shorthand wipes out any
   background-image set before it. Written higher up, the arrow silently
   vanished from every .fld dropdown while looking perfectly correct in
   the stylesheet. If a new field style is added, put its select here too.
   ===================================================================== */
.setform select, .fld select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px 7px}
.setform select::-ms-expand, .fld select::-ms-expand{display:none}