/* DG portal shell - dark design system.
   The DG portal is dark by default. The visual system here is lifted verbatim
   from the DG Command Center design handover
   (design_handoff_command_center/command-center/cc/styles.css), which is built
   on the Digital Giant design tokens (colors_and_type.css): a dark surface
   ladder, GT Cinetype with mono for chrome labels and data, Bold+Light title
   pairs, hairline dividers, hard edges, and yellow (#FFE000) as the single
   accent. Token values and component styling are the handover's, not
   re-derived. The brandmark is the grey-bar lockup (logo-dg-default.svg): grey
   by default, per the DG brand rule (black only when set on a grey surface). */

@font-face { font-family:"GT Cinetype"; src:url("./assets/fonts/GT-Cinetype-Light.woff2") format("woff2"),url("./assets/fonts/GT-Cinetype-Light.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Cinetype"; src:url("./assets/fonts/GT-Cinetype-Regular.woff2") format("woff2"),url("./assets/fonts/GT-Cinetype-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Cinetype"; src:url("./assets/fonts/GT-Cinetype-Bold.woff2") format("woff2"),url("./assets/fonts/GT-Cinetype-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"GT Cinetype Mono"; src:url("./assets/fonts/GT-Cinetype-Mono.woff2") format("woff2"),url("./assets/fonts/GT-Cinetype-Mono.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --font-sans:"GT Cinetype",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"GT Cinetype Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* dark surface ladder (handover) */
  --bg:#0A0A0A; --panel:#121212; --panel-2:#171717; --panel-3:#1C1C1C;
  --line:#242424; --line-soft:#1A1A1A;
  --text:#FFFFFF; --muted:#A6A6A6; --muted-2:#7D7D7D; --muted-3:#4A4A4A;
  --accent:#FFE000; --track:#1E1E1E;

  --font:var(--font-sans); --mono:var(--font-mono);
  --ease:cubic-bezier(0.2,0,0.2,1); --r:3px;
  --pad:24px; --gap:16px; --panel-pad:20px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);
  font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:16px;line-height:1.5;}
body{min-height:100vh;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.u{text-transform:uppercase;letter-spacing:.14em;}
.mono{font-family:var(--mono);letter-spacing:.02em;}
button{font-family:var(--font);cursor:pointer;color:inherit;}
input,select,textarea{font-family:var(--font);}
::selection{background:var(--accent);color:#0A0A0A;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.hidden{display:none !important;}

/* overline / title pair - the DG vernacular */
.overline{display:inline-block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);}
.title-pair{line-height:1.08;letter-spacing:-.01em;}
.title-pair b{font-weight:700;font-size:34px;}
.title-pair span{font-weight:300;font-size:34px;color:var(--muted);}

/* ============ top keyline + app chrome ============ */
.topbar{height:3px;background:var(--accent);position:sticky;top:0;z-index:40;}
.appbar{background:#0d0d0d;border-bottom:1px solid var(--line);position:sticky;top:3px;z-index:30;}
.appbar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;}
.wordmark{display:flex;align-items:center;gap:12px;}
.wordmark .lockup{height:15px;width:auto;display:block;}
.wordmark .cc{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.18em;padding-left:12px;border-left:1px solid var(--line);}
.identity{display:flex;align-items:center;gap:16px;}
.identity .uid{font-family:var(--mono);font-size:12px;color:var(--muted);}
.badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  padding:4px 9px;border-radius:var(--r);border:1px solid;}
.badge.internal{color:var(--accent);border-color:#4a4400;}
.badge.external{color:var(--muted);border-color:var(--line);}
.signout{background:none;border:none;color:var(--muted);font-size:13px;text-decoration:underline;
  text-underline-offset:.18em;transition:color var(--ease) .13s;}
.signout:hover{color:var(--text);}

/* ============ top tab bar (admin) ============ */
.tabbar{display:flex;align-items:stretch;gap:2px;padding:0 28px;background:#0d0d0d;
  border-bottom:1px solid var(--line);position:sticky;top:calc(3px + 57px);z-index:20;
  overflow-x:auto;scrollbar-width:none;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbar button{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;background:none;
  border:none;color:var(--muted);font-size:14px;padding:13px 18px;position:relative;
  transition:color var(--ease) .13s;}
.tabbar button .vn{font-family:var(--mono);font-size:10px;color:var(--muted-2);}
.tabbar button:hover{color:var(--text);}
.tabbar button.active{color:var(--text);}
.tabbar button.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);}
.tabbar button.active .vn{color:var(--accent);}
.tabbar-note{margin-left:auto;align-self:center;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);padding-left:16px;}

/* ============ body layout ============ */
.content{padding:var(--pad) 28px 80px;max-width:1180px;margin:0 auto;}
.viewhead{margin:8px 0 24px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  margin:34px 0 16px;gap:14px;}
.section-head .count{font-family:var(--mono);font-size:11px;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.1em;}
.stack{display:flex;flex-direction:column;gap:var(--gap);}
.grid{display:grid;gap:var(--gap);}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

/* ============ panel / card ============ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--panel-pad);}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--panel-pad);
  display:flex;flex-direction:column;gap:12px;min-height:150px;transition:border-color var(--ease) .15s;}
.card:hover{border-color:#333;}
.card .spacer{flex:1;}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.kicker{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin-bottom:2px;}
.card-title,.card h3{font-weight:700;font-size:17px;line-height:1.25;}
.card-sub{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5;font-weight:300;}

/* ============ tags ============ */
.tag{display:inline-block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;padding:3px 8px;border:1px solid var(--line);border-radius:var(--r);color:var(--muted);}
.tag.walled{color:var(--text);border-color:var(--muted-3);}
.tag.on{color:var(--accent);border-color:#4a4400;}
.tag.warn{color:#c98a00;border-color:#4a2c00;}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:9px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:transparent;color:var(--text);transition:all var(--ease) .13s;
  letter-spacing:.01em;}
.btn:hover{border-color:#3a3a3a;background:var(--panel-2);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0A0A0A;font-weight:700;}
.btn.primary:hover{background:#ffe92e;}
.btn.ghost{background:transparent;}
.btn:disabled{opacity:.4;cursor:default;}
.btn.sm{font-size:12px;padding:7px 12px;}
.btn.block{width:100%;justify-content:center;}
.btn.danger{border-color:#4a2c00;color:var(--muted);}
.btn.danger:hover{border-color:#7a4a00;color:var(--text);background:#1a1206;}
.linkbtn{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;
  text-underline-offset:.18em;transition:color var(--ease) .13s;}
.linkbtn:hover{color:var(--text);}

/* ============ fields ============ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.field .hint{font-size:11.5px;color:var(--muted-2);font-weight:300;}
.input,input.input,select.input,select{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);font-size:13.5px;padding:9px 12px;width:100%;
  transition:border-color var(--ease) .13s;}
.input:focus,select:focus{border-color:var(--accent);outline:none;}
select.input,select{appearance:none;-webkit-appearance:none;cursor:pointer;}
.input::placeholder{color:var(--muted-3);}
.input.code{font-family:var(--mono);font-size:22px;letter-spacing:.3em;text-align:center;padding:12px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.row .grow{flex:1 1 auto;}

/* ============ notices / async states ============ */
.notice{border:1px solid var(--line);background:var(--panel-2);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:12px 14px;font-size:13px;color:var(--text);margin-bottom:14px;}
.notice.error{border-color:#4a2c00;border-left-color:#c98a00;background:#1a1206;}
.notice .m{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px;}
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);padding:56px 28px;gap:12px;min-height:200px;}
.state .headline{font-weight:700;font-size:17px;color:var(--text);}
.state .st-body,.state>div:not(.headline){font-size:13.5px;color:var(--muted);max-width:420px;
  line-height:1.55;font-weight:300;}
.state .mono{font-family:var(--mono);font-size:11px;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.12em;}
.spinner,.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px;}
.state .spinner{width:26px;height:26px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spin,.spinner{animation-duration:2s;}}

/* skeleton cards while a section loads */
.skeleton{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);min-height:150px;}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.045),transparent);
  animation:sweep 1.2s linear infinite;}
@keyframes sweep{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;}}

/* ============ tables (admin registry lists) ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl td{padding:12px;border-bottom:1px solid var(--line-soft);font-weight:300;vertical-align:middle;}
.tbl td.mono{font-family:var(--mono);font-size:12px;color:var(--muted);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .12s;}
.tbl tbody tr:hover td{background:#0f0f0f;}
.tbl .t-name{color:var(--text);}
.tbl .t-sub{font-size:11px;color:var(--muted-2);margin-top:4px;}

/* ============ admin: inline property editor ============ */
.edtr > td{background:#0e0e0e;padding:0 !important;}
.editor{padding:18px 16px 16px;}
.ed-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
.ed-left{min-width:0;}
.ed-right{min-width:0;display:flex;flex-direction:column;gap:16px;}
.editor textarea.input{resize:vertical;min-height:64px;line-height:1.5;}
.poster-box{width:100%;max-width:240px;aspect-ratio:16/10;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;
  overflow:hidden;margin-bottom:8px;}
.poster-box img{width:100%;height:100%;object-fit:cover;display:block;}
.poster-box .ip-glyph{font-family:var(--mono);font-size:22px;color:var(--muted-2);letter-spacing:.06em;}
.pick-btn{position:relative;overflow:hidden;display:inline-flex;align-self:flex-start;}
.pick-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.buildblock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;}
.buildblock .bb-line{font-size:12px;color:var(--text);}
.hint{font-size:11.5px;color:var(--muted-2);font-weight:300;line-height:1.45;margin-top:6px;}
/* the audience note under the grant-access row sits a touch lower */
#g-note{margin-top:12px;}
#g-note:empty{display:none;}
.ed-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;
  border-top:1px solid var(--line-soft);padding-top:14px;}
/* people rows inside a tenant editor */
.prow{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line-soft);}
.prow:last-child{border-bottom:none;}
.prow .p-email{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prow .item-date{color:var(--muted-2);}
.prow .p-act{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
@media (max-width:640px){.prow{flex-wrap:wrap;}.prow .p-email{flex:1 1 100%;}}
@media (max-width:900px){.ed-grid{grid-template-columns:1fr;}}

/* grant chips - inline removable pills */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:5px 6px 5px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--text);}
.chip .chip-k{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.chip .chip-x{background:none;border:none;color:var(--muted-2);font-size:14px;line-height:1;
  padding:2px 5px;border-radius:50%;transition:color var(--ease) .13s,background var(--ease) .13s;}
.chip .chip-x:hover{color:#0A0A0A;background:var(--accent);}
.chip .chip-x.arm{width:auto;color:var(--accent);font-family:var(--mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:var(--r);border:1px solid #4a4400;}
.chip .chip-x.arm:hover{color:#0A0A0A;background:var(--accent);}
/* chip body is a button: click to edit the grant's audience */
.chip .chip-main{display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  padding:0;font-size:12px;color:var(--text);font-weight:300;}
.chip .chip-main:hover .chip-aud{color:var(--accent);}
.chip .chip-aud{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.08em;padding-left:8px;border-left:1px solid var(--line);transition:color var(--ease) .13s;}

/* audience picker (give-access flow + per-grant editor) */
.aud-pick{display:flex;flex-direction:column;gap:7px;margin:12px 0 2px;max-width:440px;}
.aud-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);font-weight:300;cursor:pointer;}
.aud-opt input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex:0 0 auto;}
.grant-editor{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:14px;}

/* floating toast: action results pinned to the window, visible from any
   scroll depth. Click dismisses; success self-dismisses, errors linger. */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  max-width:min(560px,90vw);background:#0d0d0d;border:1px solid var(--line);
  border-left:2px solid var(--accent);border-radius:var(--r);padding:11px 16px;
  font-size:13px;color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.6);
  cursor:pointer;animation:toast-in .18s var(--ease);}
.toast.error{border-color:#4a2c00;border-left-color:#c98a00;background:#1a1206;}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}

/* searchable picker: input that filters a long list as you type */
.spick{position:relative;}
.sp-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#0d0d0d;
  border:1px solid var(--line);border-radius:var(--r);max-height:280px;overflow:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.55);}
.sp-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  padding:10px 12px;font-size:13px;color:var(--text);font-weight:300;transition:background var(--ease) .13s;}
.sp-opt:hover{background:var(--panel-2);}
.sp-none{padding:10px 12px;font-family:var(--mono);font-size:11px;color:var(--muted-2);}

/* inline add row (invite / grant) */
.addrow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;
  border-top:1px solid var(--line);padding-top:16px;}
.addrow .field{margin-bottom:0;}
.addrow .field.grow{flex:1 1 180px;}

/* ============ items surface: toolbar, cards, list (D15) ============ */
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 8px;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);}
/* search caps out so a gap opens between it and the filters on wide screens */
.search{flex:1 1 260px;max-width:440px;position:relative;}
.search .input{width:100%;padding-left:34px;}
.filters{margin-left:auto;}
.search::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-7px;
  border:1.5px solid var(--muted-2);border-radius:50%;pointer-events:none;}
.search::after{content:"";position:absolute;left:21px;top:50%;width:6px;height:1.5px;margin-top:3px;
  background:var(--muted-2);transform:rotate(45deg);pointer-events:none;}
.filters{display:flex;gap:6px;flex-wrap:wrap;}
.fchip{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px;
  padding:7px 14px;border-radius:999px;transition:all var(--ease) .13s;letter-spacing:.01em;}
.fchip:hover{border-color:#3a3a3a;color:var(--text);}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#0A0A0A;font-weight:700;}
.viewtoggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.viewtoggle button{background:transparent;border:none;color:var(--muted);font-size:15px;
  padding:7px 12px;line-height:1;transition:all var(--ease) .13s;}
.viewtoggle button:hover{color:var(--text);}
.viewtoggle button.on{background:var(--panel-3);color:var(--text);}

.grid.items{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));}
.item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--ease) .15s;}
.item:hover{border-color:#333;}
.item-top{position:relative;}
.item-poster{aspect-ratio:16/10;display:grid;place-items:center;background:var(--panel-2);
  border-bottom:1px solid var(--line);overflow:hidden;position:relative;}
.item-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.item-poster.mod{background:linear-gradient(135deg,#151505,var(--panel-2));}
.item-poster.con{background:linear-gradient(135deg,#141414,var(--panel-2));}
.item-poster::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;}
.item-poster.mod::after{background:var(--accent);opacity:.55;}
.item-poster.con::after{background:var(--muted-3);}
.item-poster .ip-glyph{font-family:var(--mono);font-size:30px;letter-spacing:.06em;color:var(--muted-2);}
.item-poster.sm{aspect-ratio:auto;width:40px;height:40px;flex:0 0 40px;border-bottom:none;
  border:1px solid var(--line);border-radius:var(--r);}
.item-poster.sm .ip-glyph{font-size:14px;}
.fav{background:none;border:none;color:var(--muted-2);font-size:15px;line-height:1;padding:4px;
  transition:color var(--ease) .13s,transform var(--ease) .13s;}
.fav:hover{color:var(--muted);transform:scale(1.12);}
.fav.on{color:var(--accent);}
.item-top .fav{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(10,10,10,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.item-body{padding:13px 14px 4px;display:flex;flex-direction:column;gap:8px;flex:1;}
.item-name{font-weight:700;font-size:14.5px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.item-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.item-date{color:var(--muted-2);font-size:11px;}
.item-desc{font-size:12px;color:var(--muted);line-height:1.45;font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.item-actions{padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px;}
.item-actionmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:11px;color:var(--muted-2);}
.item-actionmeta .item-version{color:var(--muted);}
.item-actions .btn{width:100%;justify-content:center;}
.item-sk{min-height:236px;}

/* list view - compact: thumb + title on line one, full description beneath
   (never truncated), action on the right, favourite star in the corner. */
.itemlist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);}
.lrow{position:relative;display:flex;align-items:stretch;gap:0;padding:0;min-height:64px;
  border-bottom:1px solid var(--line-soft);transition:background .12s;}
.lrow:last-child{border-bottom:none;}
.lrow:hover{background:#0f0f0f;}
/* thumbnail fills the left edge, flush top to bottom; ~square on desktop rows,
   wider on mobile (see the narrow query) to push the text across. */
.lrow .item-poster.sm{width:64px;flex:0 0 64px;height:auto;align-self:stretch;aspect-ratio:auto;
  border:none;border-right:1px solid var(--line);border-radius:0;}
.lrow .item-poster.sm .ip-glyph{font-size:16px;}
/* body: title block (star + title / description), then badges, then the action
   column (Open with the date locked beneath). Wraps below on narrow widths
   without ever splitting the description from the title. */
.lr-body{flex:1;min-width:0;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:9px 16px;}
.lr-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px;}
.lr-titlerow{display:flex;align-items:center;gap:9px;min-width:0;}
.lr-titlerow .fav{flex:0 0 auto;font-size:14px;}
.lr-name{font-weight:700;font-size:14px;color:var(--text);line-height:1.25;min-width:0;}
.lr-desc{color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.45;}
.lr-badges{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap;}
.lr-action{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;margin-left:auto;}
.lr-actionmeta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted-2);}
.lr-actionmeta .item-version{color:var(--muted);}
@media (max-width:640px){
  .toolbar{gap:10px;}
  /* narrow: wider thumb pushes the text across; badges and the Open/date column
     drop below the title block, with Open/date kept pinned to the right. */
  .lrow .item-poster.sm{width:104px;flex-basis:104px;}
  .lrow .item-poster.sm .ip-glyph{font-size:22px;}
  .lr-badges{order:3;}
  /* Open + date take their own line, centered - reads best and stays balanced
     for longer labels like "Get file" or "Enter site". */
  .lr-action{order:4;margin-left:0;width:100%;align-items:center;}
}

/* ============ login - DG console-boot ============ */
.gate{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;}
.gate .topbar{position:static;}
.gate-stage{flex:1;display:grid;place-items:center;padding:48px 24px 96px;}
.gate-block{width:min(440px,100%);}
.gate-lockup{width:172px;height:auto;display:block;margin-bottom:34px;}
.gate-h{line-height:1.06;}
.gate-h .b{font-weight:700;font-size:42px;letter-spacing:-.01em;}
.gate-h .l{font-weight:300;font-size:42px;letter-spacing:-.01em;color:var(--muted);}
.gate-sys{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted-2);margin:18px 0 30px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.gate-sys .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,224,0,.5);animation:pulse 2.4s var(--ease) infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,224,0,.45);}70%{box-shadow:0 0 0 6px rgba(255,224,0,0);}100%{box-shadow:0 0 0 0 rgba(255,224,0,0);}}
@media (prefers-reduced-motion:reduce){.gate-sys .dot{animation:none;}}
.gate-form{border-top:1px solid var(--line);padding-top:26px;display:flex;flex-direction:column;gap:2px;}
.gate-form .btn.primary{margin-top:8px;padding:12px;}
.gate-demo{margin-top:22px;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-3);}

/* page chrome - the DG layout signature (bottom rail) */
.gate-chrome{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:18px 28px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted-2);}
.gate-chrome .gc-left{display:flex;align-items:center;gap:14px;}
.gate-chrome .gc-lockup{width:78px;height:auto;display:block;opacity:.8;}
.gate-chrome .gc-cap{text-transform:uppercase;}
.gate-chrome .gc-date{color:var(--muted-3);}
/* digital-giant.com's bottom row, modulated: the way home on the left, the
   office clocks on the right (Spec H). */
.gate-chrome .gc-nav{display:flex;flex-direction:column;gap:4px;}
.gate-chrome .gc-nav a{color:var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;}
.gate-chrome .gc-nav a:hover{color:var(--muted-2);}
.gate-chrome .gc-clocks{display:flex;gap:26px;}
.gate-chrome .gc-clock{display:flex;flex-direction:column;gap:3px;}
.gate-chrome .gc-city{text-transform:none;color:var(--ink);letter-spacing:.02em;font-family:var(--sans);font-size:12px;}
.gate-chrome .gc-time{color:var(--muted-2);font-family:var(--sans);font-size:15px;font-weight:300;}

@media (max-width:640px){
  .title-pair b,.title-pair span{font-size:26px;}
  .gate-h .b,.gate-h .l{font-size:32px;}
  .appbar-in{padding:12px 16px;flex-wrap:wrap;}
  .tabbar{padding:0 16px;}
  .content{padding:18px 16px 60px;}
  .gate-chrome{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:14px 22px;padding:14px 16px;}
  .gate-chrome .gc-left{order:3;width:100%;}
  .gate-stage{padding-bottom:150px;}
  .addrow{flex-direction:column;align-items:stretch;}
}