/* faction-file.css - the Factions tab as a registry and a file (1.11.9.124).
   See faction-file.js. Printed on the same machine as the Colony File and the
   Nav Console: moulded green-black housing, phosphor readout, amber legends.
   --acc is the faction's colour and only tints the banner rule, the name, the
   scope and the bars, so the phosphor stays the phosphor. */

.ff{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;font-family:'Share Tech Mono',ui-monospace,monospace;color:#cfe9d6;align-items:start}
.ff-idx,.ff-file{border-radius:9px;background:linear-gradient(180deg,#1b201b,#0a0c0a);
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px #262c26}
.ff-idx{padding:9px 0 8px;position:sticky;top:0}
.ff-plate{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:20px;letter-spacing:.2em;color:#8a6a34;text-shadow:0 1px 0 #000;white-space:nowrap}
.ff-plate b{font-weight:400;font-size:11px}
.ff-plate span{flex:1;text-align:right;font-size:10px;overflow:hidden;text-overflow:ellipsis;color:#7d8f80}
.ff-list{margin:8px 8px 0;border-radius:6px;overflow:hidden;
  background:radial-gradient(circle,rgba(240,180,84,.05) .7px,transparent 1.1px) 0 0/3px 3px,#040604;box-shadow:inset 0 0 0 1px #1d261f}
.ff-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:11px;align-items:center;width:100%;box-sizing:border-box;padding:9px 11px;
  background:none;border:0;border-bottom:1px dotted rgba(124,240,164,.14);color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.ff-row:last-child{border-bottom:0}
.ff-row:hover{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.ff-row.sel{background:color-mix(in srgb,var(--acc) 10%,transparent);box-shadow:inset 3px 0 0 var(--acc)}
.ff-row:focus-visible{outline:1px solid #f0b454;outline-offset:-1px}
.ff-rm{display:flex;width:44px;height:44px}
.ff-rt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ff-rn{font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-rs{font-size:10px;letter-spacing:.12em;color:#7d8f80}
.ff-rns{display:none;font-family:'Doto','Share Tech Mono',monospace;font-weight:700;color:var(--acc);white-space:nowrap}
.ff-tag{font-size:10px;letter-spacing:.12em;padding:4px 7px;border-radius:3px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);white-space:nowrap}
.ff-tag.on{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.ff-tag.gold{color:#ffce4d;border-color:#5a4a1a}
.ff-tag.bad{color:#ff8a7a;border-color:#5a1a1a}
.ff-tag.off{color:#7d8f80;border-color:#2a302a}

.ff-file{padding:9px 16px 14px;min-width:0}
.ff-plate+.ff-banner{margin-top:9px}
.ff-banner{position:relative;height:120px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #000,0 0 0 3px #121612,0 0 0 4px #2c332c}
.ff-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(3,8,5,.85) 0%,rgba(3,8,5,.35) 55%,rgba(3,8,5,0) 100%)}
.ff-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);box-shadow:0 0 12px var(--acc);opacity:.85}
.ff-bmark{position:absolute;right:22px;top:4px;display:flex;opacity:.92}
.ff-bname{position:absolute;left:20px;bottom:20px;right:150px;font-size:30px;letter-spacing:.14em;line-height:1.05;color:var(--acc);
  text-shadow:0 0 14px color-mix(in srgb,var(--acc) 45%,transparent),0 2px 0 #000}

.ff-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;margin-top:14px}
.ff-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.ff-scope{position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,#060806) 0%,#050605 62%,#020302 100%);
  box-shadow:inset 0 0 50px rgba(0,0,0,.9),0 0 0 3px #000,0 0 0 10px #141814,0 0 0 11px #2c332c}
.ff-ring{position:absolute;inset:6%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 40%,transparent)}
.ff-sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 26%,transparent),transparent 22%);animation:ffSweep 6s linear infinite}
@keyframes ffSweep{to{transform:rotate(360deg)}}
.ff-scope .fm-mark{position:relative;z-index:1}
.ff-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#1d261f;border:1px solid #1d261f;border-radius:4px;overflow:hidden}
.ff-kpi{background:#060806;padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ff-kpi span{font-size:9px;letter-spacing:.14em;color:#7d8f80}
.ff-kpi b{font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:19px;color:#f5c26a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-kpi b.warn{color:#f39c12}
.ff-kpi:only-child{grid-column:1 / -1}

.ff-right{min-width:0}
.ff-desc{font-size:13px;line-height:1.55;color:#b8f0c8}
.ff-sec{display:flex;align-items:center;gap:8px;margin:15px 0 6px;font-size:11px;letter-spacing:.18em;color:#f5c26a}
.ff-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(240,180,84,.3),transparent)}
.ff-rw{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dotted rgba(124,240,164,.14);font-size:13px;line-height:1.4}
.ff-bul{color:var(--acc)}
.ff-rw i{font-style:normal;color:#7cf0a4}
.ff-rw b{font-weight:400;font-family:'Doto','Share Tech Mono',monospace;font-size:14px;color:#f5c26a;white-space:nowrap;text-align:right}
.ff-rules{font-size:12.5px;line-height:1.6;color:#9aa89c}
.ff-terr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;font-size:12px}
.ff-wl{display:flex;justify-content:space-between;gap:8px}
.ff-wl em{font-style:normal;font-size:10px;letter-spacing:.1em;color:#f39c12}
.ff-wl span:last-child{color:var(--acc)}
.ff-bar{height:6px;margin-top:3px;border-radius:1px;overflow:hidden;background:#0c120d}
.ff-bar span{display:block;height:100%;background:var(--acc);box-shadow:0 0 6px color-mix(in srgb,var(--acc) 60%,transparent)}
.ff-houses{font-size:12px}
.ff-keys{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.ff-sp{flex:1}
.ff-k{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border:0;border-radius:5px;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.12em;cursor:pointer;
  background:linear-gradient(#262b26,#171a17);color:#f5c26a;box-shadow:0 3px 0 #060706,0 5px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.ff-k:active{transform:translateY(2px);box-shadow:0 1px 0 #060706}
.ff-k.call{background:linear-gradient(#1d3a26,#10241a);color:#42ff7e}
.ff-k.call.off{background:linear-gradient(#3a1d1d,#241010);color:#ff6a6a;cursor:not-allowed}
.ff-k.join{background:color-mix(in srgb,var(--acc) 22%,#0a0c0a);color:var(--acc);box-shadow:0 3px 0 #060706,inset 0 0 0 1px var(--acc)}
.ff-k.gold{background:linear-gradient(#ffd88a,#d8922a);color:#1b1206}
.ff-k.done{cursor:default;color:var(--acc);background:transparent;box-shadow:inset 0 0 0 1px var(--acc)}
.ff-k.off{cursor:default;color:#7d8f80;background:transparent;box-shadow:inset 0 0 0 1px #2a302a}

/* Width comes from the centre column, not the window: on a 1440 screen with
   the chat deck up, the Galaxy tab is about 660px wide. So the breakpoints are
   container queries on #gFactionList. Under 1000px the index folds into a
   strip of keys over the file; under 560px (a phone) the scope goes and the
   file is one column. */
#gFactionList{container-type:inline-size;container-name:ff}
@container ff (max-width:1000px){
  .ff{grid-template-columns:minmax(0,1fr);gap:10px}
  .ff-idx{position:static;padding:8px 0}
  .ff-idx .ff-plate{display:none}
  .ff-list{display:flex;gap:7px;margin:0 8px;overflow-x:auto;background:none;box-shadow:none;scrollbar-width:none}
  .ff-list::-webkit-scrollbar{display:none}
  .ff-row{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 0 86px;min-width:86px;width:auto;padding:8px 4px 6px;border:0;border-radius:6px;
    background:linear-gradient(#262b26,#171a17);box-shadow:0 3px 0 #060706}
  .ff-row.sel{background:color-mix(in srgb,var(--acc) 14%,#0a0c0a);box-shadow:0 3px 0 #060706,inset 0 0 0 1px var(--acc)}
  .ff-rm,.ff-rm .fm-mark{width:38px;height:38px}
  .ff-rt{align-items:center}
  .ff-rn{display:none}
  .ff-rns{display:block;font-size:11px;letter-spacing:.06em}
  .ff-rs{font-size:9px}
  .ff-tag{display:none}
  .ff-body{grid-template-columns:190px minmax(0,1fr)}
}
@container ff (max-width:560px){
  .ff-rs{display:none}
  .ff-row{flex:0 0 74px;min-width:74px}
  .ff-file{padding:8px 10px 12px}
  .ff-banner{height:104px}
  .ff-bmark .fm-mark{width:90px;height:90px}
  .ff-bname{font-size:21px;left:14px;bottom:14px;right:100px}
  .ff-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .ff-scope{display:none}
  .ff-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ff-rw{font-size:12.5px}
  .ff-terr{grid-template-columns:minmax(0,1fr)}
  .ff-keys .ff-k{flex:1;height:46px}
  .ff-sp{display:none}
}
@media (prefers-reduced-motion:reduce){ .ff-sweep{animation:none} }