/* Roles: the Companies and Saved pages. Only what these two pages add. The tokens, the top bar, the buttons, the fields, the note, the toast and the dialog come from app.css by name; the chips from viz.css. */
.page{min-height:100%;display:flex;flex-direction:column}
.pg{display:grid;gap:14px;align-content:start;padding:16px 24px 40px;min-width:0}
.pg h1{margin:0;font-size:26px;line-height:32px}
.lede{margin:0;color:var(--ink2);font-size:14px;line-height:20px}
.lede b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the kinds switch and the search box on one row */
.pgbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.kinds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pgbar .search{width:min(280px,100%)}
/* the selected group's definition, one line under the bar (the same sentence is each button's title); a group with no company keeps its place, dimmed */
.kinddef{margin:-6px 0 0;min-height:18px;color:var(--ink3);font-size:13px;line-height:18px}
.kinds .btn.none:not(.active),.kinds .btn.none:not(.active) .badge{color:var(--ink3)}
.btn.sm{height:24px;padding:0 8px;font-size:12px}

/* a card of rows: the company table on Companies, the three lists on Saved */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.cotable{width:100%;border-collapse:collapse}
.cotable th{height:34px;padding:0 10px;background:var(--bg2);border-bottom:1px solid var(--line);color:var(--ink3);font-size:12px;font-weight:600;text-align:left;white-space:nowrap}
.cotable td{padding:6px 10px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle;font-size:13px;line-height:18px}
.cotable tbody tr:hover{background:var(--row-hover)}
.cotable tbody tr:last-child td{border-bottom:0}
.cotable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cotable td.tfact{white-space:nowrap}
.cotable .dim{color:var(--ink3)}
.cotable .tstar{width:44px;padding:0 4px;text-align:center}
.cotable .star{width:36px;height:36px;padding:0;border-radius:6px}
.cotable .star:hover{background:var(--bg2);color:var(--ink)}
.cotable .star.on:hover{color:var(--good)}
/* the Exclude or Restore button beside the star; the fact that filed a company in the selected group, one line under its name */
.cotable .tact{width:1%;padding:0 6px 0 0;white-space:nowrap}
.why{margin-top:2px;color:var(--ink3);font-size:12px;line-height:16px}
.coname{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--ink);font-weight:500;min-width:0}
.coname>span:first-of-type{overflow-wrap:anywhere}
.coname .viz-chips{margin-left:0}
.coname a{color:var(--ink)}
/* the company's mark: a 20px plate on white so a dark glyph reads on the cyanotype ground; hidden when it fails to load */
.mark{display:inline-block;width:20px;height:20px;padding:2px;border-radius:4px;background:#FFF;object-fit:contain;flex:none;vertical-align:top}
.emptyline{padding:16px 14px;color:var(--ink3);font-size:13px;line-height:18px}

/* Saved: three sections */
.sec{display:grid;gap:10px;min-width:0}
.sec h2{margin:0;font-size:20px;line-height:26px}
.sechead{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.sechead .lede{font-size:13px;color:var(--ink3)}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow:hover{background:var(--row-hover)}
.vmain{display:grid;gap:3px;min-width:0}
.vname{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--ink);font-weight:600;font-size:14px;line-height:20px;overflow-wrap:anywhere}
.vname a{color:var(--ink);text-decoration:none}
.vname a:hover{text-decoration:underline}
.vsum{color:var(--ink3);font-size:12px;line-height:16px;overflow-wrap:anywhere}
.vact{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.tagc{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink2);font-size:11px;font-weight:600;white-space:nowrap}
.tagc.closed{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
/* the stars this browser holds and the account does not: a note row above the list */
.only{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--note-bg);color:var(--ink);font-size:13px;line-height:18px}
.only b{font-weight:600;font-variant-numeric:tabular-nums}
.only .dim{color:var(--ink3)}
.dlg .row2.end{justify-content:flex-end}
@media(prefers-reduced-motion:no-preference){.cotable tbody tr,.vrow,.star{transition:background .12s,color .12s}}

/* phone: 16px gutters; the table becomes one card per row with the star at the left and the Exclude or Restore button at the right; a saved view stacks its actions under the words */
@media(max-width:720px){
  .pg{padding:12px 16px 32px;gap:12px}
  .pg h1{font-size:24px;line-height:30px}
  .pgbar .search{width:100%}
  .cotable thead{display:none}
  .cotable,.cotable tbody,.cotable tr,.cotable td{display:block}
  .cotable tr{position:relative;padding:10px 12px 10px 54px;border-bottom:1px solid var(--line)}
  .cotable tbody tr:last-child{border-bottom:0}
  .cotable td{padding:0;border:0;font-size:14px;line-height:20px}
  .cotable td.tstar{position:absolute;left:6px;top:8px;width:auto;padding:0}
  .cotable .star{width:40px;height:40px}
  .cotable.acts tr{padding-right:96px}
  .cotable td.tact{position:absolute;right:10px;top:9px;width:auto;padding:0}
  .why{margin:4px 0 2px}
  .cotable td.tname{margin-bottom:4px}
  .cotable td.tfact{display:inline;margin-right:12px;font-size:13px;line-height:18px;text-align:left;white-space:normal}
  .cotable td.tfact::before{content:attr(data-l) ": ";color:var(--ink3)}
  .cotable td.tfact.dim{display:none}
  .vrow{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  .vact{justify-content:flex-start}
  .vact .btn{min-height:40px}
  .only{padding:10px 12px}
}