/* The extension desk. Same paper, same green; denser than a page because it is
   meant to be read standing up, in a field, one alert at a time. */

.ex{max-width:720px;margin:0 auto;padding:0 0 40px}

/* ---------- the three parts ---------- */
.ex-tabs{
  display:flex;gap:6px;margin:0 0 14px;padding:4px;background:#F1ECDE;
  border:1px solid var(--line);border-radius:999px
}
.ex-tab{
  flex:1;border:0;background:transparent;border-radius:999px;cursor:pointer;padding:10px 8px;
  font:700 .78rem/1 var(--sans,system-ui);color:#4C5A4F
}
.ex-tab[aria-selected="true"]{background:var(--green);color:#F6F1E2}

.ex-sec[hidden]{display:none}
.ex-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.ex-h{font-family:var(--serif);font-size:1.2rem;line-height:1.2;margin:0;color:var(--green)}
.ex-sub{font-size:.78rem;color:var(--muted);margin:0;text-transform:capitalize}
.ex-h3{
  font:800 .68rem/1 var(--sans,system-ui);letter-spacing:.1em;text-transform:uppercase;
  color:#8A958C;margin:18px 0 6px
}
.ex-fine{font-size:.68rem;line-height:1.5;color:#8A958C;margin:12px 0 0}
.ex-empty{
  border:1px dashed #D6CFBC;border-radius:12px;padding:18px;text-align:center;
  color:#7C887E;font-size:.83rem;line-height:1.5;margin:10px 0
}

/* ---------- an alert ---------- */
.ex-alert{
  display:grid;grid-template-columns:64px 1fr 26px;gap:10px;align-items:start;
  padding:11px 12px;border-radius:12px;margin:0 0 7px;background:#fff;
  border:1px solid var(--line);border-left-width:4px
}
.ex-alert.is-late{border-left-color:#A33B2A;background:#FDF4F1}
.ex-alert.is-due{border-left-color:#C8922A;background:#FEFAF0}
.ex-alert.is-soon{border-left-color:#4E8A69;background:#fff}
.ex-alert__when b{display:block;font:800 .78rem/1.2 var(--sans,system-ui);color:var(--ink)}
.ex-alert__when span{display:block;font-size:.66rem;color:var(--muted);margin-top:2px}
.ex-alert__what b{display:block;font:700 .87rem/1.3 var(--sans,system-ui);color:var(--ink)}
.ex-alert__what span{display:block;font-size:.76rem;line-height:1.45;color:#54615A;margin-top:2px}
.ex-alert__ev{
  width:26px;height:26px;border-radius:50%;border:1px solid #D8D2C3;background:#FDFBF5;
  color:#7C887E;font:800 .7rem/1 var(--serif);cursor:pointer
}

/* ---------- the sentence of the day ---------- */
.ex-message{
  margin:16px 0 0;padding:15px 16px;border-radius:16px;
  background:radial-gradient(120% 100% at 90% 0%, rgba(228,197,91,.18), rgba(228,197,91,0) 60%), linear-gradient(160deg,#124A37,#0B3527);
  color:#F3EFE2
}
.ex-message__k{font:800 .62rem/1 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#E4C55B;margin-bottom:8px}
.ex-message p{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:#FBF8F1}
.ex-message__b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.ex-btn{
  border:0;border-radius:10px;cursor:pointer;padding:10px 14px;
  background:var(--green);color:#FBF8F1;font:800 .78rem/1 var(--sans,system-ui)
}
.ex-btn--ghost{background:rgba(243,239,226,.12);color:#EAE4D2;border:1px solid rgba(243,239,226,.22)}

/* ---------- the prescription ---------- */
.ex-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0;box-shadow:var(--shadow)}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.ex-grid{grid-template-columns:1fr 1fr}}
.ex-f{display:block}
.ex-f span{display:block;font:700 .7rem/1.2 var(--sans,system-ui);color:#52604F;margin:0 0 5px}
.ex-i{
  width:100%;box-sizing:border-box;border:1px solid #D8D2C3;background:#FDFBF5;border-radius:10px;
  padding:9px 10px;font:700 .88rem/1.2 var(--sans,system-ui);color:var(--ink)
}
.ex-i:focus{outline:2px solid #BFD8C6;outline-offset:1px;border-color:#9CBCA6}

.ex-did{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.ex-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #DCD5C4;border-radius:999px;background:#FBF8EF;cursor:pointer}
.ex-chip input{accent-color:#1F6B45;margin:0}
.ex-chip span{font:700 .74rem/1 var(--sans,system-ui);color:#4C5A4F}
.ex-chip:has(input:checked){background:#E7F1E9;border-color:#A9C9B3}
.ex-chip:has(input:checked) span{color:#1F5A3E}

.ex-out{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:0 0 12px}
@media(min-width:560px){.ex-out{grid-template-columns:repeat(4,1fr)}}
.ex-out div{background:#F6F2E6;border:1px solid #E8E1CE;border-radius:11px;padding:10px}
.ex-out b{display:block;font:800 .95rem/1.15 var(--sans,system-ui);color:var(--green)}
.ex-out span{display:block;margin-top:3px;font-size:.66rem;line-height:1.35;color:var(--muted)}
.ex-out .is-warn b{color:#8C5A12}
.ex-out .is-good b{color:#1F6B45}

.ex-rx{display:grid;grid-template-columns:28px 1fr;gap:11px;padding:14px 0;border-top:1px solid var(--line)}
.ex-rx:first-of-type{border-top:0}
.ex-rx__n{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#E4C55B;color:#2A2100;font:800 .8rem/1 var(--sans,system-ui)}
.ex-rx__b b{display:block;font:800 .92rem/1.25 var(--sans,system-ui);color:var(--ink)}
.ex-qty{
  display:inline-block;margin:6px 0 4px;padding:4px 8px;border-radius:6px;
  background:#EDF2EC;color:#24503A;font:700 .74rem/1.3 var(--sans,system-ui)
}
.ex-rx__b p{margin:4px 0 0;font-size:.82rem;line-height:1.5;color:#3E4C43}
.ex-why{color:#5E6B60!important;font-style:italic}
.ex-link{border:0;background:transparent;padding:6px 0 0;color:#3A6B4E;font:800 .74rem/1 var(--sans,system-ui);cursor:pointer}

/* ---------- the evidence ---------- */
.ex-ev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 10px;transition:box-shadow .2s, border-color .2s}
.ex-ev.is-lit{border-color:#C8922A;box-shadow:0 0 0 3px rgba(228,197,91,.25)}
.ex-ev b{display:block;font:800 .9rem/1.3 var(--sans,system-ui);color:var(--ink)}
.ex-ev__claim{margin:6px 0 0;font-size:.84rem;line-height:1.5;color:#2E3B32}
.ex-ev__src{margin:6px 0 0;font-size:.74rem;line-height:1.45;color:#7C887E}
.ex-ev__eff{margin:6px 0 0;font-size:.82rem;line-height:1.5;color:#24503A;font-weight:600}
.ex-ev__cav{margin:6px 0 0;font-size:.75rem;line-height:1.45;color:#8C5A12}

/* ---------- the door on the front page ---------- */
.ex-entry{
  display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  margin:12px 0 0;padding:12px 14px;border:1px solid #C8922A;border-radius:16px;
  background:linear-gradient(150deg,#FBF3DC,#F7EBCB);color:#3A2E0C;cursor:pointer;text-align:left
}
.ex-entry__b{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:#E4C55B;color:#3A2E0C;font:800 .9rem/1 var(--serif)}
.ex-entry__t{flex:1 1 auto;min-width:0}
.ex-entry__t b{display:block;font:800 .86rem/1.25 var(--sans,system-ui);color:#3A2E0C}
.ex-entry__t span{display:block;margin-top:2px;font-size:.73rem;line-height:1.35;color:#6B5A22}
.ex-entry__g{flex:none;font:800 .74rem/1 var(--sans,system-ui);color:#8C6A12}

/* ---------- print ---------- */
.ex-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.78rem}
.ex-table th{text-align:left;font:700 .66rem/1.2 var(--sans,system-ui);letter-spacing:.04em;text-transform:uppercase;color:#7C887E;padding:6px 5px;border-bottom:1px solid var(--line)}
.ex-table td{padding:8px 5px;border-bottom:1px solid #EFEADA;vertical-align:top;color:#2C3A31}
.ex-table td:first-child{width:22px;color:#8A958C}
@media print{.ex-tabs,.ex-btn{display:none!important}}

/* when the door is carrying a late item it says so before it is tapped */
.ex-entry.is-late{border-color:#A33B2A;background:linear-gradient(150deg,#FBEDE8,#F8E2DA)}
.ex-entry.is-late .ex-entry__b{background:#A33B2A;color:#FFF6F2}
.ex-entry.is-late .ex-entry__g{color:#8C3222}

/* a calendar that is still a proposal says so, quietly */
.ex-banner{
  margin:0 0 10px;padding:10px 12px;border-radius:11px;background:#F6F2E6;
  border:1px dashed #DCD3BE;color:#6B5A22;font-size:.76rem;line-height:1.45
}