/* Dreamwar modern: compatibility layer for screens not yet rewritten.

   A page with no template in templates-modern/ is rendered by its old
   block inside the new wrapper. This file gives that old markup a decent
   look with the new tokens. Class inventory taken from the real templates
   (counts: block 639, main 334, button 183, mmain 158, pad 110, tch 61,
   cntr 55, hr 38, error 38, block_center 26, stch 24 and so on), values
   for meaning taken from i/styles/new.css and i/styles/main.css.

   Scope: .dw-legacy, and that scope is load-bearing.

   These rules were first written against .dw-main, the content container of
   every page. That was wrong: a rewritten screen sits in the same container,
   and `.dw-legacy a { display: inline-block }` (0,1,1) out-ranks `.dw-tile`
   (0,1,0). Action tiles collapsed into a text run, list rows glued together,
   buttons lost their shape. The compatibility layer must never reach a
   screen that has its own template.

   The wrapper adds .dw-legacy only when the block has no template in
   templates-modern/. libs/core.php decides that and passes $dwModernBlock.

   Rewriting a screen replaces these rules for that screen with real
   components. This layer is the floor, not the target. */

/* ---- item quality and nick colors ----
   A real axis of the game: a player reads an item by the color of its name
   faster than by its text. Kept, and now driven by tokens, so both themes
   work. Hue and saturation are the source colors from i/styles/new.css and
   main.css; only lightness moves per theme, never below 4.5:1.
   These tokens color an item name or a nick and nothing else. */

/* Old order kept: OD/artifact wrappers first, drop and wear after,
   so the drop or wear color wins on the same link as in main.css. */
.dw-legacy .art_1,    .dw-legacy .art_1 a    { color: var(--valor-1); }
.dw-legacy .art_2,    .dw-legacy .art_2 a    { color: var(--valor-2); }
.dw-legacy .art_3,    .dw-legacy .art_3 a    { color: var(--valor-3); }
.dw-legacy .art_4,    .dw-legacy .art_4 a    { color: var(--nick-art); }
.dw-legacy .clan_art, .dw-legacy .clan_art a { color: var(--clan-art); }

.dw-legacy .drop_1, .dw-legacy .drop_1 a { color: var(--drop-1); }
.dw-legacy .drop_2, .dw-legacy .drop_2 a { color: var(--drop-2); }
.dw-legacy .drop_3, .dw-legacy .drop_3 a { color: var(--drop-3); }
.dw-legacy .drop_4, .dw-legacy .drop_4 a { color: var(--drop-4); }
.dw-legacy .drop_5, .dw-legacy .drop_5 a { color: var(--drop-5); }
.dw-legacy .drop_6, .dw-legacy .drop_6 a { color: var(--drop-6); }
.dw-legacy .drop_7, .dw-legacy .drop_7 a { color: var(--drop-7); }
.dw-legacy .drop_8, .dw-legacy .drop_8 a { color: var(--drop-8); }
.dw-legacy .wear_1, .dw-legacy .wear_1 a { color: var(--wear-1); }
.dw-legacy .wear_2, .dw-legacy .wear_2 a { color: var(--wear-2); }
.dw-legacy .wear_3, .dw-legacy .wear_3 a { color: var(--wear-3); }

.dw-legacy .vip_333,  .dw-legacy .vip_333 a  { color: var(--nick-vip); }
.dw-legacy .adm_font, .dw-legacy .adm_font a { color: var(--nick-adm); }
.dw-legacy .md_font,  .dw-legacy .md_font a  { color: var(--nick-mod); }

/* ---- section heading: the old mustard bar ---- */

.dw-legacy .main,
.dw-legacy .mmain {
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-section-size);
  line-height: var(--text-section-line);
  letter-spacing: var(--text-section-tracking);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.dw-legacy .main:first-child,
.dw-legacy .mmain:first-child { margin-top: 0; }

.dw-legacy .main a,
.dw-legacy .mmain a { color: var(--muted); }

.dw-legacy .hh1 {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
}

/* ---- card: the old block ---- */

.dw-legacy .block,
.dw-legacy .block_center,
.dw-legacy .block_lightgrey,
.dw-legacy .border_bort {
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dw-legacy .block_center { text-align: center; }

/* Nested blocks stay flat: depth comes from one border, not from stacking. */
.dw-legacy .block .block,
.dw-legacy .block .block_center {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---- row: the old tch ---- */

.dw-legacy .tch,
.dw-legacy .stch,
.dw-legacy .btch {
  display: block;
  min-height: var(--touch);
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dw-legacy .tch:hover,
.dw-legacy .btch:hover { border-color: var(--accent); }

.dw-legacy .tch img,
.dw-legacy .stch img,
.dw-legacy .icon {
  vertical-align: middle;
  margin-right: var(--space-2);
}

/* ---- buttons ----
   Everything the old markup calls a button becomes a secondary button.
   Which action is the main one on a screen is decided when that screen is
   rewritten; two brass buttons on one screen would break the system. */

.dw-legacy .button,
.dw-legacy .submit,
.dw-legacy input[type="submit"],
.dw-legacy input[type="button"],
.dw-legacy button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  cursor: pointer;
}

.dw-legacy .button2 { width: auto; height: auto; }

.dw-legacy input[type="text"],
.dw-legacy input[type="password"],
.dw-legacy input[type="number"],
.dw-legacy select,
.dw-legacy textarea {
  min-height: var(--touch);
  max-width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
}

.dw-legacy textarea { padding: var(--space-2) var(--space-3); line-height: var(--text-body-line); }

/* ---- links ----
   Base: a comfortable tap target without breaking links inside prose.
   Where the browser supports :has(), a link that ends its line is a real
   full-width row, which is how the old menus are written. */

.dw-legacy a { display: inline-block; padding: 6px 0; }

@supports selector(a:has(+ br)) {
  .dw-legacy a:has(+ br) {
    display: block;
    min-height: var(--touch);
    padding: 11px var(--space-3);
    margin: 0 calc(var(--space-3) * -1);
    border-bottom: 1px solid var(--line-2);
  }
  .dw-legacy a:has(+ br):hover { background: var(--surface-2); color: var(--accent-text); }
}

/* ---- separators and spacing ---- */

.dw-legacy .hr { margin: var(--space-2) 0; border-top: 1px solid var(--line-2); }
.dw-legacy .hr.solid { border-top-color: var(--line); }
.dw-legacy .pad, .dw-legacy .padd { padding: var(--space-1) 0; }
.dw-legacy .space { margin-bottom: var(--space-3); }
.dw-legacy .shift { margin-bottom: var(--space-2); }
.dw-legacy .form { padding: var(--space-2) 0; }
.dw-legacy .form2 { padding: var(--space-4) 0; }
.dw-legacy .end_page { color: var(--dim); font-size: var(--text-caption-size); text-align: center; }

/* ---- text roles ---- */

.dw-legacy .cntr, .dw-legacy .center { text-align: center; }
.dw-legacy .rgt { float: right; }
.dw-legacy .sel { font-weight: 600; text-align: center; }
.dw-legacy .small, .dw-legacy .small85 { font-size: var(--text-caption-size); }
.dw-legacy .gray { color: var(--muted); }
.dw-legacy .error, .dw-legacy .red { color: var(--danger-text); }
.dw-legacy .error { text-align: center; }
.dw-legacy .admin, .dw-legacy .admin a { color: var(--nick-admin); font-weight: 600; }
.dw-legacy .orange, .dw-legacy .yellow, .dw-legacy .gold, .dw-legacy .golda { color: var(--accent-text); }
.dw-legacy .silver { color: var(--muted); }
.dw-legacy .form_hint { color: var(--muted); font-size: var(--text-caption-size); }

/* Blue in the modern family means mana and nothing else, so the old
   decorative blue becomes the brass highlight. */
.dw-legacy .blue, .dw-legacy .bd { color: var(--accent-text); }

/* ---- raw html the old templates lean on ---- */

.dw-legacy img { max-width: 100%; height: auto; }
.dw-legacy table { width: 100%; border-collapse: collapse; }
.dw-legacy td { padding: var(--space-2) var(--space-1); vertical-align: top; }
.dw-legacy hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--space-3) 0; }
.dw-legacy h1, .dw-legacy h2, .dw-legacy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: var(--space-3) 0 var(--space-2);
}
.dw-legacy h1 { font-size: var(--text-h1-size); }
.dw-legacy h2, .dw-legacy h3 { font-size: var(--text-h2-size); }
.dw-legacy p { margin: 0 0 var(--space-3); }
.dw-legacy small { font-size: var(--text-caption-size); color: var(--muted); }
.dw-legacy pre { overflow-x: auto; }