/* =============================================================
   Canvass HQ v2 — app chrome on top of the brand stylesheet.
   Maps, tabs, tables, field-mode big-thumb UI, badges, toasts.
   ============================================================= */

/* ---------- status palette (single source of truth for check-off colors) ---------- */
:root{
  --st-done:#2b9348;      /* visit logged / contacted */
  --st-noanswer:#e5b800;  /* attempted, needs revisit */
  --st-refused:#FF3131;
  --st-pending:#0C3F86;   /* not visited yet */
  --st-other:#8b97a8;     /* inaccessible / moved / vacant */
  --sel-yellow:#FFCC00;   /* selected for a turf (builder) */
}

/* ---------- app header ---------- */
.app-header{
  position:sticky;top:0;z-index:100;
  background:var(--navy);color:#fff;
  border-bottom:3px solid var(--yellow);
}
.app-header-inner{
  display:flex;align-items:center;gap:1rem;
  padding:.55rem clamp(.9rem,3vw,1.6rem);
  max-width:1400px;margin-inline:auto;
}
.app-header .wordmark img{height:38px;width:auto;}
.app-title{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.app-header .sync-pill{flex:none;}
.app-header .spacer{flex:1;}
.app-header .btn-navy{
  border-color:#fff;
}
@media (hover:hover){
  .app-header .btn-secondary:hover{
    background:var(--yellow);color:var(--navy);border-color:var(--yellow);
  }
  .app-header .btn-navy:hover{
    background:#fff;color:var(--navy);border-color:#fff;
  }
}
.app-user{font-size:.85rem;color:#cdd9ee;}
.app-user button{
  background:none;border:none;color:var(--yellow);
  font-weight:700;cursor:pointer;font-size:.85rem;padding:.2rem .4rem;
}

/* ---------- tabs (single scrollable row on all sizes) ---------- */
.tabs{
  display:flex;gap:.25rem;flex-wrap:nowrap;
  padding:.4rem clamp(.9rem,3vw,1.6rem) 0;
  max-width:1400px;margin-inline:auto;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
/* edge fades toggled from JS while the row can scroll */
.tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
.tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);
  mask-image:linear-gradient(90deg,transparent,#000 36px);}
.tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);}
.tabs button{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.85rem;border:none;cursor:pointer;
  background:transparent;color:#cdd9ee;
  padding:.55rem .9rem;border-radius:8px 8px 0 0;
  flex:none;white-space:nowrap;
}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--navy);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.tab-panel[aria-busy="true"]{opacity:.55;pointer-events:none;transition:opacity .15s ease;}

.app-main{
  max-width:1400px;margin-inline:auto;
  padding:1.1rem clamp(.9rem,3vw,1.6rem) 4rem;
  width:100%;
}

/* ---------- generic bits ---------- */
.card{
  background:var(--white);border:2px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1rem;
}
.card h3{margin-bottom:.6rem;}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;}
.grow{flex:1;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;}
.right{margin-left:auto;}

.badge{
  display:inline-block;font-size:.75rem;font-weight:700;
  padding:.15rem .55rem;border-radius:99px;
  background:#e8edf5;color:var(--navy);white-space:nowrap;
}
.badge.red{background:#ffe1e1;color:var(--red-dark);}
.badge.green{background:#dff2e2;color:#1c7c33;}
.badge.yellow{background:#fff3c4;color:#7a5c00;}
.badge.navy{background:var(--navy);color:#fff;}

.btn-sm{padding:.5rem .9rem;font-size:.85rem;}
.btn-xs{padding:.3rem .6rem;font-size:.75rem;box-shadow:2px 2px 0 rgba(12,63,134,.25);}
.btn-danger{
  background:var(--white);border-color:var(--red);color:var(--red);
  box-shadow:2px 2px 0 rgba(255,49,49,.25);
}
@media (hover:hover){
  .btn-danger:hover{background:var(--red);color:#fff;box-shadow:4px 4px 0 rgba(255,49,49,.25);}
}

.table-wrap{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--white);}
table.data th{
  text-align:left;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.05em;font-size:.75rem;color:var(--navy);
  padding:.6rem .7rem;border-bottom:2px solid var(--navy);white-space:nowrap;
}
table.data td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;}
@media (hover:hover){
  table.data tr:hover td{background:#f2f5fa;}
}

/* stacked "card" tables on small screens — add .stack + data-label on cells */
@media (max-width:700px){
  table.data.stack{font-size:.9rem;border-collapse:separate;}
  table.data.stack thead{display:none;}
  table.data.stack tbody,table.data.stack tr,table.data.stack td{display:block;width:100%;}
  table.data.stack tr{
    border:2px solid var(--line);border-radius:10px;background:var(--white);
    padding:.3rem .8rem;margin-bottom:.6rem;
  }
  table.data.stack td{
    display:flex;gap:.8rem;align-items:baseline;justify-content:space-between;
    border-bottom:1px solid #eef1f6;padding:.5rem 0;text-align:right;
  }
  table.data.stack tr > td:last-child{border-bottom:none;}
  table.data.stack td::before{
    content:attr(data-label);
    font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
    font-size:.72rem;color:var(--muted);flex:none;text-align:left;
  }
  table.data.stack td .row{flex:1;justify-content:flex-end;}
  /* leading "title" cell: full-width, no label */
  table.data.stack td.stack-title{display:block;text-align:left;font-size:1rem;}
  table.data.stack td.stack-title::before{content:none;}
  /* unlabelled cells = action rows: buttons share the full width */
  table.data.stack td:not([data-label]):not(.stack-title){justify-content:flex-end;align-items:center;}
  table.data.stack td:not([data-label]):not(.stack-title)::before{content:none;}
  table.data.stack td:not([data-label]):not(.stack-title) .btn{flex:1;}
  table.data.stack tr.empty{border-style:dashed;}
  table.data.stack tr.empty td{justify-content:center;text-align:center;}
  table.data.stack tr.empty td::before{content:none;}
}

.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.2rem;}
.stat-card{
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1rem;
}
.stat-card .num{font-family:var(--font-display);font-size:1.9rem;color:var(--navy);line-height:1.1;}
.stat-card .lbl{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.stat-card.hot .num{color:var(--red);}

.progress{
  height:10px;border-radius:99px;background:#e4e9f1;overflow:hidden;min-width:80px;
}
.progress > span{display:block;height:100%;background:var(--navy);border-radius:99px;}
.progress.good > span{background:var(--st-done);}
.progress.warm > span{background:var(--yellow);}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--navy-deep);color:#fff;font-weight:700;
  padding:.8rem 1.3rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35);
  z-index:400;max-width:92vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
#toast.show{opacity:1;}
#toast.err{background:var(--red-dark);}

/* ---------- HQ map / turf builder ---------- */
.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;}
.hq-map{
  height:min(72vh,760px);border-radius:var(--radius);
  border:2.5px solid var(--navy);z-index:0;background:#dfe8f2;
  -webkit-tap-highlight-color:transparent;
}
.builder-side{display:flex;flex-direction:column;gap:.9rem;min-width:0;}
.side-close{display:none;}
.builder-toolbar{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  margin-bottom:.6rem;
}
.mode-group{display:flex;border:2px solid var(--navy);border-radius:8px;overflow:hidden;}
.mode-group button{
  border:none;background:var(--white);color:var(--navy);
  font-weight:700;font-size:.82rem;padding:.5rem .8rem;cursor:pointer;
}
.mode-group button+button{border-left:2px solid var(--navy);}
.mode-group button[aria-pressed="true"]{background:var(--navy);color:#fff;}

/* filters popover */
.filter-pop{position:relative;}
.filter-pop summary{
  list-style:none;cursor:pointer;user-select:none;
  border:2px solid var(--navy);border-radius:8px;background:var(--white);
  color:var(--navy);font-weight:700;font-size:.82rem;padding:.5rem .8rem;
}
.filter-pop summary::-webkit-details-marker{display:none;}
.filter-pop[open] summary{background:var(--navy);color:#fff;}
.filter-pop .filter-body{
  position:absolute;top:calc(100% + 6px);left:0;z-index:150;
  background:var(--white);border:2px solid var(--navy);border-radius:10px;
  padding:.8rem .9rem;display:flex;flex-direction:column;gap:.55rem;
  min-width:250px;box-shadow:4px 4px 0 rgba(12,63,134,.2);
}

/* mobile save bar + bottom sheet */
.builder-fab{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:240;
  background:var(--navy);color:#fff;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  align-items:center;gap:.8rem;justify-content:space-between;
  border-top:3px solid var(--yellow);
}
.builder-fab .fab-count{font-weight:800;font-size:.9rem;}
.builder-fab .fab-count .num{font-family:var(--font-display);font-size:1.35rem;margin-right:.35rem;color:var(--yellow);}
.side-backdrop{position:fixed;inset:0;background:rgba(7,36,81,.55);z-index:245;display:none;}

@media (max-width:960px){
  .builder-layout{grid-template-columns:1fr;}
  #panel-builder{padding-bottom:4.5rem;}
  .hq-map{height:calc(100vh - 330px);height:calc(100dvh - 330px);min-height:340px;}
  .builder-fab{display:flex;}
  .side-backdrop.open{display:block;}
  .builder-side{
    position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:var(--paper);border-radius:18px 18px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.3);
    max-height:82vh;overflow-y:auto;
    padding:.9rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
    transform:translateY(105%);transition:transform .22s ease;
  }
  .builder-side.open{transform:translateY(0);}
  .side-close{
    display:block;margin-left:auto;border:none;background:none;
    font-weight:800;font-size:.95rem;color:var(--navy);cursor:pointer;padding:.3rem .4rem;
  }
}
@media (pointer:coarse){
  .mode-group button{padding:.7rem 1rem;font-size:.9rem;}
  .filter-pop summary{padding:.7rem 1rem;font-size:.9rem;}
  /* global touch-target sizing */
  .btn-sm{padding:.7rem 1rem;font-size:.9rem;}
  .btn-xs{padding:.55rem .85rem;font-size:.82rem;}
  .tabs button{padding:.75rem 1rem;font-size:.9rem;}
  .app-user button{padding:.5rem .6rem;}
  /* 16px inputs stop iOS zoom-on-focus */
  select.ctl,input.ctl,textarea.ctl{font-size:16px;min-height:44px;padding:.55rem .7rem;}
}
select.ctl, input.ctl{
  border:2px solid #b8c2d2;border-radius:8px;background:var(--white);
  font-family:var(--font-body);font-size:.9rem;padding:.45rem .6rem;color:var(--ink);
}
/* .ctl controls inside .field wrappers: full-width, consistent sizing */
.field input.ctl,.field select.ctl,.field textarea.ctl{
  width:100%;font-size:1rem;padding:.6rem .7rem;
}

/* ---------- compact form grid (HQ create forms) ---------- */
.form-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem 1rem;
  align-items:end;margin-bottom:.6rem;
}
.form-grid .field{margin-bottom:.4rem;}
.form-grid .field label{font-size:.85rem;margin-bottom:.3rem;}
.form-grid .fg-wide{grid-column:span 2;}
.form-grid .fg-full{grid-column:1/-1;}
.form-actions{display:flex;gap:.75rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .form-actions .btn{flex:1 1 auto;}
}

/* rows that should stack their inputs full-width on phones */
@media (max-width:700px){
  .row.stack-sm > input.ctl,.row.stack-sm > select.ctl{flex:1 1 100%;}
  .row.stack-sm > .btn{flex:1 1 auto;}
}

.import-block{margin-top:1rem;}

/* survey question editor */
.q-card{padding:.7rem .8rem;}
.q-card .q-text{width:100%;margin-bottom:.5rem;}
.q-controls{display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;}
.q-controls .q-type{flex:1;min-width:150px;}
.q-card .q-opts{width:100%;}
.sel-summary{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:.9rem 1rem;
}
.sel-summary .num{font-family:var(--font-display);font-size:1.7rem;}
.turf-list{max-height:46vh;overflow-y:auto;}
.turf-item{
  border:2px solid var(--line);border-radius:8px;background:var(--white);
  padding:.6rem .75rem;margin-bottom:.5rem;cursor:pointer;
}
@media (hover:hover){
  .turf-item:hover{border-color:var(--navy);}
}
.turf-item:active{transform:scale(.99);}
.turf-item.active{border-color:var(--red);box-shadow:3px 3px 0 rgba(255,49,49,.25);}
.turf-item .name{font-weight:700;color:var(--navy);}
.turf-item .meta{font-size:.8rem;color:var(--muted);display:flex;gap:.6rem;align-items:center;margin-top:.25rem;}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:.5rem;}
.legend span::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:.35rem;vertical-align:-1px;background:var(--dot,#888);
}

/* ---------- field app ---------- */
body.field-mode{background:var(--paper);}
.field-main{max-width:680px;margin-inline:auto;padding:0 .8rem 6rem;width:100%;}
.map-wrap{position:relative;margin:.8rem 0;}
.field-map{
  height:38vh;border-radius:var(--radius);border:2.5px solid var(--navy);
  z-index:0;background:#dfe8f2;-webkit-tap-highlight-color:transparent;
}
.map-ctls{
  position:absolute;top:10px;right:10px;z-index:50;
  display:flex;flex-direction:column;gap:.5rem;
}
.map-ctls button{
  width:44px;height:44px;border-radius:10px;cursor:pointer;
  border:2px solid var(--navy);background:var(--white);color:var(--navy);
  font-size:1.15rem;line-height:1;box-shadow:2px 2px 0 rgba(12,63,134,.25);
}
.map-ctls button[aria-pressed="true"]{background:var(--navy);color:#fff;}
.map-wrap.expanded{position:fixed;inset:0;z-index:300;margin:0;background:var(--paper);}
.map-wrap.expanded .field-map{height:100%;border-radius:0;border:none;}
.map-wrap.expanded .map-ctls{top:calc(10px + env(safe-area-inset-top));}
.sync-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:700;padding:.25rem .7rem;border-radius:99px;
  background:#dff2e2;color:#1c7c33;
}
.sync-pill.pending{background:#fff3c4;color:#7a5c00;}
.sync-pill.offline{background:#ffe1e1;color:var(--red-dark);}

.turf-card{
  display:block;background:var(--white);border:2.5px solid var(--navy);
  border-radius:var(--radius);box-shadow:var(--shadow-pop);
  padding:1rem 1.1rem;margin:.9rem 0;cursor:pointer;color:inherit;text-decoration:none;
}
.turf-card h3{color:var(--navy);margin-bottom:.35rem;}

.street-group{margin-bottom:1rem;}
.street-group > h4{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
  color:var(--navy);font-size:.9rem;margin:.9rem 0 .4rem;
  position:sticky;top:52px;background:var(--paper);padding:.3rem 0;z-index:5;
  display:flex;align-items:center;gap:.6rem;
}
.street-group > h4 .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seg-prog{max-width:90px;min-width:56px;height:8px;}
.seg-count{font-family:var(--font-body);font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:0;}
.door-row{
  display:flex;align-items:center;gap:.7rem;
  background:var(--white);border:2px solid var(--line);border-radius:10px;
  padding:.65rem .8rem;margin-bottom:.45rem;cursor:pointer;
}
.door-row:active{transform:scale(.995);}
.door-row .addr{font-weight:700;flex:1;min-width:0;}
.door-row .status-dot{
  width:14px;height:14px;border-radius:50%;flex:none;background:#c9d3e0;
}
.door-row[data-r="contacted"] .status-dot{background:var(--st-done);}
.door-row[data-r="no_answer"] .status-dot{background:var(--st-noanswer);}
.door-row[data-r="refused"] .status-dot{background:var(--st-refused);}
.door-row[data-r="inaccessible"] .status-dot,
.door-row[data-r="moved"] .status-dot,
.door-row[data-r="vacant"] .status-dot{background:var(--st-other);}
.door-row .flags{font-size:.9rem;}

/* door sheet (bottom modal) */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(7,36,81,.55);z-index:200;
  display:none;
}
.sheet-backdrop.open{display:block;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:201;
  background:var(--white);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
  max-height:88vh;overflow-y:auto;
  padding:1rem 1rem 1.4rem;
  transform:translateY(105%);transition:transform .22s ease;
}
.sheet.open{transform:translateY(0);}
.sheet h3{color:var(--navy);margin-bottom:.2rem;}
.sheet .sub{color:var(--muted);font-size:.9rem;margin-bottom:.9rem;}

/* shared confirm/prompt dialogs (app.js confirmSheet/promptSheet/choiceSheet) */
.sheet-backdrop.dialog{z-index:320;}
.sheet.dialog{z-index:321;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));}
.sheet.dialog .sub{white-space:pre-wrap;}
.dialog-actions{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap;}
.dialog-actions .btn{flex:1;padding:.85rem 1rem;font-size:.95rem;white-space:nowrap;}
.dialog-input{width:100%;}
@media (min-width:701px){
  .sheet.dialog{
    left:50%;right:auto;top:50%;bottom:auto;
    width:min(480px,92vw);border-radius:14px;
    border:2.5px solid var(--navy);
    transform:translate(-50%,-46%);opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .sheet.dialog.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto;}
}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:1rem;}
.result-btn{
  border:2.5px solid var(--navy);border-radius:12px;background:var(--white);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:1rem;color:var(--navy);padding:1rem .5rem;cursor:pointer;
}
.result-btn[aria-pressed="true"]{background:var(--navy);color:#fff;}
.result-btn.good[aria-pressed="true"]{background:var(--st-done);border-color:var(--st-done);}
.result-btn.bad[aria-pressed="true"]{background:var(--st-refused);border-color:var(--st-refused);}
.support-row{display:flex;gap:.45rem;margin:.5rem 0 1rem;}
.support-row button{
  flex:1;border:2px solid #b8c2d2;border-radius:10px;background:var(--white);
  font-weight:800;font-size:1.05rem;padding:.75rem 0;cursor:pointer;color:var(--ink);
}
.support-row button[aria-pressed="true"]{background:var(--yellow);border-color:var(--navy);color:var(--navy-deep);}
.toggle-row{display:flex;gap:.55rem;margin-bottom:1rem;flex-wrap:wrap;}
.toggle-chip{
  border:2px solid #b8c2d2;border-radius:99px;background:var(--white);
  font-weight:700;font-size:.9rem;padding:.55rem 1rem;cursor:pointer;color:var(--ink);
}
.toggle-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.sheet .field textarea{min-height:4.5rem;}
.sheet .save-row{display:flex;gap:.6rem;margin-top:.4rem;}
.sheet .save-row .btn{flex:1;}
.survey-q{margin-bottom:1rem;}
.survey-q .q-label{font-weight:700;margin-bottom:.4rem;}
.chip-opts{display:flex;gap:.45rem;flex-wrap:wrap;}

.fab-status{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:150;
}

/* unit picker inside buildings */
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.45rem;margin:.6rem 0 1rem;}
.unit-btn{
  border:2px solid var(--line);border-radius:10px;background:var(--white);
  font-weight:700;padding:.7rem .2rem;cursor:pointer;font-size:.9rem;color:var(--ink);
}
.unit-btn[data-r="contacted"]{border-color:var(--st-done);background:#dff2e2;}
.unit-btn[data-r="no_answer"]{border-color:var(--st-noanswer);background:#fff3c4;}
.unit-btn[data-r="refused"]{border-color:var(--st-refused);background:#ffe1e1;}
.unit-btn[data-r="inaccessible"],.unit-btn[data-r="moved"],.unit-btn[data-r="vacant"]{background:#e8edf5;}

/* ---------- login ---------- */
.login-wrap{max-width:440px;margin:8vh auto;padding:0 1rem;}
.login-wrap .form-card{background:var(--white);border:2.5px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:1.6rem;}
.code-input{
  font-size:1.8rem;letter-spacing:.5em;text-align:center;font-weight:800;
}

/* ---------- activity feed ---------- */
.feed{max-height:60vh;overflow-y:auto;}
.feed-item{
  display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);
  font-size:.9rem;align-items:baseline;
}
.feed-item .when{color:var(--muted);font-size:.78rem;white-space:nowrap;}
.feed-item .res{font-weight:700;}

@media (max-width:640px){
  .result-grid{grid-template-columns:1fr 1fr;}
  .app-title{font-size:.9rem;}
}