/* The carved sign (D135, variant A «резная вывеска»; design/ui/sketches/a-wood): one material for every message of the
   game — the lore sign (lore.css), the account sheet (account.css), the kin card's text (home.css) and the caption of a
   place that is not open yet (ui.css .tip.lore). Wood with brass corner plates, a light planed field with dark carved
   text, titles carved into the field — no plank under them (К-17, as the keeper's sheet, К-23) —, light brass for the
   one main action. The keeper's sheet and the guard's sign can be moved by hand (ui/drag.js movable, К-17). */

/* icons: the pictogram library (src/ui/icons.js; its look — styles/icons.css, D140) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the board: wood frame, brass corners, the planed field inside ---------- */
/* no `position` here: a sign is placed by its own stylesheet (the sheet hangs absolute, the lore board sits in flow) */
.sign-board {
  padding: 14px; border-radius: 16px;
  background:
    repeating-linear-gradient(92deg, rgba(40, 18, 4, .10) 0 2px, transparent 2px 7px, rgba(255, 210, 160, .06) 7px 8px, transparent 8px 15px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 40%, var(--wood-dark));
  box-shadow: inset 0 2px 0 rgba(255, 214, 160, .45), inset 0 -3px 0 rgba(30, 14, 2, .45), inset 0 0 0 1px rgba(40, 18, 4, .6),
    0 14px 34px rgba(6, 4, 16, .6), 0 0 60px rgba(247, 180, 79, .18);
}
.sign-field {
  border-radius: 6px; color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(150, 100, 50, .05) 0 1px, transparent 1px 11px),
    radial-gradient(120% 80% at 30% 0%, rgba(255, 244, 214, .9), transparent 60%),
    linear-gradient(180deg, var(--field), var(--field-2));
  box-shadow: inset 0 2px 4px rgba(70, 40, 12, .45), inset 0 0 0 1px rgba(70, 40, 12, .35);
}
.corner { position: absolute; z-index: 3; width: 38px; height: 38px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(30, 14, 2, .5)); }
.c-tl { left: -4px; top: -4px; }
.c-tr { right: -4px; top: -4px; scale: -1 1; }
.c-bl { left: -4px; bottom: -4px; scale: 1 -1; }
.c-br { right: -4px; bottom: -4px; scale: -1 -1; }

/* ---------- the title: carved into the field, no plank (К-17; the keeper's sheet, К-23) ---------- */
/* the display face in carved ink on ONE line, the library's pictogram before it in the carve colour; a title that does
   not fit even so ends in «…» (the titles of the game are short: the widest, «The lantern flickered», fits at 320 px) */
.sign-title {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; white-space: nowrap;
  font: 700 21px/1.25 var(--font-display); color: var(--ink-title); text-shadow: 0 1px 0 rgba(255, 248, 225, .8);
}
.sign-title > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sign-title .ico { flex: none; width: 21px; height: 21px; color: var(--carve); }
/* the small line over a title (the lore sign's «From the watch post»): carved small capitals, as the keeper's title */
.sign-kicker {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin: 0; white-space: nowrap;
  font: 700 11.5px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--carve);
}
.sign-kicker > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sign-kicker .ico { flex: none; width: 16px; height: 16px; }

/* ---------- the close button: one for every sign with a «×» (owner's choice 27.10.2026, variant A; К-17) ---------- */
/* a round 32 px button on the field's own face with a brass rim of the corner plates, the library's «close» in dark
   ink; it sits in the field's inner top-right corner, 8 px from its top and its right edge on every sign, and its
   target is 44 px (::after). The sign's header keeps its room: .sign-close-room (inset + size + 6 px) */
.sign-field:has(.sign-close) { position: relative; }
.sign-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 2.5px solid transparent; border-radius: 50%; color: var(--ink-title);
  background:
    radial-gradient(circle at 38% 30%, var(--face-hi), var(--field) 62%, var(--face-lo)) padding-box,
    linear-gradient(135deg, var(--plate-hi), var(--plate) 45%, var(--plate-lo)) border-box;
  box-shadow: inset 0 1px 2px rgba(70, 40, 12, .28), 0 1px 0 rgba(255, 248, 225, .7), 0 2px 4px rgba(46, 30, 14, .35);
  transition: filter var(--t-hover) var(--ease-hover), scale var(--t-press) var(--ease-press);
}
.sign-close::after { content: ""; position: absolute; inset: -8.5px; border-radius: 50%; }   /* from the 27 px inside the rim: a 44 px target */
.sign-close .ico { width: 15px; height: 15px; }
.sign-close:hover { filter: brightness(1.06); }
.sign-close:active { scale: .94; box-shadow: inset 0 2px 3px rgba(70, 40, 12, .4), 0 1px 0 rgba(255, 248, 225, .7); }
.sign-close-room { padding-right: 46px; }

/* ---------- a sign the hand can move (ui/drag.js movable, К-17) ---------- */
/* our open hand over the wood frame and the head it is carried by; the field and the controls keep their own cursor.
   No panning or zoom starts on them on a touch screen; the scrolling body inside pans again (a scroller re-enables it) */
.movable { cursor: var(--cursor-grab); touch-action: none; }
.movable > .sign-field { cursor: var(--cursor); }
.movable .drag-handle { cursor: var(--cursor-grab); user-select: none; -webkit-user-select: none; }
.movable .drag-handle [tabindex]:not([tabindex="-1"]) { cursor: var(--cursor-hover); }

/* ---------- buttons: the one primary is light brass with dark text (≈9:1, D135) ---------- */
.btn-brass, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 10px; font: 700 14px/1.2 var(--font-ui); letter-spacing: .02em; white-space: nowrap; text-decoration: none;
  transition: scale var(--t-press) var(--ease-press), filter var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover);
}
.btn-brass .ico, .btn-ghost .ico { width: 18px; height: 18px; }
.btn-brass:active:not(:disabled), .btn-ghost:active:not(:disabled) { scale: .96; }
.btn-ghost { color: var(--carve); background: transparent; box-shadow: inset 0 0 0 2px rgba(107, 67, 24, .45); }
.btn-ghost:hover:not(:disabled) { background: rgba(138, 85, 40, .1); }

/* every main action of the game: the sign's own button and the older ones that used light text on gold (≈3:1) */
.btn-brass, .acct-btn.primary, .realm-btn.primary, .net-try, .err-actions button[data-act="reload"] {
  color: var(--brass-ink); border-color: var(--brass-lo);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #C9944A);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, .8), inset 0 -2px 0 rgba(110, 72, 26, .35), 0 2px 0 var(--brass-lo), 0 4px 10px rgba(30, 18, 8, .35);
  font-weight: 700;
}
.btn-brass:hover:not(:disabled), .acct-btn.primary:hover:not(:disabled), .realm-btn.primary:hover:not(:disabled), .net-try:hover:not(:disabled),
.err-actions button[data-act="reload"]:hover:not(:disabled) { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #C9944A); filter: brightness(1.06); }

/* focus on a sign: a double ring (dark ring, light halo) that reads on wood, field and brass alike */
.sign-board :focus-visible, .btn-brass:focus-visible, .btn-ghost:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 9px var(--focus-halo);
}
@media (forced-colors: active) {
  .sign-board :focus-visible, .btn-brass:focus-visible, .btn-ghost:focus-visible { outline-color: Highlight; box-shadow: none; }
  .btn-brass { border: 1px solid ButtonText; }
}

/* Google's «G» in its white disc (src/ui/icons.js googleMark): the official mark, not recoloured */
.g-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(46, 30, 14, .25); }
.g-mark svg { width: 16px; height: 16px; }

/* A single integrated cancellation segment shared by construction, worker and guard panels. */
.action-rail {display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:5px;min-width:52px;min-height:44px;padding:8px 2px;border:0;border-left:1px solid #a77b60;border-radius:0;background:linear-gradient(90deg,#b24d3320,#b24d3344);color:#87372b;}
.action-rail .ico {width:22px;height:22px;}
.action-rail>span {font:700 10px/1.2 var(--font-ui);}
.action-rail:focus-visible {outline-offset:-4px;}
.guard-kin.guard-duty {grid-template-columns:minmax(0,1fr) 52px;gap:0;padding:0;overflow:hidden;}
.action-panel-main {display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;}