/* ============================================================================
   Case file: backend chrome.
   Extends the dashboard's existing palette. Nothing new is invented here;
   the bar, panels and controls are quiet so the evidence stays the loud thing.
   ========================================================================== */

/* ---------------------------------------------------------------- the bar */

.cf-bar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:10px 26px;
  background:var(--ink); color:#fff;
  font:500 12px/1 var(--sans); letter-spacing:.02em;
  border-bottom:3px solid var(--seal);
}
.cf-bar.cf-ro{ border-bottom-color:#5b6472; }

.cf-who{ font-weight:600; opacity:.95; }
.cf-role{
  padding:4px 9px; border-radius:3px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--seal); color:#fff;
}
.cf-bar.cf-ro .cf-role{ background:#5b6472; }
.cf-sp{ flex:1; }
.cf-note{ opacity:.7; font-size:11.5px; font-style:italic; }

.cf-btn{
  font:600 11.5px/1 var(--sans); letter-spacing:.03em;
  padding:8px 13px; border-radius:3px; cursor:pointer;
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.32);
  transition:.15s;
}
.cf-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
.cf-btn:disabled{ opacity:.42; cursor:default; }
.cf-btn:disabled:hover{ background:transparent; border-color:rgba(255,255,255,.32); }

.cf-primary{ background:var(--seal); border-color:var(--seal); }
.cf-primary:hover{ background:#8f2233; border-color:#8f2233; }
.cf-primary.cf-hot{
  background:#b3283c; border-color:#b3283c;
  animation:cf-pulse 1.7s ease-in-out infinite;
}
@keyframes cf-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(179,40,60,.55); }
  50%    { box-shadow:0 0 0 6px rgba(179,40,60,0); }
}
@media (prefers-reduced-motion:reduce){ .cf-primary.cf-hot{ animation:none; } }

/* ------------------------------------------------------- attach / archive */

.cf-attach{
  font:600 10.5px/1 var(--sans); letter-spacing:.04em;
  padding:6px 10px; border-radius:3px; cursor:pointer;
  background:transparent; color:var(--muted);
  border:1px dashed var(--line);
  transition:.15s;
}
.cf-attach:hover{ border-color:var(--seal); color:var(--seal); border-style:solid; }
.cf-archive{
  font:600 10.5px/1 var(--sans);
  padding:6px 9px; border:none; background:none;
  color:var(--faint); cursor:pointer;
}
.cf-archive:hover{ color:var(--seal); text-decoration:underline; }

/* Read-only: the editing affordances simply are not there. */
body.cf-read-only .cf-attach,
body.cf-read-only .cf-archive,
body.cf-read-only [data-editable]{ display:none !important; }

/* --------------------------------------------------------------- editing */

body.cf-can-edit [data-editable]{
  cursor:text;
  border-bottom:1px dashed transparent;
  transition:.12s;
}
body.cf-can-edit [data-editable]:hover{ border-bottom-color:var(--line); }
body.cf-can-edit [data-editable]:focus{
  outline:none;
  background:#fffbe8;
  border-bottom-color:var(--seal);
}

/* ---------------------------------------------------------------- panels */

.cf-panel{
  position:fixed; inset:0; z-index:80;
  background:rgba(20,26,36,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:60px 24px; overflow:auto;
}
.cf-panel-in{
  background:var(--surface);
  max-width:780px; width:100%;
  border-radius:5px; padding:30px 34px 34px;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.cf-panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:2px solid var(--ink);
  padding-bottom:12px; margin-bottom:18px;
}
.cf-panel-head h2{
  font:600 21px/1.2 var(--serif);
  color:var(--ink); margin:0;
}
.cf-x{
  font:600 11px/1 var(--sans); letter-spacing:.04em;
  background:none; border:none; color:var(--muted); cursor:pointer;
}
.cf-x:hover{ color:var(--seal); }

.cf-lead{
  font:400 13px/1.55 var(--sans);
  color:var(--muted); margin:0 0 16px;
}

.cf-tbl{ width:100%; border-collapse:collapse; }
.cf-tbl th{
  text-align:left; padding:8px 10px;
  font:700 10px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line);
}
.cf-tbl td{
  padding:11px 10px;
  font:400 12.5px/1.45 var(--sans);
  color:var(--ink); border-bottom:1px solid var(--line);
  vertical-align:top;
}
.cf-tbl tr:last-child td{ border-bottom:none; }

.cf-link{
  font:600 11.5px/1 var(--sans);
  color:var(--seal); text-decoration:none;
  background:none; border:none; cursor:pointer; padding:0;
  margin-right:12px;
}
.cf-link:hover{ text-decoration:underline; }

/* ----------------------------------------------------------------- walls */

.cf-wall{
  max-width:520px; margin:16vh auto; padding:0 26px;
  text-align:center;
}
.cf-wall h1{
  font:600 30px/1.2 var(--serif);
  color:var(--ink); margin:0 0 6px;
}
.cf-case{
  font:600 10.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 30px;
}
.cf-wall-msg{
  font:400 15px/1.55 var(--serif);
  color:var(--seal); margin:0 0 14px;
  padding:16px 20px;
  border-left:3px solid var(--seal);
  background:#fdf5f5; text-align:left;
}
.cf-wall-sub{
  font:400 12.5px/1.6 var(--sans);
  color:var(--muted); text-align:left; margin:0;
}

/* ----------------------------------------------------------------- toast */

.cf-toast{
  position:fixed; left:50%; bottom:26px; z-index:100;
  transform:translate(-50%, 14px);
  padding:12px 20px; border-radius:4px;
  background:var(--ink); color:#fff;
  font:500 12.5px/1 var(--sans);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.cf-toast.cf-on{ opacity:1; transform:translate(-50%, 0); }
.cf-toast.cf-bad{ background:var(--seal); }

/* ----------------------------------------------------------------- print */

@media print{
  .cf-bar, .cf-panel, .cf-toast, .cf-attach, .cf-archive{ display:none !important; }
}

/* ------------------------------------------------- source-button attaching */

.srcwrap{ display:inline-flex; align-items:center; gap:4px; }
.cf-fname{
  font:400 10.5px/1 var(--sans);
  color:var(--faint); margin-left:6px;
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.srcbtn.cf-attachsrc{
  border-style:dashed;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
}
.srcbtn.cf-attachsrc:hover{
  border-style:solid;
  border-color:var(--seal);
  color:var(--seal);
  background:#fdf5f5;
}
.cf-att-lbl{ font-weight:700; letter-spacing:.03em; }