/* ============================================================
   PASSAGE by Khoshà — Protection module styles
   All new classes are prefixed pro- ; uses the existing design
   tokens from styles.css (--paper --bone --ink --gold --gold-deep
   --green --red --stroke etc.) so it matches the light-luxury
   gold aesthetic without redefining anything.
   ============================================================ */

/* ---------- statutory-deadline alert strip (Protection Desk) ---------- */
.pro-alert-strip{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.pro-alert-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(169,130,76,.08);border:1px solid var(--stroke-soft);border-radius:var(--r-md);
  padding:12px 16px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.pro-alert-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);border-color:rgba(169,130,76,.35)}
.pro-alert-row.pro-tone-amber{background:rgba(169,130,76,.14)}
.pro-alert-row.pro-tone-red{background:rgba(140,59,46,.10);border-color:rgba(140,59,46,.25)}
.pro-alert-main{min-width:0;flex:1}
.pro-alert-title{font-weight:700;font-size:13.5px}
.pro-tone-red .pro-alert-title{color:var(--red)}
.pro-alert-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.pro-alert-meta{flex:0 0 auto;text-align:right}
.pro-alert-date{font-size:12px;font-weight:600}
.pro-alert-days{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.pro-tone-red .pro-alert-days{color:var(--red);font-weight:700}
.pro-tone-amber .pro-alert-days{color:var(--gold-deep);font-weight:700}
.pro-alert-empty{background:rgba(30,58,51,.06);border:1px solid var(--stroke-soft);border-radius:var(--r-md);
  padding:12px 16px;font-size:13px;color:var(--ink-soft);margin-bottom:18px}

/* ---------- pathway / stream quick-select chips (protection file form) ---------- */
.pro-stream-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px}

/* ---------- key-dates / statutory clock list (Overview tab) ---------- */
.pro-clock-list{display:flex;flex-direction:column;gap:8px}
.pro-clock-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.6);border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:11px 14px}
.pro-clock-row.pro-tone-amber{background:rgba(169,130,76,.10);border-color:rgba(169,130,76,.3)}
.pro-clock-row.pro-tone-red{background:rgba(140,59,46,.08);border-color:rgba(140,59,46,.28)}
.pro-clock-row.pro-clock-done{opacity:.6}
.pro-clock-main{min-width:0}
.pro-clock-label{font-weight:700;font-size:13.5px}
.pro-clock-rule{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.pro-clock-meta{flex:0 0 auto;text-align:right}
.pro-clock-date{font-size:12.5px;font-weight:600}
.pro-clock-badge{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.pro-tone-red .pro-clock-badge{color:var(--red);font-weight:700}
.pro-tone-amber .pro-clock-badge{color:var(--gold-deep);font-weight:700}
.pro-clock-empty{color:var(--ink-faint);font-size:13px;padding:6px 2px}

/* ---------- risk note callout (Overview tab) ---------- */
.pro-risk-box{background:rgba(140,59,46,.07);color:var(--red-soft);border-radius:var(--r-md);
  padding:10px 14px;font-size:12.5px;line-height:1.6}

/* ---------- hearings ---------- */
.pro-hearing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pro-hearing-card{position:relative;display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.6);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:16px 18px}
.pro-hearing-card.pro-hearing-past{opacity:.6}
.pro-hearing-date{flex:0 0 50px;text-align:center;background:var(--bone);border-radius:12px;padding:6px 0}
.pro-hearing-date .d{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.1}
.pro-hearing-date .m{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.pro-hearing-body{flex:1;min-width:0}
.pro-hearing-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pro-hearing-outcome{font-size:12.5px;color:var(--green);font-weight:600;background:rgba(30,58,51,.08);
  border-radius:10px;padding:8px 12px}
.pro-hearing-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pro-hearing-actions button.pill{border:none;cursor:pointer}

/* ---------- evidence & country conditions ---------- */
.pro-inline-add{display:flex;gap:8px;margin-top:14px}
.pro-inline-add input{flex:1;border:1px solid var(--stroke);border-radius:12px;padding:9px 13px;
  background:#fff;outline:0;font-size:13.5px;transition:border-color .2s,box-shadow .2s}
.pro-inline-add input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(169,130,76,.10)}

/* ---------- hearing calendar ---------- */
.pro-cal-group{display:flex;flex-direction:column;gap:10px}
.pro-cal-row{display:flex;gap:14px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--stroke-soft);
  cursor:pointer;transition:background .15s}
.pro-cal-row:last-child{border-bottom:0}
.pro-cal-row:hover{background:var(--bone)}
.pro-cal-row.pro-cal-past{opacity:.6}
.pro-cal-body{flex:1;min-width:0}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  .pro-hearing-grid{grid-template-columns:1fr}
  .pro-alert-row{flex-direction:column;align-items:flex-start;gap:8px}
  .pro-alert-meta{text-align:left}
  .pro-clock-row{flex-direction:column;align-items:flex-start;gap:6px}
  .pro-clock-meta{text-align:left}
  .pro-hearing-card{padding:14px}
  .pro-inline-add{flex-direction:column}
  .pro-cal-row{flex-wrap:wrap}
}