/* TriggerMark — Landing, sign-up / sign-in, roster, invite codes and the viewing bar.
   Split out of index.html. */

  /* ---------- Landing ---------- */
  .landing{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:calc(32px + var(--safe-t)) 28px calc(40px + var(--safe-b));
    min-height:100vh;
    min-height:100dvh;
  }
  .landing-mark{
    width:74px;height:74px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #e26060, var(--mark) 55%, var(--mark-deep) 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 40px var(--mark-glow);
    margin-bottom:28px;
    position:relative;
    flex:none;
  }
  .landing-mark::after{
    content:"";
    position:absolute;inset:-14px;
    border-radius:50%;
    border:1px solid rgba(210,75,75,.35);
    animation:ring-breathe 3.6s ease-in-out infinite;
  }
  @keyframes ring-breathe{
    0%,100%{transform:scale(.94);opacity:.55;}
    50%{transform:scale(1.08);opacity:0;}
  }
  .landing h1{
    font-size:2.35rem;
    font-weight:700;
    letter-spacing:.01em;
    text-wrap:balance;
    margin-bottom:14px;
  }
  .landing p.lede{
    color:var(--text-dim);
    font-size:1.05rem;
    line-height:1.75;
    max-width:38ch;
    text-wrap:balance;
    margin-bottom:36px;
  }
  .btn-enter{
    appearance:none;
    border:none;
    cursor:pointer;
    background:linear-gradient(180deg,#6ea3b6,var(--calm));
    color:#0d1418;
    font-size:1.05rem;
    font-weight:700;
    padding:16px 44px;
    border-radius:999px;
    box-shadow:0 10px 28px rgba(95,147,168,.28);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-enter:active{transform:scale(.96);box-shadow:0 6px 18px rgba(95,147,168,.24);}
  .landing .disclaimer{
    color:var(--text-faint);
    font-size:.8rem;
    margin-top:30px;
    max-width:34ch;
    line-height:1.6;
  }

  .install-hint{color:var(--text-faint);font-size:.82rem;line-height:1.5;margin:16px 0 10px;}
  #install-offer{border-top:1px solid var(--border-soft);margin-top:16px;}
  .ios-steps{list-style:none;margin:14px 0 0;padding:0;}
  .ios-steps li{
    display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;
    color:var(--text-dim);font-size:.88rem;line-height:1.5;
  }
  .ios-steps strong{color:var(--text);font-weight:600;}
  .ios-num{
    flex:none;width:22px;height:22px;border-radius:50%;
    background:var(--calm-soft);color:var(--calm);
    font-size:.75rem;font-weight:700;display:flex;align-items:center;
    justify-content:center;margin-top:1px;
  }
  /* The iOS share glyph — a box with an arrow leaving the top. Drawn rather
     than named, because the label under it differs by iOS version. */
  .ios-share{
    display:inline-block;width:13px;height:15px;margin:0 5px;vertical-align:-3px;
    border:1.6px solid var(--calm);border-top:none;border-radius:0 0 3px 3px;
    position:relative;
  }
  .ios-share::before{
    content:"";position:absolute;left:50%;top:-8px;width:1.6px;height:9px;
    background:var(--calm);transform:translateX(-50%);
  }
  .ios-share::after{
    content:"";position:absolute;left:50%;top:-8px;width:5px;height:5px;
    border-left:1.6px solid var(--calm);border-top:1.6px solid var(--calm);
    transform:translateX(-50%) rotate(45deg);
  }
  .viewing-bar.self .viewing-ro{display:none;}
  #btn-my-app{margin-top:10px;}
  .pending-count{color:var(--amber);margin-top:-10px;}
  .pending-count[hidden]{display:none;}

  /* ---------------- Auth ---------------- */
  .auth{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:calc(32px + var(--safe-t)) 24px calc(40px + var(--safe-b));
    min-height:100vh;min-height:100dvh;
  }
  .auth .landing-mark{margin-left:auto;margin-right:auto;}
  .auth-card{
    width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-l);padding:26px 22px;box-shadow:var(--shadow);text-align:right;
  }
  .auth-card h2{font-size:1.25rem;margin:0 0 6px;}
  .auth-card .auth-sub{color:var(--text-dim);font-size:.9rem;margin:0 0 20px;line-height:1.5;}
  .auth-card .field{margin-bottom:14px;}
  .btn-auth{
    appearance:none;border:none;cursor:pointer;width:100%;
    background:linear-gradient(180deg,#6ea3b6,var(--calm));color:#0d1418;
    font-size:1rem;font-weight:700;padding:14px 20px;border-radius:999px;
    box-shadow:0 8px 22px rgba(95,147,168,.24);transition:transform .15s ease,opacity .15s ease;
  }
  .btn-auth:disabled{opacity:.55;cursor:default;}
  .btn-role{
    appearance:none;cursor:pointer;width:100%;max-width:380px;
    background:var(--card);border:1px solid var(--border);color:var(--text);
    border-radius:var(--radius-m);padding:18px 20px;margin-bottom:12px;text-align:right;
    transition:border-color .15s ease,background .15s ease;
  }
  .btn-role:hover{border-color:var(--calm);background:var(--card-2);}
  .btn-role strong{display:block;font-size:1.05rem;margin-bottom:4px;}
  .btn-role span{display:block;color:var(--text-dim);font-size:.85rem;line-height:1.45;}
  .auth-link{
    appearance:none;background:none;border:none;cursor:pointer;
    color:var(--calm);font-size:.88rem;font-family:inherit;padding:6px;text-decoration:underline;
  }
  .auth-alt{margin-top:16px;text-align:center;color:var(--text-dim);font-size:.88rem;}
  .auth-msg{
    margin:0 0 14px;padding:11px 13px;border-radius:var(--radius-s);
    font-size:.87rem;line-height:1.5;text-align:right;
  }
  .auth-msg[hidden]{display:none;}
  .auth-msg.err{background:rgba(210,75,75,.13);border:1px solid rgba(210,75,75,.4);color:#f0b4b4;}
  .auth-msg.ok{background:var(--ok-soft);border:1px solid rgba(111,162,135,.4);color:#a8d0bd;}
  .auth-foot{margin-top:22px;color:var(--text-faint);font-size:.76rem;line-height:1.5;max-width:380px;}
  .pending-view{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:40px 28px;
  }
  .pending-view h2{font-size:1.2rem;margin:0 0 10px;}
  .pending-view p{color:var(--text-dim);font-size:.92rem;line-height:1.6;max-width:340px;margin:0 0 8px;}
  .topbar-user{
    display:flex;align-items:center;gap:10px;color:var(--text-faint);
    font-size:.76rem;margin-top:4px;
  }
  .btn-signout{
    appearance:none;background:none;border:none;cursor:pointer;color:var(--calm);
    font-size:.76rem;font-family:inherit;padding:2px 0;text-decoration:underline;
  }

  /* ---------------- Phase B: roster, invite codes, care link ---------------- */
  .roster{width:100%;max-width:460px;text-align:right;}
  .roster-head{margin-bottom:22px;}
  .roster-head h2{font-size:1.25rem;margin:2px 0 0;}
  .roster-list{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
  .patient-card{
    appearance:none;cursor:pointer;width:100%;text-align:right;
    background:var(--card);border:1px solid var(--border);color:var(--text);
    border-radius:var(--radius-m);padding:15px 16px;
    transition:border-color .15s ease,background .15s ease;
  }
  .patient-card:hover{border-color:var(--calm);background:var(--card-2);}
  .patient-card strong{display:block;font-size:1rem;margin-bottom:3px;}
  .patient-card .pc-meta{display:block;color:var(--text-dim);font-size:.8rem;}
  .patient-card .pc-role{
    display:inline-block;margin-inline-start:8px;padding:1px 7px;border-radius:999px;
    font-size:.68rem;background:var(--calm-soft);color:var(--calm);vertical-align:middle;
  }
  .code-card{
    margin-top:14px;background:var(--bg-soft);border:1px solid var(--border);
    border-radius:var(--radius-m);padding:16px;text-align:center;
  }
  .code-card[hidden]{display:none;}
  .code-label{margin:0 0 8px;color:var(--text-dim);font-size:.82rem;}
  .code-value{
    margin:0 0 10px;font-size:1.7rem;font-weight:700;letter-spacing:.22em;
    color:var(--calm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    direction:ltr;unicode-bidi:isolate;
  }
  .code-expiry{margin:0 0 8px;font-size:.84rem;color:var(--amber);}
  .code-note{margin:0;font-size:.76rem;color:var(--text-faint);line-height:1.5;}
  .care-card{
    margin-top:26px;width:100%;max-width:360px;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius-m);
    padding:18px 16px;text-align:right;
  }
  .care-card h3{margin:0 0 10px;font-size:.95rem;}
  .care-name{margin:0 0 2px;font-size:1.05rem;font-weight:600;}
  .care-since{margin:0 0 14px;color:var(--text-dim);font-size:.8rem;}
  .care-hint{margin:0 0 14px;color:var(--text-dim);font-size:.85rem;line-height:1.5;}
  .btn-quiet{
    appearance:none;cursor:pointer;background:none;border:1px solid var(--border);
    color:var(--text-dim);font-family:inherit;font-size:.84rem;
    padding:9px 16px;border-radius:999px;transition:border-color .15s ease,color .15s ease;
  }
  .btn-quiet:hover{border-color:var(--mark);color:var(--mark);}
  /* The pairing button stands alone where the watch card would be, and the
     cancel under the code field sits a little below the main button. */
  .watch-open{display:block;margin:14px auto 0;}
  .watch-open[hidden]{display:none;}
  .watch-cancel{display:block;margin:10px auto 0;}
  .viewing-bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:calc(8px + var(--safe-t)) 16px 8px;
    background:var(--bg-soft);border-bottom:1px solid var(--border);
  }
  .viewing-bar[hidden]{display:none;}
  .btn-back{
    appearance:none;background:none;border:none;cursor:pointer;
    color:var(--calm);font-family:inherit;font-size:.86rem;padding:2px 0;
  }
  .viewing-who{font-size:.86rem;font-weight:600;}
  .viewing-ro{
    margin-inline-start:auto;font-size:.7rem;color:var(--amber);
    background:var(--amber-soft);border-radius:999px;padding:2px 9px;
  }
  /* the therapist is a visitor here: patient-only tabs are not theirs to use */
  body.viewing-other .nav-btn[data-screen="home"],
  body.viewing-other .nav-btn[data-screen="journal"]{display:none;}
  .confirm-backdrop{
    position:fixed;inset:0;background:rgba(6,9,13,.72);z-index:80;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .confirm-backdrop[hidden]{display:none;}
  .confirm-box{
    width:100%;max-width:340px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-l);padding:22px 20px;text-align:right;box-shadow:var(--shadow);
  }
  .confirm-box h3{margin:0 0 10px;font-size:1.05rem;}
  .confirm-box p{margin:0 0 8px;color:var(--text-dim);font-size:.88rem;line-height:1.6;}
  .confirm-box .warn{color:#e5a3a3;}
  .confirm-actions{display:flex;gap:10px;margin-top:18px;}
  .confirm-actions button{
    flex:1;appearance:none;cursor:pointer;font-family:inherit;font-size:.9rem;
    font-weight:600;padding:12px;border-radius:999px;border:1px solid var(--border);
  }
  .btn-confirm-no{background:none;color:var(--text-dim);}
  .btn-confirm-yes{background:var(--mark);border-color:var(--mark);color:#fff;}