/* ---------------------------------------------------------------- factions */
/* Only the folder lives here. The page around it reuses the card DB's own markup
   and classes, so the header, page bar, filter and buttons are the same elements
   with the same styles rather than lookalikes. */

.factions-grid {
  display: grid;
  /* one column per folder, at the width the size control asks for */
  grid-template-columns: repeat(auto-fill, var(--folder-w, 170px));
  gap: 20px 16px;
  align-items: start;
}

.faction-tile {
  position: relative;
  cursor: grab;
  /* the folder follows the pointer itself; the other tiles slide via animateReflow,
     so this element must not also animate its transform */
  touch-action: none;
}
.faction-tile:active {
  cursor: grabbing;
}
/* the folder in hand: lifted, and still holding the slot it came from */
.faction-tile.is-dragging {
  z-index: 5;
  cursor: grabbing;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}
/* while a folder is in hand, nothing on the page should be selectable */
body.is-dragging-faction,
body.is-dragging-faction * {
  user-select: none;
  -webkit-user-select: none;
}

/* The folder: the landscape design box (192.76 x 146.38) scaled to its tile. */
.folder-stage {
  position: relative;
  transform-origin: top left;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

/* the two colour dots, on the tab. Sized and placed in design units by the renderer,
   so they scale with the folder. */
.folder-dot {
  position: absolute;
  z-index: 3;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s;
}
.folder-dot:hover {
  transform: scale(1.08);
}

/* the tab symbol is the one that opens the picker */
.folder-sym.is-pickable {
  pointer-events: auto;
  cursor: pointer;
}
.folder-sym.is-pickable:hover {
  filter: brightness(1.25);
}

/*
 * The effect, shown over the artwork when the folder is hovered: darkened, so white
 * text reads on any palette, and hidden the rest of the time so the folder is a
 * picture rather than a data sheet.
 */
.folder-effect {
  position: absolute;
  z-index: 4;
  left: 7px;
  /* The folder's body runs from the foot of the tab, about y 20, to y 146. The panel
     is inset inside that: 8 above and 6 below, so it neither crowds the tab nor
     touches the dark border along the bottom. */
  top: 28px;
  width: 179px;
  height: 112px;
  box-sizing: border-box;
  /*
   * The extra room along the bottom is the tile's delete button, which sits in the
   * folder's lower-right corner and is over the panel while the panel is open. Without it
   * the last line of the note ran under the trash.
   */
  padding: 8px 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3px;
  border-radius: 10px;
  font-family: var(--font);
  /* A card's effect type is 7.8 units on a 128.72-wide card, so the same proportion
     on a 192.8-wide folder is about 11.7. Ten is a little under that, which leaves the
     panel room for five or six lines. */
  font-size: 10px;
  line-height: 1.35;
  color: #f4f4f5;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.14s;
  pointer-events: none;
  overflow: hidden;
}

/* the single item the panel centres; the text flows inside it */
.folder-effect__body {
  text-align: center;
  /* the panel centres its one item; the text inside centres with it */
  align-self: center;
  /* the effect is written in a multiline field, so its breaks are part of the text */
  white-space: pre-wrap;
  /* a rule that will not fit leaves the note its room rather than pushing it out */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/*
 * The comment, under the effect.
 *
 * A note is secondary to the rule above it, so it is smaller, dimmed, and held to two
 * lines: the panel is a hover, not a document, and the whole note is on the tables and the
 * back of the faction's card. It carries a hairline so the two do not read as one sentence.
 *
 * The clamp is by line rather than by height. `max-height` cut the second line across the
 * middle of the letters, which looked like a rendering fault rather than a shortened note.
 */
.folder-effect__comment {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 9px;
  font-style: italic;
  line-height: 1.4;
  color: #dcd8d2;
  /* the note is written in a multiline field too */
  white-space: pre-wrap;
}
.folder-effect__comment.is-empty {
  color: rgba(255, 255, 255, 0.42);
}
.folder-effect__comment:hover {
  color: var(--amber-hi);
}

/*
 * Tags inside the panel have to be sized for it. The tag's default --tag-h is 28px,
 * which is right in a standalone banner and enormous in 7px text -- on the cards the
 * effect slot overrides it, and this panel needs the same override.
 */
.folder-effect .tag {
  --tag-h: 1.55em;
  vertical-align: middle;
  margin: 0 0.08em;
}
/* ...and a tag in the note is smaller again, because the note is */
.folder-effect__comment .tag {
  --tag-h: 1.45em;
  margin: 0 0.05em;
}
.faction-tile:hover .folder-effect,
.faction-tile:focus-within .folder-effect {
  opacity: 1;
  pointer-events: auto;
  cursor: text;
}

/* the faction's name, on the tab line: white, in the card's typeface */
.folder-name {
  /*
   * Right-aligned in a box inside the folder's body, with a dark backing: the name is
   * over the artwork now rather than on the tab's plate, and light type on a bright
   * facet is unreadable without it.
   */
  position: absolute;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(12, 13, 16, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  cursor: text;
  text-transform: uppercase;
}
.folder-name:hover {
  color: var(--amber-hi);
}

/* the three bars beside the tab, mirroring the card name plate's */
.folder-slashes {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.folder-slashes {
  display: block;
}

/* the crop that keeps the large bottom-left mark inside the folder's outline */
.folder-sym-crop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the faction symbol: on the tab's right and at the bottom left, always in the
   faction's main colour (the renderer repaints the icon's fills to match) */
.folder-sym {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.folder-sym svg,
.folder-sym i {
  max-width: 100%;
  max-height: 100%;
}

/* the generated low-poly art, clipped to the folder silhouette */
.folder-art {
  position: absolute;
  inset: 0;
}
.folder-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * The darkened border.
 *
 * The same technique as the card window's bevel: the ring file is a mask, and the
 * element carries a translucent black fill. The artwork therefore shows through the
 * ring, darkened, instead of being covered by it. Previously this was a clip-path
 * with a solid gradient, which paints the ring over the art rather than into it.
 */
.folder-darken {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-mask-image: url('assets/folder-darken.svg');
  mask-image: url('assets/folder-darken.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* -------------------------------------------------------------------- table */
/* Same table treatment as the card DB, so the two views read as siblings. */

/*
 * The table's narrow columns size to their content.
 *
 * A percentage width on a th is only a hint under table-layout: auto, so the wide
 * columns win the space and Colours and Symbol end up padded with emptiness. width: 1%
 * with nowrap makes the browser shrink them to what they contain, and the flexible
 * columns take the rest.
 */
/* the fixed columns clip to their content; the name gets room to be read, and the
   action button is pinned right so it never floats in the middle of the row */
.cards-table th:nth-child(1),
.factions-page .cards-table td:nth-child(1) {
  width: 1%;
  min-width: 190px;
  white-space: nowrap;
}
.cards-table th:nth-child(2),
.cards-table td:nth-child(2),
.cards-table th:nth-child(3),
.cards-table td:nth-child(3),
.cards-table th:nth-child(6),
.factions-page .cards-table td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}
.cards-table th:nth-child(6),
.factions-page .cards-table td:nth-child(6) {
  text-align: right;
  padding-right: 4px;
}

/* the effect wraps inside its own column rather than pushing into the comment */
.cards-table th:nth-child(4),
.factions-page .cards-table td:nth-child(4) {
  width: 42%;
  max-width: 460px;
  white-space: normal;
  line-height: 1.5;
}

/* the comment takes whatever is left */
.cards-table th:nth-child(5),
.factions-page .cards-table td:nth-child(5) {
  width: auto;
}

/* the note column reads as prose, and says so when it is empty */
.factions-page .cards-table td.is-comment {
  color: var(--text);
  max-width: 320px;
  cursor: text;
  min-height: 1.6em;
}
.factions-page .cards-table td.is-comment:hover {
  color: var(--amber-hi);
}

/* the two colour dots in the table, each opening its own picker */
.faction-dot {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  margin-right: 4px;
  padding: 0;
  transition: transform 0.1s;
}
.faction-dot:hover {
  transform: scale(1.2);
}

.faction-swatch {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.faction-swatch i {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* the colour picker hangs off a swatch */
.faction-colours {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  gap: 5px;
  padding: 7px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
  position: fixed;
  z-index: 60;
}
.faction-colours button {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  cursor: pointer;
}
.faction-colours button[aria-pressed='true'] {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

/* the symbol picker, the same furniture */
.faction-icons {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 5px;
  padding: 7px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
  position: fixed;
  z-index: 60;
  max-height: 260px;
  overflow: auto;
}
.faction-icons button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  padding: 3px;
}
.faction-icons button[aria-pressed='true'] {
  border-color: var(--amber);
}
.faction-icons img {
  max-width: 100%;
  max-height: 100%;
}

/* table cells that open an editor */
.cards-table td.is-name,
.cards-table td.is-text,
.factions-page .cards-table td.is-symbol {
  cursor: text;
}
.factions-page .cards-table td.is-symbol {
  cursor: pointer;
  color: var(--text-dim);
}
.cards-table td.is-name:hover,
.cards-table td.is-text:hover,
.factions-page .cards-table td.is-symbol:hover {
  color: var(--amber-hi);
}
/* ------------------------------------------------------------------- phantom */
/* The slot at the end of the list: what a new faction would look like, at half
   opacity, as an invitation rather than a thing. It is not in the data. */

/* The folder inside the slot is inert: every part of it has an editor, and those
   handlers stop the click before it reaches the tile, so clicking the slot's name
   edited a faction that does not exist instead of creating one. */
.faction-tile.is-phantom .folder-stage {
  pointer-events: none;
}

/* The effect overlay re-enables pointer events when the tile is hovered, which
   overrides the parent's `none` -- and the slot is always hovered when you click it,
   so it swallowed the click. It stays visible as an instruction, and inert. */
.faction-tile.is-phantom .folder-effect {
  pointer-events: none !important;
}

/*
 * The card tiles' delete button only reveals itself under `.card-tile:hover`, so on a
 * folder it stayed at opacity 0. Same button, the reveal rule for this container.
 *
 * It also moves from the top-right corner to the bottom-right: the folder's top-right
 * is where the name sits, so the button landed on top of it.
 */
.faction-tile .card-delete {
  top: auto;
  bottom: 4px;
}
.faction-tile:hover .card-delete,
.faction-tile:focus-within .card-delete {
  opacity: 1;
}

/* no colours and no symbol on the slot: it has neither yet */
.faction-tile.is-phantom .folder-dot,
.faction-tile.is-phantom .folder-slashes,
.faction-tile.is-phantom .folder-sym {
  display: none;
}

.faction-tile.is-phantom {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.faction-tile.is-phantom:hover,
.faction-tile.is-phantom:focus-within {
  opacity: 0.8;
}
.faction-tile.is-phantom:focus-visible {
  outline: 1px dashed var(--line);
  outline-offset: 4px;
}

.factions-page .cards-table tr.is-phantom {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.factions-page .cards-table tr.is-phantom:hover {
  opacity: 0.8;
}
.factions-page .cards-table tr.is-phantom td {
  color: var(--text-dim);
}

/*
 * A bare X in an effect becomes the VARIABLE mark. The rule for it lives in card.css
 * scoped to .slot.text, and in cards.css scoped to a table cell -- neither reaches the
 * folder's overlay, so the mark was drawn at the SVG's natural size, which is enormous
 * beside 10px type. Same treatment here.
 */
.folder-effect .inline-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.7em;
  height: 0.8em;
  vertical-align: -0.05em;
}
.folder-effect .inline-symbol svg {
  height: 0.8em;
  width: auto;
  display: block;
}
.folder-effect .inline-symbol i {
  font-size: 0.8em;
  line-height: 1;
}