:root{
    /* A5 portrait geometry */
    --page-w: 148mm;
    --page-h: 210mm;

    /* content insets inside each page */
    --content-margin: 5mm;
    --content-pad: 5mm;

    /* preview chrome (screen only) */
    --preview-gap: 5mm;
    --preview-border: 0.5mm solid #d8d8d8;

    /* accent colour */
    --redAccent: #bc0303ff;        /* dark red */
}

@font-face {
    font-family: 'Deutsch';
    src: url('./../../../fonts/Deutsch.ttf') format('truetype');
}

@font-face {
    font-family: 'Cimbrian';
    src: url('./../../../fonts/CIMBRIAN.TTFf') format('truetype');
}

/* Page size and printer margins */
@page {
    size: 148mm 210mm;    /* A5 portrait */
    margin: 0;            /* we control margins inside the page */
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: "Noto", sans;
}

@media screen {
    body { background:#f2f4f7; padding: var(--preview-gap) 0; }
    .preview {
        display: grid;
        padding-bottom:35mm;
        grid-template-columns: repeat(2, var(--page-w));
        justify-content: center;          /* center the two-up block */
        gap: var(--preview-gap);
        transform: scale(1.4);           /* zoom to 140% */
        transform-origin: top center;    /* scale from top */
    }
    .page { margin: 0; border: var(--preview-border); }

    .exportUI { display:block; padding-left:45mm; height:
25mm;}
}

/* optional: single column below a breakpoint */
@media screen and (max-width: 1100px) {
  .preview { grid-template-columns: var(--page-w); }
}


/* A5 page box */
.page {
    position: relative;
    display: block;
    width: var(--page-w);
    height: var(--page-h);
    padding: var(--content-pad);
    background: #fff;
    page-break-after: always;   /* each .page = one printed page */
    overflow: hidden;           /* avoid accidental spills in print */
}

.hRow {
    display:flex;
    padding: 0;
    margin: 0;
    gap: 3mm;
    /*background: rgba(0, 128, 0, 0.3);*/
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.hRow > div {
    flex: 1 1 100%;
}

.vColumn {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 1mm;
    /*background: rgba(0, 128, 0, 0.3);*/
    align-content: flex-start;
    align-self:stretch;
    justify-content: space-between;
    box-sizing: border-box;
}

.panel {
    position: relative;
    border: 0.75mm solid var(--redAccent);
    border-radius: 0 4mm 0 4mm;
    width: 100%;
    background: #fff;
    margin-bottom: 3mm;
    padding: 4mm 0.5mm 1mm;   /* extra top padding for the title chip */
    box-sizing: border-box;
}

.panel > .hRow {gap: 1mm;}

.panel h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    padding: 0mm 0.5mm;
    background: #fff;
    color: var(--redAccent);
    font-family: Deutsch;
    font-size: 12pt;
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1;
}

.panel h2 {
    font-size: 9pt;
    text-align: center;
    padding: 0;
    margin: 0;
}

.panel h3 {
    font-family: "Noto", sans;
    color: var(--redAccent);
    font-size: 8pt;
    text-align: left;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.panel p {
    font-family: "Noto", sans;
    font-size: 7pt;
    text-align: left;
    line-height: 1;
    text-indent: 1mm;
    margin: 0;
}

.panel ul {
    font-family: "Noto", sans;
    font-size: 7pt;
    text-align: left;
    line-height: 1;
    text-indent: 1mm;
    margin: 0;
}

.accent { color: var(--redAccent); }

.circleInput{
    position:absolute; opacity:0; width:0; height:0;
}

/* the visible ring */
.circle{                             /* diameter */
    display:inline-block;
    line-height: 0;
    width:3.5mm; height:3.5mm;
    border:0.75mm solid var(--redAccent);
    border-radius:50%;
    background:#fff;
    vertical-align:middle;
    position:relative;
}

/* small dot when checked (keeps the clean look) */
.circleInput:checked + .circle::after{
    content:"";
    position:absolute;
    inset:28%;
    border-radius:50%;
    background:var(--redAccent);
}

.textInput {
    border: 0;
    width: 4mm;
    background: transparent;
    line-height: 0;
    font-family: "Noto", sans;
    font-size: 7pt;
    text-align: center;
    padding: 0 0 0.2mm 0;   /* tiny breathing room above the line */
    outline: none;
}

/* togglable bar (hidden checkbox + visible label) */
.barInput{
    position:absolute;
    opacity:0;
    width:0; height:0;
}

.virtueBar{
    display:inline-block;
    width: 0.75mm;                /* bar thickness */
    height: 5mm;               /* bar height */
    background: var(--redAccent);
    opacity: .25;                /* dim state */
    border-radius: 0.5mm;
    vertical-align:middle;
}

.barInput:checked + .virtueBar{
    opacity: 1;                  /* strong state */
}

button{
    border: 0.75mm solid var(--redAccent);
    border-radius:4.5mm;
    width: 35mm;
    margin: 3mm;
    padding: 4mm;   /* extra top padding for the title chip */
    box-sizing: border-box;
    font-size: 10pt;
    font-weight: 700;
    text-align: center;
}

/* Print cleanup */
@media print {
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .page { border: none; margin: 0 auto; }
    .circle{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .textInput { color: #000; }
    .exportUI { display:none; }
}