/* ALLIANCE: the alliance's file on paper (css/dossier.css), and for your own alliance the chat on a rugged field tablet
   lying on the sheet beside the alliance's name, its right end off the paper. The tablet is a Krea render
   (assets/dossier/tablet.webp: tools/gen_dossier.sh, tools/prep_dossier.py) drawn as a border image sliced at its black
   screen (56 80 69 76 px of the 920 px image), --s the scale it is drawn at, so on phones the screen can be taller. */
#pg-ally{container:page/size}
.comms{--s:.5217;position:relative;z-index:2;width:480px;aspect-ratio:1.8192;box-sizing:border-box;align-self:start;margin:-6px -150px 0 0;transform:rotate(2.2deg);
  border-style:solid;border-color:transparent;border-width:calc(56px * var(--s)) calc(80px * var(--s)) calc(69px * var(--s)) calc(76px * var(--s));
  border-image:url(../assets/dossier/tablet.webp) 56 80 69 76 stretch;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.c-scr{--g:#7dff5f;--g2:#4fd236;--g3:#2b7d22;--glow:0 0 6px rgba(125,255,95,.6);position:relative;height:100%;border-radius:10px;
  overflow:hidden;container-type:size;color:var(--g);text-shadow:var(--glow);background:radial-gradient(ellipse at 50% 45%,#0b2a0c 0%,#041306 60%,#010501 100%)}
.c-scr::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.c-scr::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 28px rgba(0,0,0,.85),inset 0 0 6px rgba(125,255,95,.18)}
.c-ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:6px 10px;font:clamp(15px,4.4cqw,19px)/1.1 'VT323',var(--f-lcd),monospace}
.c-top{display:flex;justify-content:space-between;gap:10px;padding-bottom:.3em;border-bottom:2px solid var(--g);letter-spacing:1px;white-space:nowrap}
.c-top span:last-child{color:var(--g2)}
.aChatLog{flex:1;min-height:0;overflow-y:auto;padding:.3em 0;scrollbar-width:thin;scrollbar-color:var(--g3) transparent;user-select:text;-webkit-user-select:text}
.cLine{padding:1px 0;overflow-wrap:anywhere;color:#c9f5bd}
.cLine i{font-style:normal;color:var(--g3);text-shadow:none;margin-right:.5em}
.cLine b{font-weight:normal;margin-right:.5em;color:var(--g)}
.cLine.me b{color:#d8ffd0}
.cLine.sys{color:var(--g2)}
.cDay{margin:.4em 0 .1em;text-align:center;color:var(--g3);text-shadow:none;letter-spacing:2px}
.doc .c-scr .r-leader{color:#ffd24a!important}.doc .c-scr .r-officer{color:#8fd0ff!important}
.aChatF{display:flex;align-items:center;gap:.5em;padding-top:.3em;border-top:2px solid var(--g)}
.aChatF input{flex:1;min-width:0;padding:0;font:inherit;color:var(--g);text-shadow:var(--glow);background:none;border:0;outline:none;caret-color:var(--g);user-select:text;-webkit-user-select:text}
.aChatF input::placeholder{color:var(--g3);text-shadow:none}
.aChatF button{all:unset;cursor:pointer;color:var(--g)}.aChatF button:hover{background:var(--g);color:#020a03;text-shadow:none}

/* the head of the file: the tag in a red seal (assets/dossier/seal.png), name and description, the relation's stamp */
.aHd{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:22px;align-items:center;margin:20px 0 4px}
.aHd.side{grid-template-columns:120px minmax(0,1fr) 330px}
.aHd.side .dStamp{display:inline-block;margin-top:14px}
.aSeal{width:120px;height:120px;display:grid;place-items:center;background:url(../assets/dossier/seal.png) center/contain no-repeat;transform:rotate(-8deg);mix-blend-mode:multiply;opacity:.92}
.aSeal span{font:26px/1 var(--f-head);letter-spacing:1px;color:var(--red)}
.aTitle{margin:0 0 6px;font:700 26px/1.15 'Courier Prime','Courier New',monospace;letter-spacing:2px;text-transform:uppercase;overflow-wrap:anywhere}
.aDesc{white-space:pre-wrap;overflow-wrap:anywhere}.aDesc i{color:var(--ink2)}
.aRole{margin-top:8px;color:var(--ink2)}.aRole b{color:var(--ink)}
.aBtns,.aDip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
/* inks for how your alliance stands with another one */
.doc .rel-own{color:#2d6a25}.doc .rel-ally{color:#1d5888}.doc .rel-nap{color:#8a6000}.doc .rel-war{color:var(--red)}.doc .rel-none{color:var(--ink2)}
.doc .r-leader{color:#8a6000!important}.doc .r-officer{color:#1d5888!important}.doc .r-member{color:var(--ink)!important}
.aMsgBar{display:none;margin:12px 0 0;padding:4px 10px;border-left:4px solid currentColor;background:rgba(255,255,255,.4);font-weight:700}
.aMsgBar.ok{display:block;color:#2d6a25}.aMsgBar.bad{display:block;color:var(--red)}

.aForm{grid-template-columns:repeat(2,minmax(0,1fr))}
.aForm .wide{grid-column:1/-1}
.aPrev{align-self:center;color:var(--ink2)}.aPrev b{color:var(--ink)}
.aSearch{display:flex;gap:8px;margin:2px 0 8px}
.aQ,.aRelSel,.aDis input{min-width:0;padding:2px 4px;font:15px 'Courier Prime','Courier New',monospace;color:var(--ink);background:rgba(255,255,255,.35);border:0;border-bottom:1.5px solid var(--ink);border-radius:0;outline:none;user-select:text;-webkit-user-select:text}
.aQ{flex:1}.aRelSel{font-size:13px;margin:0 4px}
.aAct{white-space:nowrap}.aAct .dBtn{margin-left:4px}
.aNm{width:50%;max-width:0}
.aNm .dLnk{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.aBot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.aDis{display:flex;gap:8px;margin-left:auto}.aDis input{width:7ch}
.dFoot{margin:18px 0 0;font-size:13px;color:var(--ink2)}

/* member actions: one "⋯" button, a small typed slip of options */
.aMenu{display:inline-block;position:relative}
.aMenuBtn{width:28px;height:22px;padding:0;border:1.5px solid var(--ink);border-radius:2px;background:none;color:var(--ink);font:700 15px/1 'Courier Prime','Courier New',monospace;cursor:pointer}
.aMenuBtn:hover{background:rgba(28,29,32,.08)}
.aMenuList{position:fixed;z-index:60;min-width:210px;padding:4px;border:1.5px solid var(--ink);background:#f3eee0;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.aMenuList button{display:block;width:100%;padding:5px 10px;border:0;background:none;text-align:left;cursor:pointer;font:14px 'Courier Prime','Courier New',monospace;color:var(--ink);white-space:nowrap}
.aMenuList button:hover{background:rgba(28,29,32,.08)}
.aMenuList button.red{color:var(--red)}.aMenuList button.red:hover{background:rgba(163,34,26,.1)}
.aMenuList button[data-sure="1"]{color:#fff;background:var(--red)}

/* a wide page has room beside the sheet: a bigger tablet, further off the paper */
@container page (min-width:1280px){.comms{width:560px;--s:.6087;margin-right:-230px}}
/* a page with little room beside the sheet: the tablet hangs over the edge only a little */
@container page (max-width:1000px){.comms{width:440px;--s:.4783;margin-right:-62px}.aHd.side{grid-template-columns:120px minmax(0,1fr) 378px}}
@media (max-width:700px){
  .aHd{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .aHd .dStamp{grid-column:1/-1;justify-self:start}
  .aSeal{width:84px;height:84px}.aSeal span{font-size:19px}
  .aTitle{font-size:20px}
  .aForm{grid-template-columns:1fr}
  .aDis{margin-left:0}
}
/* a narrow sheet: the stamp goes under the name, the seal shrinks */
@container (max-width:560px){
  .aHd{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .aHd .dStamp{grid-column:1/-1;justify-self:end;margin-top:-6px}
  .aSeal{width:84px;height:84px}.aSeal span{font-size:19px}
  .aTitle{font-size:20px}
  .aForm{grid-template-columns:1fr}
}
/* a sheet too narrow to have the tablet beside the name: it lies under the head, across the sheet, with a taller screen */
@container (max-width:720px){
  .aHd.side{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .aHd.side .comms{grid-column:1/-1;width:auto;aspect-ratio:auto;--s:.36;margin:10px -4px 0;transform:rotate(.8deg)}
  .aHd.side .c-scr{height:min(50vh,340px)}
}