/* ===================================================================
   Evolutiv Index — interface styles

   DESIGN NOTE

   The visual language is the ENGRAVED MACHINE DATA PLATE: the riveted
   metal rectangle screwed to the side of every lathe, press and CNC
   router in Kosovo, carrying brand, model, serial and year in stamped
   condensed capitals. That is the native artifact of the people this
   is built for, and the balance panel is drawn as one.

   Palette is zinc and patina rather than paper and clay: the greys of
   galvanised sheet, the deep blue-green of oxidised copper and old
   cutting fluid, and brass for figures — because Mcs are a token, and
   tokens are struck in metal.

   IBM Plex is not decoration: it carries ë and ç properly, which most
   display faces do not, and Albanian without diacritics reads wrong.
   =================================================================== */

/* NO EXTERNAL FONT REQUEST.
   A Google Fonts CDN link sends every visitor's IP address to Google
   before the page even renders. German courts have found that to
   breach the GDPR, and Kosovo's data protection law follows the same
   model — for a site whose users are largely in Germany and
   Switzerland, that is not a risk worth taking for a typeface.

   To use the intended faces, self-host them: download IBM Plex Sans,
   IBM Plex Mono and Barlow Condensed, drop the .woff2 files in
   /opt/evolutiv/web/fonts/, and uncomment the @font-face block below.
   Both families carry ë and ç, which matters — Albanian set without
   diacritics reads as a foreigner wrote it.

@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
             font-weight:600; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('/fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
             font-weight:600; font-display:swap; }
*/

:root {
  /* zinc + patina + brass */
  --zinc:        #E4E6E1;   /* galvanised sheet, faintly green */
  --zinc-deep:   #CFD3CC;
  --plate:       #F7F8F5;   /* the plate face */
  --ink:         #12171A;   /* stamped mark */
  --ink-soft:    #5C6660;
  --rule:        #B9BFB7;
  --patina:      #1F4E4A;   /* oxidised copper */
  --patina-lift: #2C6A64;
  --brass:       #8A6A1F;   /* struck figures */
  --brass-lift:  #B08A2E;
  --alarm:       #8C2F1D;   /* oxide red, for refusals */
  --held:        #7A6A45;

  --rivet: radial-gradient(circle at 50% 45%, #FFF 0 18%, #A9AFA7 45%, #7C837B 78%, #5F655E 100%);

  /* Condensed grotesques, in order of likelihood across Windows,
     macOS, Android and Linux. All carry Ë and Ç. */
  --display: 'Barlow Condensed', 'Roboto Condensed', 'Archivo Narrow',
             'Liberation Sans Narrow', 'Arial Narrow', 'Helvetica Neue',
             system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', sans-serif;
  /* Tabular figures are not optional for a ledger: 1 000 000 and
     100 000 must align in the column or they are easy to confuse. */
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
          'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--zinc);
  /* faint brushed-metal grain, horizontal like rolled sheet */
  background-image: repeating-linear-gradient(
      180deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- masthead ---------- */
.mast {
  display: flex; align-items: baseline; gap: 14px;
  padding: 26px 0 18px; border-bottom: 2px solid var(--ink);
  margin-bottom: 30px; flex-wrap: wrap;
}
.mast h1 {
  font: 700 30px/1 var(--display);
  letter-spacing: .06em; text-transform: uppercase; margin: 0;
}
.mast h1 span { color: var(--patina); }
.mast .tag {
  font: 500 11px/1 var(--display); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.mast .who { margin-left: auto; font: 500 13px var(--mono); color: var(--ink-soft); }
.mast .who a { color: var(--patina); }

/* ---------- the data plate: signature element ---------- */
.plate {
  position: relative;
  background: var(--plate);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--zinc-deep), 0 10px 22px rgba(18,23,26,.10);
  padding: 26px 28px 22px;
  margin-bottom: 28px;
}
/* rivets, one per corner — the reason the plate reads as a plate */
.plate::before, .plate::after,
.plate > .rivet-l, .plate > .rivet-r {
  content: ''; position: absolute; width: 9px; height: 9px;
  border-radius: 50%; background: var(--rivet);
}
.plate::before { top: 8px; left: 8px; }
.plate::after  { top: 8px; right: 8px; }
.plate > .rivet-l { bottom: 8px; left: 8px; }
.plate > .rivet-r { bottom: 8px; right: 8px; }

.plate-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 18px;
}
.plate-head h2 {
  font: 600 15px/1 var(--display); letter-spacing: .2em;
  text-transform: uppercase; margin: 0;
}
.plate-head .ref { font: 400 11px var(--mono); color: var(--ink-soft); }

/* stamped label / value rows */
.row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px dotted var(--rule);
}
.row:last-child { border-bottom: 0; }
.row .k {
  font: 500 11px/1.3 var(--display); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.row .v { font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums; }
.row.big .v { font-size: 30px; font-weight: 600; color: var(--brass); }
.row.big .k { font-size: 12px; color: var(--ink); }
.row .v.held { color: var(--held); }
.row .v.small { font-size: 14px; color: var(--ink-soft); }
.unit { font: 500 11px var(--display); letter-spacing: .14em; color: var(--ink-soft); margin-left: 5px; }

/* progress toward the next CryptoShare */
.toward { margin-top: 16px; }
.toward .bar {
  height: 8px; background: var(--zinc-deep); border: 1px solid var(--rule);
  overflow: hidden;
}
.toward .bar i { display: block; height: 100%; background: var(--patina); }
.toward .cap {
  display: flex; justify-content: space-between; margin-top: 7px;
  font: 400 11px var(--mono); color: var(--ink-soft);
}

/* ---------- cards ---------- */
.card {
  background: var(--plate); border: 1px solid var(--ink);
  padding: 22px 24px; margin-bottom: 22px;
}
.card > h2 {
  font: 600 14px/1 var(--display); letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 4px;
}
.card > .sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; }

/* ---------- forms ---------- */
label {
  display: block; font: 500 11px/1 var(--display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
input, textarea, select {
  width: 100%; padding: 11px 12px; background: #fff;
  border: 1px solid var(--rule); border-radius: 0;
  font: 400 15px var(--body); color: var(--ink);
}
input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--patina); outline-offset: 2px;
}
.field { margin-bottom: 15px; }
.hint { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; }
.check input { width: auto; margin-top: 3px; flex: none; }
.check label {
  font: 400 13.5px/1.5 var(--body); letter-spacing: 0;
  text-transform: none; color: var(--ink); margin: 0;
}
.check a { color: var(--patina); }

button {
  font: 600 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--patina); color: #fff; cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
button:hover:not(:disabled) { background: var(--patina-lift); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink); }
button.ghost:hover:not(:disabled) { background: var(--zinc-deep); }
button.link {
  background: none; border: 0; color: var(--patina); padding: 0;
  text-transform: none; letter-spacing: 0; font: 500 14px var(--body);
  text-decoration: underline;
}

/* ---------- messages ---------- */
.msg { padding: 12px 14px; margin-bottom: 18px; font-size: 14px; border-left: 4px solid; }
.msg.err  { background: #F6E9E6; border-color: var(--alarm); color: #5E2013; }
.msg.ok   { background: #E4EEEC; border-color: var(--patina); color: #143C39; }
.msg.wait { background: #F0EEE2; border-color: var(--held); color: #4A422A; }
.msg strong { display: block; font: 600 12px var(--display); letter-spacing: .14em;
              text-transform: uppercase; margin-bottom: 3px; }

/* ---------- ledger table ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  font: 500 10px/1 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 0 0 9px;
  border-bottom: 1px solid var(--ink);
}
th.num, td.num { text-align: right; }
td {
  padding: 11px 0; border-bottom: 1px solid var(--zinc-deep);
  font-size: 14px; vertical-align: top;
}
td.num { font: 500 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num.in  { color: var(--patina); }
td.num.out { color: var(--alarm); }
td .when { display: block; font: 400 11px var(--mono); color: var(--ink-soft); }
.pill {
  display: inline-block; font: 500 9.5px/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--held);
  color: var(--held); margin-left: 7px;
}
.empty { padding: 26px 0; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* ---------- tiers ---------- */
.tier {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px dotted var(--rule);
}
.tier:last-child { border-bottom: 0; }
.tier .mark {
  font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; border: 1px solid; white-space: nowrap; margin-top: 1px;
}
.tier.on  .mark { border-color: var(--patina); color: var(--patina); }
.tier.off .mark { border-color: var(--rule); color: var(--ink-soft); }
.tier p { margin: 0; font-size: 13.5px; }
.tier p b { display: block; font-weight: 600; }
.tier.off p { color: var(--ink-soft); }

.foot {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-soft);
}

.hidden { display: none !important; }
.spin { opacity: .5; pointer-events: none; }

@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .mast .who { margin-left: 0; width: 100%; }
  .row.big .v { font-size: 25px; }
  .plate { padding: 22px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Inline validation that reads as a problem rather than a hint. */
.hint .warn { color: var(--alarm); }

/* ===================================================================
   Wall and admin
   =================================================================== */

.mast .brand { font:700 26px/1 var(--display); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; }
.mast .brand span { color:var(--patina); }
.nav { display:flex; gap:16px; }
.nav a {
  font:500 11px/1 var(--display); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.nav a:hover { color:var(--ink); }
.nav a.on { color:var(--patina); border-bottom-color:var(--patina); }

/* balance strip */
.strip {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--ink); margin-bottom:24px;
}
.strip > div { background:var(--plate); padding:13px 16px; }
.strip .k {
  display:block; font:500 10px/1 var(--display); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;
}
.strip b { font:600 21px/1 var(--mono); font-variant-numeric:tabular-nums;
           color:var(--brass); }
.strip i { font:500 10px var(--display); letter-spacing:.12em;
           color:var(--ink-soft); font-style:normal; margin-left:5px; }

/* a task on the wall */
.task {
  border:1px solid var(--rule); border-left:4px solid var(--patina);
  background:#fff; padding:15px 17px; margin-bottom:12px;
}
.task.locked { border-left-color:var(--rule); opacity:.72; }
.task-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.task h3 { margin:0 0 3px; font:600 16px/1.3 var(--body); }
.task .meta { font:400 12px var(--body); color:var(--ink-soft); }
.task .pay { text-align:right; white-space:nowrap; }
.task .pay b { font:600 19px/1 var(--mono); font-variant-numeric:tabular-nums;
               color:var(--brass); display:block; }
.task .pay span { font:500 10px var(--display); letter-spacing:.12em;
                  color:var(--ink-soft); }
.task p.d { margin:9px 0 0; font-size:14px; }
.task .tagrow { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; }
.tag {
  font:500 9.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase;
  padding:4px 7px; border:1px solid var(--rule); color:var(--ink-soft);
}
.tag.hot { border-color:var(--brass); color:var(--brass); }
.tag.race { border-color:var(--patina); color:var(--patina); }
.task .act { margin-top:13px; display:flex; gap:9px; align-items:center; }
.task .why { font-size:12.5px; color:var(--alarm); }

/* payment terms box */
.terms-box {
  background:var(--zinc); border-left:3px solid var(--patina);
  padding:11px 13px; margin:12px 0 16px; font-size:13px; line-height:1.55;
}
.terms-box b { display:block; font:600 10px var(--display); letter-spacing:.14em;
               text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }

/* claim in progress */
.claim {
  border:1px solid var(--ink); background:var(--plate);
  padding:14px 16px; margin-bottom:11px;
}
.claim-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.claim h3 { margin:0; font:600 15px var(--body); }
.claim .left { font:500 12px var(--mono); color:var(--held); white-space:nowrap; }
.claim .left.soon { color:var(--alarm); }
.claim .act { margin-top:11px; display:flex; gap:9px; }
button.small { padding:8px 14px; font-size:11px; }

/* history rows */
.hist { display:flex; justify-content:space-between; gap:12px;
        padding:10px 0; border-bottom:1px solid var(--zinc-deep); font-size:14px; }
.hist:last-child { border-bottom:0; }
.hist .r { text-align:right; white-space:nowrap; font:500 13px var(--mono); }
.hist .v { font:500 9.5px var(--display); letter-spacing:.12em;
           text-transform:uppercase; padding:2px 6px; border:1px solid; margin-left:8px; }
.v.accept { border-color:var(--patina); color:var(--patina); }
.v.reject, .v.duplicate { border-color:var(--alarm); color:var(--alarm); }
.v.wait { border-color:var(--held); color:var(--held); }

/* modal */
.modal { position:fixed; inset:0; background:rgba(18,23,26,.55);
         display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.modal-box { background:var(--plate); border:2px solid var(--ink);
             max-width:560px; width:100%; max-height:90vh; display:flex; flex-direction:column; }
.modal-head { display:flex; justify-content:space-between; align-items:center;
              padding:17px 20px; border-bottom:1px solid var(--rule); }
.modal-head h2 { margin:0; font:600 14px var(--display); letter-spacing:.16em;
                 text-transform:uppercase; }
.modal-body { padding:18px 20px; overflow-y:auto; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end;
              padding:15px 20px; border-top:1px solid var(--rule); }
button.x { background:none; border:0; font-size:26px; line-height:1; color:var(--ink-soft);
           cursor:pointer; padding:0 4px; }

/* admin */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.stat { background:var(--plate); border:1px solid var(--ink); padding:15px 17px; }
.stat .k { display:block; font:500 10px var(--display); letter-spacing:.16em;
           text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.stat b { font:600 24px/1 var(--mono); font-variant-numeric:tabular-nums; }
.stat .sub2 { display:block; margin-top:5px; font-size:12px; color:var(--ink-soft); }
.stat.good b { color:var(--patina); }
.stat.warn b { color:var(--alarm); }

.review { border:1px solid var(--rule); background:#fff; padding:15px 17px; margin-bottom:13px; }
.review.honeypot { border-left:4px solid var(--brass); }
.review-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.review h3 { margin:0 0 3px; font:600 15px var(--body); }
.review .who2 { font-size:12.5px; color:var(--ink-soft); }
pre.payload {
  background:var(--zinc); border:1px solid var(--rule); padding:10px 12px;
  margin:11px 0 0; font:400 12.5px/1.5 var(--mono); overflow-x:auto; white-space:pre-wrap;
}
.expected { background:#F0EEE2; border-left:3px solid var(--brass);
            padding:9px 12px; margin:10px 0 0; font:400 12.5px var(--mono); }
.expected b { display:block; font:600 9.5px var(--display); letter-spacing:.14em;
              text-transform:uppercase; color:var(--held); margin-bottom:3px;
              font-family:var(--display); }
.review .act { margin-top:13px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.review .act input { flex:1; min-width:180px; }
button.danger { background:var(--alarm); }
button.danger:hover:not(:disabled) { background:#A63A25; }

@media (max-width:620px){
  .strip { grid-template-columns:1fr; }
  .grid3 { grid-template-columns:1fr; }
  .task-top { flex-direction:column; }
  .task .pay { text-align:left; }
  .mast .nav { width:100%; order:3; }
}

/* task context, as labelled facts rather than raw JSON */
.ctxrow { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.ctx {
  font-size:13px; background:var(--zinc); border:1px solid var(--rule);
  padding:4px 9px;
}
.ctx i {
  font:500 9.5px var(--display); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-style:normal; margin-right:6px;
}

/* photo upload */
.drop {
  border:1px dashed var(--rule); background:#fff; padding:16px;
  text-align:center;
}
.drop.busy { opacity:.6; pointer-events:none; }
#m-preview:not(:empty) { margin-top:12px; }
.shot {
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--rule); background:#fff; padding:10px;
}
.shot img {
  width:104px; height:78px; object-fit:cover; flex:none;
  border:1px solid var(--rule); background:var(--zinc);
}
.shot .info { flex:1; min-width:0; font-size:13px; line-height:1.5; }
.shot .info b {
  display:inline-block; font:600 9.5px var(--display); letter-spacing:.12em;
  text-transform:uppercase; padding:3px 6px; border:1px solid; margin-bottom:5px;
}
.geo-agree    { border-color:var(--patina); color:var(--patina); }
.geo-conflict { border-color:var(--alarm);  color:var(--alarm); }
.geo-none, .geo-exif_only, .geo-device_only { border-color:var(--held); color:var(--held); }
.shot .drop-note { color:var(--ink-soft); }
.shot button { margin-top:8px; }

/* evidence in the review queue */
.evidence-box {
  display:flex; gap:13px; align-items:flex-start;
  border:1px solid var(--rule); background:var(--zinc);
  padding:11px; margin:12px 0 0;
}
.evidence-box img {
  width:180px; height:135px; object-fit:cover; flex:none;
  border:1px solid var(--rule); background:#fff; display:block;
}
.ev-info { flex:1; min-width:0; font-size:13px; line-height:1.55; }
.ev-info b {
  display:inline-block; font:600 9.5px var(--display); letter-spacing:.12em;
  text-transform:uppercase; padding:3px 6px; border:1px solid; margin-bottom:6px;
}
.ok-note { color:var(--patina); }
.warn { color:var(--alarm); }
@media (max-width:620px){
  .evidence-box { flex-direction:column; }
  .evidence-box img { width:100%; height:auto; }
}