/* src/components/basic/XWUIPaper/XWUIPaper.css */
/**
 * XWUIPaper Component Styles
 * Elevated surface (MUI Paper equivalent). Use theme variables for colors and shadows.
 */

/* The fill is the raised-surface token, not the page token. --bg-primary is the
   SAME colour as the page (--bg-app) in 67 of the 76 colour themes, the dark
   theme among them (#0d1117 on #0d1117), which made a Paper there an invisible
   box: its shadow is black and black on near-black draws nothing. --bg-elevated
   is what every theme already defines for a raised surface (#161b22 on dark, a
   1.09:1 step over the page; #ffffff on light, unchanged). --color-paper-bg
   stays first as the per-site override. XWUIPaper.surface.test.ts measures it. */
.xwui-paper {
  background-color: var(--color-paper-bg, var(--bg-elevated, var(--bg-primary, #fff)));
  color: var(--color-paper-fg, var(--text-primary, #111));
  border-radius: var(--radius-paper, 8px);
  box-sizing: border-box;
  transition: box-shadow var(--transition-duration-surface, 0.2s) ease;
}

.xwui-paper-square {
  border-radius: 0;
}

/* Variant: elevated - shadow only */
.xwui-paper-elevated {
  border: none;
}
.xwui-paper-elevated[data-elevation="0"] { box-shadow: none; }
.xwui-paper-elevated[data-elevation="1"] { box-shadow: var(--shadow-paper-1, 0 1px 3px rgba(0,0,0,0.12)); }
.xwui-paper-elevated[data-elevation="2"] { box-shadow: var(--shadow-paper-2, 0 2px 6px rgba(0,0,0,0.14)); }
.xwui-paper-elevated[data-elevation="3"] { box-shadow: var(--shadow-paper-3, 0 4px 12px rgba(0,0,0,0.15)); }
.xwui-paper-elevated[data-elevation="4"] { box-shadow: var(--shadow-paper-4, 0 6px 20px rgba(0,0,0,0.16)); }
.xwui-paper-elevated[data-elevation="5"] { box-shadow: var(--shadow-paper-5, 0 8px 28px rgba(0,0,0,0.18)); }
/* 6 to 24: the view clamps elevation to 0..24 and the schema documents that
   range, but only 0..5 used to be styled, so a Paper at 16 (the notice board
   example) rendered flat. The offset and blur keep growing past level 5, more
   slowly, so level 24 is a clear lift rather than a smear. */
.xwui-paper-elevated[data-elevation="6"] { box-shadow: var(--shadow-paper-6, 0 9px 30px rgba(0,0,0,0.18)); }
.xwui-paper-elevated[data-elevation="7"] { box-shadow: var(--shadow-paper-7, 0 10px 32px rgba(0,0,0,0.19)); }
.xwui-paper-elevated[data-elevation="8"] { box-shadow: var(--shadow-paper-8, 0 11px 35px rgba(0,0,0,0.19)); }
.xwui-paper-elevated[data-elevation="9"] { box-shadow: var(--shadow-paper-9, 0 12px 37px rgba(0,0,0,0.19)); }
.xwui-paper-elevated[data-elevation="10"] { box-shadow: var(--shadow-paper-10, 0 13px 39px rgba(0,0,0,0.20)); }
.xwui-paper-elevated[data-elevation="11"] { box-shadow: var(--shadow-paper-11, 0 14px 41px rgba(0,0,0,0.20)); }
.xwui-paper-elevated[data-elevation="12"] { box-shadow: var(--shadow-paper-12, 0 15px 43px rgba(0,0,0,0.20)); }
.xwui-paper-elevated[data-elevation="13"] { box-shadow: var(--shadow-paper-13, 0 16px 46px rgba(0,0,0,0.20)); }
.xwui-paper-elevated[data-elevation="14"] { box-shadow: var(--shadow-paper-14, 0 17px 48px rgba(0,0,0,0.21)); }
.xwui-paper-elevated[data-elevation="15"] { box-shadow: var(--shadow-paper-15, 0 18px 50px rgba(0,0,0,0.21)); }
.xwui-paper-elevated[data-elevation="16"] { box-shadow: var(--shadow-paper-16, 0 19px 52px rgba(0,0,0,0.21)); }
.xwui-paper-elevated[data-elevation="17"] { box-shadow: var(--shadow-paper-17, 0 20px 54px rgba(0,0,0,0.22)); }
.xwui-paper-elevated[data-elevation="18"] { box-shadow: var(--shadow-paper-18, 0 21px 57px rgba(0,0,0,0.22)); }
.xwui-paper-elevated[data-elevation="19"] { box-shadow: var(--shadow-paper-19, 0 22px 59px rgba(0,0,0,0.22)); }
.xwui-paper-elevated[data-elevation="20"] { box-shadow: var(--shadow-paper-20, 0 23px 61px rgba(0,0,0,0.22)); }
.xwui-paper-elevated[data-elevation="21"] { box-shadow: var(--shadow-paper-21, 0 24px 63px rgba(0,0,0,0.23)); }
.xwui-paper-elevated[data-elevation="22"] { box-shadow: var(--shadow-paper-22, 0 25px 65px rgba(0,0,0,0.23)); }
.xwui-paper-elevated[data-elevation="23"] { box-shadow: var(--shadow-paper-23, 0 26px 68px rgba(0,0,0,0.23)); }
.xwui-paper-elevated[data-elevation="24"] { box-shadow: var(--shadow-paper-24, 0 27px 70px rgba(0,0,0,0.24)); }

/* Variant: outlined - border, minimal shadow.
   The edge reads --control-border, which each ground tunes for its own surface
   (#dee2e6 on light, #30363d on dark). The old fallback was black at 12 percent,
   a 1.04:1 edge on a dark fill, i.e. no edge. */
.xwui-paper-outlined {
  border: 1px solid var(--color-paper-border, var(--control-border, rgba(0,0,0,0.12)));
  box-shadow: none;
}

/* Variant: plain - no shadow, no border */
.xwui-paper-plain {
  border: none;
  box-shadow: none;
}

/* Dividers read --border-strong: black at 8 percent on light (the value this
   used to hardcode) and white at 8 percent on dark, where the hardcoded black
   drew nothing. */
.xwui-paper-header {
  border-bottom: 1px solid var(--color-paper-divider, var(--border-strong, rgba(0,0,0,0.08)));
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.xwui-paper-footer {
  border-top: 1px solid var(--color-paper-divider, var(--border-strong, rgba(0,0,0,0.08)));
  padding-top: 8px;
  margin-top: 8px;
}

.xwui-paper-content {
  min-height: 0;
}