/* ============================================================
   login.css — sign-in page only (index.html)
   ============================================================ */
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(420px,560px) 1fr}
.login-left{background:var(--card);display:flex;flex-direction:column;justify-content:center;padding:56px 72px;border-right:1px solid var(--line)}
.login-left h2{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.2;margin-bottom:10px}
.login-left .lede{color:var(--ink-soft);margin-bottom:36px;max-width:40ch}
.login-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-faint);display:flex;gap:8px;align-items:flex-start}

.login-right{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--pine-deep) 0%,var(--pine) 55%,#1C6B5C 100%);display:flex;align-items:center;justify-content:center;padding:60px}
.ndc-hero{color:#fff;max-width:520px;position:relative;z-index:2}
.ndc-hero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#A9CDC2;margin-bottom:18px}
.ndc-hero h3{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.22;margin-bottom:22px}
.ndc-hero h3 em{font-style:normal;color:#F2C879}
.ndc-hero p{color:#CFE2DB;font-size:15.5px;max-width:44ch}

.label-chip{margin-top:38px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:18px 20px;backdrop-filter:blur(4px)}
.label-chip .lc-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#A9CDC2;text-transform:uppercase;margin-bottom:10px}
.label-chip .lc-ndc{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:.06em}
.label-chip .lc-ndc b{color:#F2C879;font-weight:600}

.barcode{display:flex;gap:2.5px;align-items:flex-end;height:26px;margin-top:12px;opacity:.85}
.barcode i{display:block;background:#fff;width:2px;height:100%}
.barcode i:nth-child(3n){width:4px}
.barcode i:nth-child(5n){height:70%}
.barcode i:nth-child(7n){width:1.5px;height:85%}
.grain{position:absolute;inset:0;opacity:.35;background:radial-gradient(ellipse at 20% 110%, rgba(242,200,121,.22), transparent 55%)}

@media (max-width:1000px){
  .login-page{grid-template-columns:1fr}
  .login-right{display:none}
  .login-left{padding:44px 28px}
}

/* ---- phone sign-in ----
   Reads as the first screen of an app rather than a shrunken web form: the
   intro block becomes a pine header that runs under the status bar, the form
   sits on paper below it, and the security note becomes its own small card. */
@media (max-width:720px){
  .login-page{display:block;min-height:100vh;background:var(--paper)}
  @supports (min-height:100dvh){ .login-page{min-height:100dvh} }

  .login-left{
    display:block;border-right:none;background:transparent;
    padding:0 20px calc(30px + env(safe-area-inset-bottom,0px));
  }

  .login-intro{
    position:relative;overflow:hidden;
    margin:0 -20px 24px;
    /* 20px matches .login-left's padding, so the header text lines up exactly
       with the field card and the button below it rather than 2px inside them */
    padding:calc(34px + env(safe-area-inset-top,0px)) 20px 30px;
    background:linear-gradient(155deg,var(--pine-deep) 0%,var(--pine) 62%,#1C6B5C 100%);
    color:#fff;border-radius:0 0 26px 26px;
  }
  /* same warm glow the desktop hero panel carries */
  .login-intro::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 12% 108%, rgba(242,200,121,.26), transparent 58%);
  }
  .login-intro>*{position:relative;z-index:1}

  /* The pharmacy is the hero of this screen, so the lockup leads: mark, then the
     name at display size, then the portal qualifier in amber beneath it. The mark
     stacks above rather than sitting beside, because "Rosemont Specialty Pharmacy"
     at this size has no room left for it on a 390px screen. */
  .login-intro .brandmark{
    display:block;margin-bottom:20px;padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  .login-intro .brandmark .mark{
    width:44px;height:44px;border-radius:14px;margin-bottom:15px;
    background:rgba(255,255,255,.13);color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .login-intro .brandmark h1{
    font-size:25px;line-height:1.14;letter-spacing:-.035em;color:#fff;
  }
  .login-intro .brandmark span{
    margin-top:8px;color:#F2C879;font-size:10px;letter-spacing:.22em;
  }
  /* the task, now secondary to the brand */
  .login-intro h2{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:7px}
  .login-intro .lede{color:#CFE2DB;font-size:13.5px;line-height:1.5;margin-bottom:0;max-width:34ch}

  /* ---- one grouped card instead of three stacked boxes ---- */
  .login-fields{
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:0 16px;box-shadow:0 1px 2px rgba(22,33,29,.04), 0 10px 26px -20px rgba(22,33,29,.22);
  }
  .login-fields .field{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
  .login-fields .field:last-child{border-bottom:none}
  .login-fields label{
    font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:2px;transition:color .15s;
  }
  /* Borderless rows — the card and its hairlines carry the structure. 16.5px also
     keeps iOS from zooming the page when a field takes focus. min-height keeps the
     control itself a comfortable target: without a border to define it, it would
     otherwise collapse to the 27px line box and leave most of the row dead. */
  .login-fields input,.login-fields select{
    border:none;background:none;padding:0;border-radius:0;
    font-size:16.5px;font-weight:500;min-height:40px;
  }
  .login-fields input:focus,.login-fields select:focus{outline:none}
  /* with no border to tint, focus reads on the label instead */
  .login-fields .field:focus-within label{color:var(--pine)}
  .login-fields select{
    appearance:none;-webkit-appearance:none;padding-right:26px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5A55' stroke-width='2.2'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right center;background-size:15px;
  }

  .btn-primary{
    min-height:52px;border-radius:14px;margin-top:18px;
    font-size:15.5px;letter-spacing:.005em;
    box-shadow:0 10px 22px -14px rgba(12,63,54,.7);
  }

  .login-foot{
    margin-top:18px;padding:13px 15px;border-top:none;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    font-size:11.5px;line-height:1.55;color:var(--ink-faint);
  }
  .login-foot svg rect,.login-foot svg path{stroke:var(--pine-mid)}
}