/* ============================================================
     CONDITION HELP  —  link + bottom sheet
     Every selector here is prefixed .cond-help- / .cond-sheet-, so this
     file cannot reach the result cards or the condition selector.
     ============================================================ */

  /* ---------- bottom sheet ---------- */

  .cond-sheet-root{
    position:fixed;inset:0;z-index:1200;
    visibility:hidden;pointer-events:none;
  }
  .cond-sheet-root.is-open{visibility:visible;pointer-events:auto;}

  /* cursor:pointer is not decoration here — iOS Safari does not reliably
     dispatch click on a plain non-interactive element without it, which
     is what made backdrop taps miss on the phone. */
  .cond-sheet-backdrop{
    position:absolute;inset:0;background:rgba(16,18,16,.42);
    opacity:0;transition:opacity 260ms ease;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .cond-sheet-root.is-open .cond-sheet-backdrop{opacity:1;}

  .cond-sheet{
    position:absolute;left:0;right:0;bottom:0;
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;
    border-radius:16px 16px 0 0;
    padding:8px 22px calc(22px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 40px rgba(16,18,16,.22);
    transform:translateY(100%);
    /* Apple-ish: quick to leave, decelerating into place. */
    transition:transform 320ms cubic-bezier(.32,.72,0,1);
    will-change:transform;
  }
  .cond-sheet-root.is-open .cond-sheet{transform:translateY(0);}

  @media (prefers-reduced-motion:reduce){
    .cond-sheet, .cond-sheet-backdrop{transition:none;}
  }

  .cond-sheet-grabber{
    width:36px;height:5px;border-radius:3px;background:#DDE2D8;
    margin:0 auto 14px;
  }

  .cond-sheet-x{
    position:absolute;top:14px;right:16px;
    width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#F2F4F0;border:0;color:#5C6259;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .cond-sheet-x svg{width:15px;height:15px;}

  .cond-sheet-title{
    margin:2px 40px 16px 0;
    font-family:'Poppins';font-weight:600;font-size:1.15rem;
    color:var(--ink);line-height:1.3;
  }

  .cond-sheet-list{margin:0;}
  .cond-sheet-list dt{
    font-family:'Inter';font-weight:600;font-size:.95rem;
    color:var(--ink);margin:0;
  }
  .cond-sheet-list dd{
    font-family:'Inter';font-weight:400;font-size:.88rem;line-height:1.45;
    color:var(--ink-soft);margin:3px 0 16px;
  }
  .cond-sheet-list dd:last-of-type{margin-bottom:20px;}

  /* Compact and neutral: the sheet's job is the definitions, not the
     dismiss control. Auto width with generous horizontal padding keeps
     it comfortably tappable at 42px tall without dominating. */
  .cond-sheet-cta{
    display:block;margin:0 auto;
    min-width:120px;min-height:42px;padding:0 28px;
    background:#fff;color:#252925;
    border:1px solid #d5dbd2;border-radius:10px;
    box-shadow:0 1px 2px rgba(25,28,25,.05);
    font-family:'Inter';font-weight:500;font-size:.95rem;letter-spacing:.2px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .cond-sheet-cta:hover{background:#FAFBF9;}
  .cond-sheet-cta:active{background:#F2F4F0;}
  /* The default UA ring can be invisible against a white button on some
     platforms, so keyboard focus gets an explicit one. */
  .cond-sheet-cta:focus-visible,
  .cond-sheet-x:focus-visible{
    outline:2px solid var(--green-dark);outline-offset:2px;
  }

  /* Page behind the sheet does not scroll while it's open. The
     scrollbar-width compensation lives in js/condition-help.js so the
     desktop layout can't jump when this class is applied. */
  body.cond-sheet-lock{overflow:hidden;}

  /* On wide screens keep it a sheet rather than a full-width band. */
  @media (min-width:700px){
    .cond-sheet{
      left:50%;right:auto;transform:translate(-50%,100%);
      width:min(480px,92vw);
      border-radius:16px 16px 0 0;
    }
    .cond-sheet-root.is-open .cond-sheet{transform:translate(-50%,0);}
  }

  /* ---------- MOBILE COMPACTION ----------
     Phones only (desktop starts at 700px, where the sheet becomes a
     centred panel and is left exactly as it was). Everything scales
     together — padding, section gaps, type, button, handle — so the
     proportions read as the same design at a smaller size rather than
     one squashed element. Body text is cut least, to stay comfortable. */
  @media (max-width:699px){
    .cond-sheet{
      padding:5px 18px calc(15px + env(safe-area-inset-bottom, 0px));
      border-radius:14px 14px 0 0;
    }
    .cond-sheet-grabber{width:32px;height:4px;margin:0 auto 9px;}

    .cond-sheet-x{top:11px;right:13px;width:27px;height:27px;}
    .cond-sheet-x svg{width:13px;height:13px;}

    .cond-sheet-title{margin:1px 36px 11px 0;font-size:1.02rem;}

    .cond-sheet-list dt{font-size:.9rem;}
    .cond-sheet-list dd{font-size:.83rem;line-height:1.4;margin:2px 0 11px;}
    .cond-sheet-list dd:last-of-type{margin-bottom:14px;}

    .cond-sheet-cta{
      min-width:112px;min-height:38px;padding:0 24px;
      border-radius:9px;font-size:.9rem;
    }
  }