/* secure-forms.css -- session 270. The Secure forms page and Staff record tab, My work's Secure forms card, the Proposed
   changes card and the Staff list's count. Hub tokens only (tokens.css); the hub is light-only. */
.s-secure{ max-width:var(--wrap-max); }
.sf-head h1{ margin:0 0 4px; }
.sf-head .sub{ margin:0 0 var(--s5); color:var(--muted); max-width:760px; }
.sf-grid{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:var(--s5); align-items:start; }
.sf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s5); }
.sf-side{ position:sticky; top:var(--s4); }
.sf-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s4) var(--s5); margin-bottom:var(--s5); }
.sf-ct{ font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:var(--s3); display:flex; align-items:center; gap:8px; }
.sf-n{ font-weight:500; color:var(--muted); font-size:13px; }
.sf-empty{ color:var(--muted); padding:var(--s3) 0; }
.sf-note{ font-size:12.5px; color:var(--muted); margin-top:var(--s3); line-height:1.5; }
.sf-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sf-row input[type=text]{ flex:1 1 200px; min-width:0; }
.s-secure .check, .pc-card .check{ display:flex; align-items:center; gap:var(--s2); font-size:14px; cursor:pointer; padding:4px 0; }

.sf-tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.sf-tbl th{ text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
.sf-tbl td{ padding:10px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--text); }
.sf-tbl tbody tr{ cursor:pointer; }
.sf-tbl tbody tr:hover td{ background:var(--hover-bg); }
.sf-tbl tr.sf-new td:first-child{ box-shadow:inset 3px 0 0 var(--orange); }
.sf-tbl tr.sf-new b{ color:var(--ink); }
.sf-tbl tr.sf-sel td{ background:var(--teal-pale); }
.sf-via{ font-size:12px; }

.sf-st{ display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:var(--pill-radius); white-space:nowrap; background:var(--gray-bg); color:var(--text); }
.sf-st-new{ background:var(--amber-bg); color:var(--amber-text); }
.sf-st-open{ background:var(--teal-pale); color:var(--teal-dark); }
.sf-st-done{ background:var(--green-bg); color:var(--green-text); }
.sf-st-gone{ background:var(--gray-bg); color:var(--muted); }

.sf-detail .sf-dh{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:6px; }
.sf-dt{ font-size:16px; font-weight:600; color:var(--ink); }
.sf-opened{ font-size:12.5px; color:var(--muted); margin-bottom:var(--s3); min-height:1px; }
.sf-fr{ display:grid; grid-template-columns:minmax(120px, 0.9fr) minmax(0, 1.3fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.sf-k{ color:var(--muted); font-size:13px; }
.sf-v{ color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.sf-mask{ font-family:var(--mono); letter-spacing:.04em; }
.sf-plain{ font-family:var(--mono); background:var(--warn-soft-bg); border:1px solid var(--warn-soft-line); padding:2px 6px; border-radius:6px; }
.sf-sig{ max-width:220px; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; }
.sf-rv{ min-height:36px; padding:4px 12px; }
.sf-acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:var(--s4); }
.sf-actnote{ font-size:12.5px; color:var(--muted); flex:1 1 220px; }
.sf-msg{ margin-top:8px; font-size:13px; }
.sf-msg.err{ color:var(--danger-text); }
.sf-rlog{ margin-top:var(--s4); font-size:13px; }
.sf-rlog summary{ cursor:pointer; color:var(--teal-dark); font-weight:500; }
.sf-rlog ul{ margin:8px 0 0; padding-left:18px; color:var(--text); }
.sf-rlog li{ margin:4px 0; }
.sf-pick{ min-height:120px; display:flex; align-items:center; justify-content:center; }
.sf-wpres{ margin-top:var(--s3); font-size:13.5px; line-height:1.7; }
.sf-last{ font-size:12px; margin-top:var(--s3); }
.sf-onfile{ display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.sf-onfile .btn{ margin-left:8px; min-height:32px; padding:3px 10px; }
.sf-na{ padding:var(--s7) var(--s5); }
.sf-na h1{ margin:0 0 6px; }
.sf-na p{ color:var(--muted); margin:0; }

/* sidebar count */
.sitem .sf-navn{ margin-left:auto; background:var(--orange); color:var(--white); font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px; line-height:16px; }

/* Proposed changes */
.pc-item{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); margin-bottom:var(--s3); background:var(--paper); }
.pc-h{ margin-bottom:4px; }
.pc-ft{ font-size:13px; margin-bottom:8px; }
.st-proptag{ display:inline-block; font-size:11.5px; font-weight:600; color:var(--teal-dark); background:var(--teal-pale); border-radius:var(--pill-radius); padding:1px 8px; margin-top:3px; }
#stPropCount{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--teal-dark); background:var(--teal-pale); border-radius:var(--pill-radius); padding:4px 12px; }
#stPropCount .n{ background:var(--teal-dark); color:var(--white); border-radius:10px; padding:0 7px; font-size:12px; }

@media (max-width: 900px){
  .sf-grid, .sf-grid2{ grid-template-columns:1fr; }
  .sf-side{ position:static; }
}
@media (max-width: 600px){
  .sf-card{ padding:var(--s3) var(--s4); }
  .sf-tbl thead{ display:none; }
  .sf-tbl, .sf-tbl tbody, .sf-tbl tr, .sf-tbl td{ display:block; width:100%; }
  .sf-tbl tr{ border-bottom:1px solid var(--line); padding:6px 0; }
  .sf-tbl td{ border:0; padding:3px 0; display:grid; grid-template-columns:96px 1fr; gap:8px; }
  .sf-tbl td::before{ content:attr(data-l); color:var(--muted); font-size:12px; }
  .sf-tbl tr.sf-new td:first-child{ box-shadow:none; }
  .sf-tbl tr.sf-new{ box-shadow:inset 3px 0 0 var(--orange); padding-left:8px; }
  .sf-fr{ grid-template-columns:1fr auto; }
  .sf-fr .sf-k{ grid-column:1 / -1; }
  .sf-onfile{ grid-template-columns:1fr; gap:4px; }
  .sf-rv, .sf-acts .btn, .sf-row .btn{ min-height:44px; }
}