/* =============================================================
   Prescription System — UI (Apple HIG aligned, iPhone/iPad first)
   Restrained, clinical, upscale. One accent (deep teal), the rest
   near-monochrome. Type: San Francisco via the system stack.
   ============================================================= */

:root{
  /* palette — quiet, clinical */
  --bg:#F2F2F5;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --ink:#1C1C1E;          /* primary label   */
  --ink-2:#6E6E73;        /* secondary label */
  --ink-3:#A0A0A6;        /* tertiary / hint */
  --line:#E7E7EB;         /* hairline        */
  --line-strong:#D3D3D8;

  --accent:#146B66;       /* deep teal       */
  --accent-press:#0E514D;
  --accent-tint:#E4EFEE;
  --danger:#B23A2E;
  --danger-tint:#F8E9E7;
  --success:#1E8E5A;

  --radius:16px;
  --radius-sm:11px;
  --tap:44px;             /* min touch target (Fitts / HIG) */
  --shadow:0 1px 2px rgba(17,20,24,.05), 0 10px 30px rgba(17,20,24,.05);
  --shadow-soft:0 1px 2px rgba(17,20,24,.04);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
         system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --logo-h:22px;          /* brand mark — square logo, so this is both axes */

  --maxw:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;                 /* 17px base = iOS Body; also stops focus zoom */
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- Top bar (frosted, all sizes) ---------- */
.appbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:.55rem max(1rem,env(safe-area-inset-left)) .55rem max(1rem,env(safe-area-inset-right));
  min-height:52px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:640;letter-spacing:-.01em;color:var(--ink);text-decoration:none}

/* Logo is a 190x190 square, so height and width are locked together.
   Selector deliberately targets the element, not just .brandlogo — it
   applies whatever class the template happens to render. */
.brand img,
.brandlogo{
  height:var(--logo-h);
  width:var(--logo-h);
  max-height:var(--logo-h);
  max-width:var(--logo-h);
  object-fit:contain;
  display:block;
  flex:none;
  border-radius:5px;      /* softens the square edge against the bar */
}

.brand .rx{
  display:grid;place-items:center;
  width:1.6em;height:1.6em;flex:none;
  border-radius:8px;
  background:var(--accent);color:#fff;
  font-weight:700;font-size:.88em;font-style:italic;
}
.appbar .who{display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:var(--ink-2)}
.appbar .who a{color:var(--accent);text-decoration:none;font-weight:560}

/* inline nav — shown on iPad / desktop, hidden on iPhone */
.topnav{display:flex;gap:.35rem;margin-inline:auto}
.topnav a{
  padding:.4rem .7rem;border-radius:9px;text-decoration:none;
  color:var(--ink-2);font-size:.95rem;font-weight:520;
}
.topnav a.active{color:var(--accent);background:var(--accent-tint);font-weight:600}

/* ---------- Bottom tab bar — iPhone ---------- */
.tabbar{display:none}
@media (max-width:768px){
  .topnav{display:none}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:.5px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:.4rem 0 .3rem;text-decoration:none;color:var(--ink-3);
    font-size:.6rem;font-weight:540;min-height:49px;justify-content:center;
  }
  .tabbar a.active{color:var(--accent)}
  .tabbar svg{width:22px;height:22px}
  main{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ---------- Layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:1.25rem max(1rem,env(safe-area-inset-left)) 2rem max(1rem,env(safe-area-inset-right))}
h1{font-size:1.72rem;font-weight:680;letter-spacing:-.02em;margin:.2rem 0 1rem}
h2{font-size:1.25rem;font-weight:640;letter-spacing:-.01em;margin:1.4rem 0 .6rem}
h3{font-size:1.05rem;font-weight:620;margin:1.1rem 0 .5rem}
p{margin:.5rem 0}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:1.15rem 1.25rem;
  margin-bottom:1rem;
}

/* ---------- Forms ---------- */
label{display:block;font-weight:560;font-size:.82rem;color:var(--ink-2);margin:.7rem 0 .3rem;letter-spacing:.005em}
input,select,textarea{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:.62rem .7rem;min-height:var(--tap);
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none;-webkit-appearance:none;
}
textarea{min-height:80px;resize:vertical;line-height:1.4}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2rem}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-tint);
}
input[type=file]{padding:.5rem;min-height:auto;background:var(--surface-2)}
input[type=checkbox],input[type=radio]{
  appearance:auto;-webkit-appearance:auto;
  width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:0;background:none;
  accent-color:var(--accent);vertical-align:-3px;margin:0 .4rem 0 0;flex:none;cursor:pointer;
}

.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:600px){.row{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:var(--tap);padding:0 1.15rem;
  background:var(--accent);color:#fff;border:1px solid transparent;
  border-radius:var(--radius-sm);font:inherit;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn:hover{background:var(--accent-press)}
.btn:active{transform:scale(.975)}
.btn.secondary{background:var(--surface);color:var(--accent);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--accent-tint)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#8f2d24}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3.5px var(--accent-tint)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:620;text-align:left;padding:.55rem .5rem;border-bottom:.5px solid var(--line)}
td{padding:.7rem .5rem;border-bottom:.5px solid var(--line);font-size:.95rem;vertical-align:middle}
tr:last-child td{border-bottom:0}

/* ---------- Flash / notices ---------- */
.flash{padding:.7rem .9rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;border:.5px solid transparent}
.flash.ok{background:var(--accent-tint);color:#0d4f4a;border-color:#cfe4e2}
.flash.err{background:var(--danger-tint);color:#8f2d24;border-color:#f0d4d0}

/* ---------- Bits ---------- */
.muted{color:var(--ink-3);font-size:.82rem}
.tag{display:inline-block;font-size:.7rem;font-weight:600;padding:.05rem .4rem;border-radius:6px;border:1px solid var(--line-strong);color:var(--ink-2)}
.tag.warn{color:var(--danger);border-color:#f0d4d0;background:var(--danger-tint)}

a{color:var(--accent)}

/* ---------- Motion / a11y ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}