/* ==========================================================
   FMRG — Fictional Medical Record Generator
   Base Stylesheet (shared across all themes)
   ========================================================== */

/* --- Root Variables (global defaults) --- */
:root{
  --page-w: 794px;
  --page-h: 297mm;
  --page-pad: 32px;

  --font: ui-serif, "Songti SC","STSong","Noto Serif SC","Source Han Serif SC", serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

  --r: 5px;

  --stamp-size: 130px;
  --stamp-ink: rgba(0,0,0,.55);
  --stamp-opacity: .12;
  --stamp-rotate: -14deg;
  --stamp-x: 0px;
  --stamp-y: 0px;
  --stamp-border-url: none;
}

/* --- Reset --- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#eaebed; color:var(--ink); }
body{ font-family:var(--font); }


/* ==========================================================
   PAGE CONTAINER
   ========================================================== */
.page{
  width: var(--page-w);
  max-width: var(--page-w);
  margin: 24px auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

.page.theme-aoa,
.page.theme-asra,
.page.theme-iumd{
  --font: "Source Han Serif SC","Noto Serif SC","Source Han Serif","Songti SC","STSong",serif;
}

.page.theme-abrs,
.page.theme-edn,
.page.theme-pcrc{
  --font: "Source Han Sans SC","Noto Sans SC","Source Han Sans","PingFang SC","Microsoft YaHei",sans-serif;
}

.page[class*="theme-"],
.page[class*="theme-"] *{
  font-family: var(--font) !important;
}

.page.title-page,
.page.cover-page{
  width: var(--page-w);
  max-width: var(--page-w);
  height: calc(var(--page-w) * 1.4142);
  min-height: calc(var(--page-w) * 1.4142);
}


/* ==========================================================
   WATERMARK (central, faint)
   ========================================================== */
.watermark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index: 4;
  pointer-events:none;
}
.watermark .wm-text{
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: .28em;
  font-size: 72px;
  color: var(--wm-color, #000);
  opacity: var(--wm-opacity, .08);
  transform: rotate(-22deg);
  white-space: normal;
  text-align: center;
  line-height: 1.05;
  text-transform: uppercase;
  user-select: none;
}
.watermark .wm-text span{
  display: block;
}


/* ==========================================================
   LETTERHEAD (horizontal banner logo)
   ========================================================== */
.letterhead{
  position: relative;
  z-index: 1;
  height: var(--lh-h);
  padding: 0 var(--lh-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--lh-gap);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.035), transparent 80%);
  border-bottom: 2.5px solid var(--line);
}

.lh-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.lh-logo{
  height: var(--lh-logo-h);
  width: auto;
  display:block;
}

.lh-meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align:right;
  white-space: nowrap;
  line-height: 1.55;
  letter-spacing: .02em;
}
.lh-meta .lh-tag{
  display:inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1px 6px;
  border: 1px solid var(--accent-mid);
  color: var(--accent);
  border-radius: 2px;
  margin-top: 3px;
}


/* ==========================================================
   SHEET (content area)
   ========================================================== */
.sheet{
  padding: var(--page-pad);
  position: relative;
  z-index: 1;
}

.page.title-page .sheet,
.page.cover-page .sheet{
  min-height: 100%;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 22px 28px;
}

.page.title-page .cover-logo-wrap,
.page.cover-page .cover-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 60mm;
  height: 58mm;
  min-width: 60mm;
  min-height: 58mm;
  margin-bottom: 18px;
}

.page.title-page .cover-logo,
.page.cover-page .cover-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.page.title-page .cover-card,
.page.cover-page .cover-card{
  width: min(560px, 86%);
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.86);
  padding: 18px 18px 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.page.title-page .cover-avatar,
.page.cover-page .cover-avatar{
  display:flex;
  justify-content:center;
  margin: 8px 0 12px;
}

.page.title-page .cover-title,
.page.cover-page .cover-title{
  border-top: var(--b1);
  border-bottom: var(--b1);
  text-align:center;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 13px;
  padding: 8px 6px;
  margin-bottom: 10px;
}

.page.title-page .cover-grid,
.page.cover-page .cover-grid{
  display:grid;
  grid-template-columns: 132px 1fr;
  border: var(--b1);
  font-family: var(--mono);
  font-size: 12px;
}

.page.title-page .cover-grid .k,
.page.title-page .cover-grid .v,
.page.cover-page .cover-grid .k,
.page.cover-page .cover-grid .v{
  padding: 8px 10px;
  border-top: var(--b0);
}

.page.title-page .cover-grid .k,
.page.cover-page .cover-grid .k{
  border-right: var(--b0);
  color: var(--muted);
  background: rgba(0,0,0,.02);
}

.page.title-page .cover-grid .k:nth-child(-n+2),
.page.title-page .cover-grid .v:nth-child(-n+2),
.page.cover-page .cover-grid .k:nth-child(-n+2),
.page.cover-page .cover-grid .v:nth-child(-n+2){
  border-top: none;
}


/* ==========================================================
   HEADER (document title block)
   ========================================================== */
.header{
  border: var(--b1);
  padding: 14px 16px;
  margin-top: 14px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(0.5px);
}
.header-top{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
}
.brand{ min-width: 240px; }
.issuer-org{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
}
.issuer-dept{
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}
.doc-title{
  text-align:right;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0;
}
.doc-sub{
  text-align:right;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.header-meta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: var(--b0);
  font-family: var(--sans);
  font-size: 12px;
}
.meta-item{ display:flex; gap:8px; }
.meta-k{ color: var(--muted); min-width: 96px; }
.meta-v{ font-family: var(--mono); }


/* ==========================================================
   SUBJECT (profile card)
   ========================================================== */
.subject{ border: var(--b1); margin-top: 12px; background: rgba(255,255,255,.78); }
.subject-hd{
  padding: 10px 12px;
  border-bottom: var(--b0);
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--sans);
}
.subject-hd .title{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 13px;
}
.subject-hd .tags{
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:flex-end;
}
.chip{
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 500;
}

/* Subject body: avatar + grid side by side */
.subject-body{
  display: flex;
}
.avatar-slot{
  width: 118px;
  min-height: 130px;
  border-right: var(--b0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.015);
  flex-shrink: 0;
  cursor: pointer;
  gap: 8px;
  padding: 12px 0;
}
.avatar-img{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px dashed var(--thin);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(0,0,0,.02);
  overflow: hidden;
}
.avatar-img svg{
  width: 28px;
  height: 28px;
  opacity: .45;
}
.avatar-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.avatar-label{
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: .06em;
  opacity: .7;
}
.subject-grid{ display:grid; grid-template-columns: 1fr 1fr; flex:1; min-width:0; }
.kv{ display:flex; border-top: var(--b0); min-height: 34px; }
.kv:nth-child(1), .kv:nth-child(2){ border-top:none; }
.kv-key{
  width: 128px;
  padding: 8px 10px;
  border-right: var(--b0);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  background: rgba(0,0,0,.018);
}
.kv-val{
  flex:1;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: normal;
  line-height: 1.45;
}


/* ==========================================================
   SUMMARY (3-column overview)
   ========================================================== */
.summary{
  border: var(--b1);
  margin-top: 12px;
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 12px;
  font-family: var(--sans);
  font-size: 12px;
  background: rgba(255,255,255,.78);
}
.summary .box{
  border: var(--b0);
  padding: 10px;
  border-radius: var(--r);
  background: rgba(0,0,0,.012);
}
.summary .label{ color: var(--muted); margin-bottom: 6px; }
.summary .value{ font-family: var(--mono); }
.risk-flags{ display:flex; flex-wrap:wrap; gap:6px; }


/* ==========================================================
   SECTIONS (body content)
   ========================================================== */
.sections{ margin-top: 12px; border: var(--b1); background: rgba(255,255,255,.78); }
.section{ padding: 12px 14px; border-top: var(--b0); }
.section:first-child{ border-top:none; }
.section-title{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.section-title .small{
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}
.section-content{
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
}
.list{ margin: 0; padding-left: 18px; }
.list li{ margin: 6px 0; }

/* timeline */
.timeline{ display:grid; gap: 8px; }
.tl-item{
  border: var(--b0);
  padding: 10px;
  border-radius: var(--r);
  background: rgba(0,0,0,.012);
}
.tl-head{
  display:flex; justify-content:space-between; gap:10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.tl-body{
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}


/* ==========================================================
   ITEMS (intervention table)
   ========================================================== */
.items{ margin-top: 12px; border: var(--b1); background: rgba(255,255,255,.78); }
.items-hd{
  padding: 10px 12px;
  border-bottom: var(--b0);
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 13px;
  display:flex; justify-content:space-between; align-items:center;
}
table.items-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 12px;
}
.items-table th, .items-table td{
  border-top: var(--b0);
  padding: 10px 10px;
  vertical-align: top;
}
.items-table th{
  text-align:left;
  color: var(--muted);
  background: rgba(0,0,0,.018);
  font-weight: 700;
  letter-spacing: .03em;
}
.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }


/* ==========================================================
   FOOTER (signatures, disclaimer, stamp)
   ========================================================== */
.footer{
  margin-top: 12px;
  border: var(--b1);
  padding: 12px 14px 10px;
  position: relative;
  background: rgba(255,255,255,.78);
}
.sign-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  font-family: var(--sans);
  font-size: 12px;
}
.sign-box{
  border: var(--b0);
  border-radius: var(--r);
  padding: 10px;
  background: rgba(0,0,0,.012);
}
.sign-box .k{ color: var(--muted); margin-bottom: 6px; }
.sign-box .v{
  font-family: var(--mono);
  white-space: normal;
  line-height: 1.45;
}

.disclaimer{
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--b0);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* STAMP */
.stamp{
  position:absolute;
  right: 20px;
  bottom: 52px;
  z-index: 3;
  width: var(--stamp-size);
  height: var(--stamp-size);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--stamp-ink);
  opacity: var(--stamp-opacity);
  transform: translate(var(--stamp-x), var(--stamp-y)) rotate(var(--stamp-rotate));
  pointer-events:none;
  user-select:none;
}

.stamp::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--stamp-border-url);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.stamp span{
  position: relative;
  z-index: 1;
  display:block;
  font-size: 11px;
  line-height: 1.3;
  padding: 10px;
  text-transform: uppercase;
  text-align:center;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--stamp-ink);
}


/* ==========================================================
   FOOTER BANNER (institution bar)
   ========================================================== */
.footer-banner{
  margin-top: 12px;
  border: 1px solid var(--fb-border);
  border-radius: var(--r);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: var(--fb-bg);
  font-family: var(--sans);
  position: relative;
  z-index: 1;
}
.fb-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.fb-logo{
  height: 28px;
  width: auto;
  display:block;
  opacity: .55;
}
.fb-text{
  min-width: 0;
}
.fb-org{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  opacity: .65;
}
.fb-slogan{
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: .02em;
  font-style: italic;
}
.fb-badge{
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 10px;
  border: 1px solid var(--accent-mid);
  border-radius: 2px;
  color: var(--accent);
  background: rgba(255,255,255,.6);
  white-space: nowrap;
  text-transform: uppercase;
}


/* ==========================================================
   PRINT MEDIA QUERY (base)
   ========================================================== */
@media print{
  html,body{ background:#fff; }
  .page{
    width:auto; margin:0; border:none; box-shadow:none;
  }
  .watermark .wm-text{
    opacity: .025;
  }
  .footer-banner{
    break-inside: avoid;
  }
}