/* ═══════════════════════════════════════════════════════════════════
   OWLMARK LABELS & NAME TAGS STUDIO
   Layered over timetable-studio.css for the studio chrome. Everything
   on the sheet is sized in millimetres so the screen preview and the
   printed page are the same object at different scales.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --lb-page-w:210mm; --lb-page-h:297mm;
  --lb-w:63.5mm; --lb-h:33.9mm;
  --lb-mx:7mm; --lb-my:13mm; --lb-gx:2.5mm; --lb-gy:0mm;
  --lb-cols:3;
  --lb-tint:#FAF7EF; --lb-accent:#C99A3D; --lb-ink:#101A2D;
  --lb-font:'Cormorant Garamond',serif;
  --lb-name:9mm;
}

/* ── The sheet ──────────────────────────────────────────────────── */
/* the sample sheet shown before any names are typed */
.lb-sheet.preview{position:relative}
.lb-sheet.preview .lb-cell{opacity:.92}
.lb-preview-note{
  position:absolute;left:50%;bottom:6mm;transform:translateX(-50%);
  padding:2mm 5mm;border-radius:999px;white-space:nowrap;
  background:rgba(16,26,45,.9);color:#FAF7EF;
  font-family:'Manrope',sans-serif;font-size:8pt;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
body.lang-ar .lb-preview-note{letter-spacing:0;text-transform:none}

#printable{
  background:none;box-shadow:none;border-radius:0;
  display:flex;flex-direction:column;gap:26px;align-items:center;
  width:auto;max-width:none;
}
.lb-sheet{
  position:relative;
  width:var(--lb-page-w);height:var(--lb-page-h);
  padding:var(--lb-my) var(--lb-mx);
  background:#fff;
  box-shadow:0 24px 64px rgba(16,26,45,.3),0 0 0 1px rgba(201,154,61,.16);
  display:grid;
  grid-template-columns:repeat(var(--lb-cols),var(--lb-w));
  grid-auto-rows:var(--lb-h);
  column-gap:var(--lb-gx);row-gap:var(--lb-gy);
  justify-content:start;align-content:start;
  overflow:hidden;
}
.lb-sheet.empty-sheet{display:flex;align-items:center;justify-content:center}
.lb-empty{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:40px;color:var(--ok-text-soft,#5B647A);
}
.lb-empty img{width:56px;height:56px;opacity:.5}
.lb-empty strong{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--ok-navy,#101A2D)}
.lb-empty span{font-size:.85rem;max-width:36ch}

/* cutting guides — a dotted trim line, only where labels actually sit */
.lb-sheet.marks .lb-cell{outline:1px dashed rgba(16,26,45,.22);outline-offset:0}

/* ── One label ──────────────────────────────────────────────────── */
.lb-cell{
  position:relative;overflow:hidden;
  background:var(--lb-tint);color:var(--lb-ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:box-shadow .15s ease;
}
.lb-cell:hover{box-shadow:inset 0 0 0 2px var(--lb-accent)}
.lb-cell.blank{background:transparent;cursor:default}
.lb-cell.blank:hover{box-shadow:none}

.lb-inner{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6mm;
  padding:2.4mm 3mm;text-align:center;
}
.lb-inner.align-start{align-items:flex-start;text-align:start}
.lb-name{
  font-family:var(--lb-font);font-weight:700;line-height:1.08;
  width:100%;
  overflow-wrap:break-word;word-break:normal;hyphens:auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.lb-inner.vertical .lb-name{display:block;-webkit-line-clamp:none;overflow:visible}
.lb-sub{font-size:calc(var(--lb-name) * .34);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
body.lang-ar .lb-sub{letter-spacing:0}
.lb-foot{font-size:calc(var(--lb-name) * .26);opacity:.6;margin-top:.4mm}
.lb-num{
  position:absolute;top:1.6mm;inset-inline-start:2mm;
  font-size:calc(var(--lb-name) * .26);font-weight:800;opacity:.45;
}
.lb-logo{
  height:calc(var(--lb-name) * .9);width:auto;max-width:30%;
  object-fit:contain;margin-bottom:.6mm;
}

/* ── Borders ────────────────────────────────────────────────────── */
.bd-hairline{box-shadow:inset 0 0 0 .3mm var(--lb-accent)}
.bd-double{box-shadow:inset 0 0 0 .3mm var(--lb-accent), inset 0 0 0 1.2mm var(--lb-tint), inset 0 0 0 1.5mm var(--lb-accent)}
.bd-rounded{border-radius:3mm;box-shadow:inset 0 0 0 .4mm var(--lb-accent)}
.bd-band::before{content:"";position:absolute;top:0;left:0;right:0;height:2.2mm;background:var(--lb-accent)}
.bd-band .lb-inner{padding-top:4mm}
.bd-side::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:2.2mm;background:var(--lb-accent)}
.bd-side .lb-inner{padding-inline-start:5mm}
.bd-corners::before,.bd-corners::after{
  content:"";position:absolute;width:6mm;height:6mm;border:.4mm solid var(--lb-accent);
}
.bd-corners::before{top:1.5mm;left:1.5mm;border-right:none;border-bottom:none}
.bd-corners::after{bottom:1.5mm;right:1.5mm;border-left:none;border-top:none}
.bd-hairline:hover,.bd-double:hover,.bd-rounded:hover{box-shadow:inset 0 0 0 .5mm var(--lb-accent)}

/* fold line for tent cards */
.lb-fold{
  position:absolute;left:0;right:0;top:50%;
  border-top:.3mm dashed rgba(16,26,45,.35);
}
.lb-cell.folded .lb-inner{justify-content:flex-end;padding-bottom:5mm}

/* ── Panel extras ───────────────────────────────────────────────── */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:11px 8px;border-radius:12px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--ok-border,#DDD5C6);background:var(--ok-ivory,#FAF7EF);
  transition:.15s;
}
.preset-card:hover{border-color:var(--ok-gold,#C99A3D);transform:translateY(-1px)}
.preset-card.active{border-color:var(--ok-gold,#C99A3D);background:rgba(201,154,61,.1);box-shadow:inset 0 0 0 1px var(--ok-gold,#C99A3D)}
.pc-mini{
  display:grid;gap:1.5px;width:34px;padding:3px;border-radius:2px;
  background:#fff;border:1px solid var(--ok-border,#DDD5C6);
  grid-template-columns:repeat(3,1fr);
}
.pc-mini.landscape{width:44px;grid-template-columns:1fr}
.pc-mini i{height:4px;border-radius:1px;background:var(--ok-slate,#64748B);opacity:.5;display:block}
.preset-card.active .pc-mini i{background:var(--ok-gold,#C99A3D);opacity:1}
.pc-name{font-size:.72rem;font-weight:800;color:var(--ok-navy,#101A2D);line-height:1.2}
.pc-note{font-size:.62rem;color:var(--ok-text-soft,#5B647A)}

.border-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.border-card{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 5px;border-radius:11px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--ok-border,#DDD5C6);background:#fff;transition:.15s;
}
.border-card:hover{border-color:var(--ok-gold,#C99A3D)}
.border-card.active{border-color:var(--ok-gold,#C99A3D);background:rgba(201,154,61,.1)}
.bc-mini{
  width:34px;height:20px;border-radius:2px;background:var(--ok-ivory,#FAF7EF);
  position:relative;border:1px solid transparent;
}
.bc-hairline{box-shadow:inset 0 0 0 1px var(--ok-gold,#C99A3D)}
.bc-double{box-shadow:inset 0 0 0 1px var(--ok-gold,#C99A3D),inset 0 0 0 3px var(--ok-ivory,#FAF7EF),inset 0 0 0 4px var(--ok-gold,#C99A3D)}
.bc-rounded{border-radius:6px;box-shadow:inset 0 0 0 1px var(--ok-gold,#C99A3D)}
.bc-band::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ok-gold,#C99A3D)}
.bc-side::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--ok-gold,#C99A3D)}
.bc-corners::before,.bc-corners::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--ok-gold,#C99A3D)}
.bc-corners::before{top:2px;left:2px;border-right:none;border-bottom:none}
.bc-corners::after{bottom:2px;right:2px;border-left:none;border-top:none}
.bc-none{border:1px dashed var(--ok-border,#DDD5C6)}
.bc-name{font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ok-text-soft,#5B647A);text-align:center}
.border-card.active .bc-name{color:var(--ok-gold,#C99A3D)}
body.lang-ar .bc-name{letter-spacing:0;font-size:.64rem}

.th-mini .thm-label{
  display:flex;align-items:center;justify-content:center;height:22px;
  font-family:'Cormorant Garamond',serif;font-size:.9rem;font-weight:700;
}

.name-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--ok-border,#DDD5C6);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ok-slate,#64748B);
}
body.lang-ar .name-head{letter-spacing:0}
.name-list{display:flex;flex-direction:column;gap:5px;max-height:230px;overflow-y:auto}
.name-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;border-radius:10px;font-size:.8rem;font-weight:600;
  background:var(--ok-cream,#F2EBDD);border:1px solid var(--ok-border,#DDD5C6);
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print{
  #printable{gap:0 !important;display:block !important;transform:none !important}
  .lb-sheet{
    box-shadow:none !important;
    width:var(--lb-page-w) !important;height:var(--lb-page-h) !important;
    break-after:page;page-break-after:always;
    margin:0 !important;
  }
  .lb-sheet:last-child{break-after:auto;page-break-after:auto}
  .lb-sheet.marks .lb-cell{outline-color:rgba(16,26,45,.3)}
  .lb-cell:hover{box-shadow:none}
  .lb-cell,.lb-sheet,.bd-band::before,.bd-side::before{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  .empty-sheet,.lb-sheet.preview{display:none !important}
  .lb-preview-note{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   BACKGROUNDS
   Drawn in CSS rather than shipped as images: they inherit the accent
   colour, weigh nothing, and print crisply at any size. Strength is one
   variable, so every pattern fades together.
   ══════════════════════════════════════════════════════════════════════ */
.lb-bg{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--lb-bg-op,.26);
  background-repeat:repeat;      /* a pattern must tile; the three image
                                    fits below switch this off explicitly */
  background-position:center;
}
.lb-cell .lb-inner{position:relative;z-index:1}

.bgm-grain{
  background-image:
    radial-gradient(circle at 21% 33%, currentColor .35px, transparent .4px),
    radial-gradient(circle at 68% 61%, currentColor .3px, transparent .35px),
    radial-gradient(circle at 44% 86%, currentColor .3px, transparent .35px);
  background-size:2.2mm 2.2mm, 3.1mm 3.1mm, 4.3mm 4.3mm;
  color:rgba(16,26,45,.6);
}
.bgm-wash{
  background-repeat:no-repeat;background-size:cover;
  background-image:
    radial-gradient(120% 90% at 8% 0%, var(--lb-accent) 0%, transparent 58%),
    radial-gradient(110% 80% at 100% 100%, var(--lb-accent) 0%, transparent 52%);
}
/* a fan of fine rays from one corner, not a starburst across the middle */
.bgm-rays{
  background-repeat:no-repeat;background-size:cover;
  background-image:repeating-conic-gradient(from 186deg at 4% 4%,
    var(--lb-accent) 0deg .55deg, transparent .55deg 5.5deg);
}
.bgm-grid{
  background-image:
    linear-gradient(var(--lb-accent) .15mm, transparent .15mm),
    linear-gradient(90deg, var(--lb-accent) .15mm, transparent .15mm);
  background-size:3.2mm 3.2mm;
}
.bgm-dots{
  background-image:radial-gradient(var(--lb-accent) .32mm, transparent .36mm);
  background-size:3.4mm 3.4mm;
}
.bgm-rule{
  background-image:repeating-linear-gradient(58deg,
    var(--lb-accent) 0 .18mm, transparent .18mm 2.4mm);
}
/* an interlaced quatrefoil lattice — the shape reads as ornament, not noise */
.bgm-arabesque{
  background-image:
    radial-gradient(circle at 0 0, transparent 2.05mm, var(--lb-accent) 2.05mm 2.25mm, transparent 2.3mm),
    radial-gradient(circle at 100% 0, transparent 2.05mm, var(--lb-accent) 2.05mm 2.25mm, transparent 2.3mm),
    radial-gradient(circle at 0 100%, transparent 2.05mm, var(--lb-accent) 2.05mm 2.25mm, transparent 2.3mm),
    radial-gradient(circle at 100% 100%, transparent 2.05mm, var(--lb-accent) 2.05mm 2.25mm, transparent 2.3mm),
    radial-gradient(circle at 50% 50%, var(--lb-accent) .28mm, transparent .32mm);
  background-size:4.1mm 4.1mm;
}
/* overlapping scallops, like roof tiles */
.bgm-waves{
  background-image:
    radial-gradient(circle at 50% 120%, transparent 2.4mm, var(--lb-accent) 2.4mm 2.58mm, transparent 2.62mm);
  background-size:4.8mm 2.4mm;
}
.bgm-confetti{
  background-image:
    linear-gradient(45deg, var(--lb-accent) 22%, transparent 22%),
    linear-gradient(-45deg, var(--lb-accent) 18%, transparent 18%),
    radial-gradient(var(--lb-accent) .3mm, transparent .34mm);
  background-size:3.6mm 3.6mm, 5.2mm 5.2mm, 4.4mm 4.4mm;
  background-position:0 0, 1.8mm 2.6mm, 2.2mm .8mm;
}
/* a hairline inlay set in from the trim, the way a printed card is ruled */
.bgm-frameline{
  background-image:none;
  box-shadow:
    inset 0 0 0 2.2mm transparent,
    inset 0 0 0 2.35mm var(--lb-accent),
    inset 0 0 0 3.1mm transparent,
    inset 0 0 0 3.2mm var(--lb-accent);
}

/* ── The background picker ─────────────────────────────────────────── */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bg-card{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:7px 5px;border-radius:11px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--ok-border,#DDD5C6);background:#fff;transition:.15s;
}
.bg-card:hover{border-color:var(--ok-gold,#C99A3D);transform:translateY(-1px)}
.bg-card.active{border-color:var(--ok-gold,#C99A3D);background:rgba(201,154,61,.1)}
.bg-mini{
  --lb-accent:#C99A3D;
  width:100%;height:26px;border-radius:5px;display:block;
  background-color:var(--ok-ivory,#FAF7EF);
  border:1px solid var(--ok-border,#DDD5C6);
  background-repeat:repeat;
}
.bg-mini.bgm-grain{background-size:6px 6px,8px 8px,10px 10px}
.bg-mini.bgm-grid{background-size:8px 8px}
.bg-mini.bgm-dots{background-size:8px 8px}
.bg-mini.bgm-rule{background-image:repeating-linear-gradient(45deg,var(--lb-accent) 0 1px,transparent 1px 6px)}
.bg-mini.bgm-arabesque{background-size:12px 12px}
.bg-mini.bgm-waves{background-size:12px 6px}
.bg-mini.bgm-confetti{background-size:5px 5px,7px 7px}
.bg-mini.bgm-none{background-image:none}
.bg-name{font-size:.58rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ok-text-soft,#5B647A);text-align:center;line-height:1.2}
.bg-card.active .bg-name{color:var(--ok-gold,#C99A3D)}

@media print{
  .lb-bg{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
}

/* ── Artwork from assets/backgrounds/ ───────────────────────────────
   Three fits, because one does not serve three kinds of picture:
   · frame  — a corner, border or wash: filled to the label so all four
              corners stay on it, whatever shape the label is
   · cover  — a texture that may be cropped without loss
   · tile   — a seamless pattern, repeated at label scale
   The first two are an <img>; only the third needs a background. */
.lb-bg-art{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;
}
.lb-bg-art.fit-frame{object-fit:fill}
.lb-bg-art.fit-cover{object-fit:cover;object-position:center}
.lb-bg-tile{
  background-size:var(--lb-bg-tile,24mm) auto;
  background-repeat:repeat;
  background-position:top left;
}

/* ── Vertical text ─────────────────────────────────────────────────
   A bookmark is 48 mm wide and 190 mm tall: a name set across it has
   nowhere to go, so it is set along it instead. Rotating by 180° after
   turning the writing mode makes it read bottom-to-top, which is how a
   bookmark sitting in a closed book is read. */
.lb-inner.vertical{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  align-items:center;justify-content:center;
  padding:3mm 2.4mm;
}
.lb-inner.vertical .lb-name{white-space:nowrap;word-break:normal}
.lb-inner.vertical .lb-sub,
.lb-inner.vertical .lb-foot{white-space:nowrap}
.lb-inner.vertical .lb-logo{
  margin:0 0 0 .6mm;
  writing-mode:horizontal-tb;transform:rotate(180deg);
}
.lb-inner.vertical .lb-num{writing-mode:horizontal-tb;transform:rotate(180deg)}

/* ═══════════════ ROUND STICKERS ═══════════════
   Pre-die-cut peel-off circles. The content box is inset to the
   inscribed square (a circle of diameter d holds a square of side
   d/√2 ≈ 70.7%), so text can never poke out past the curve — the
   14.6% padding on each side IS that inset. */
.lb-cell.round{
  border-radius:50%;
  padding:14.6%;
  align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.lb-cell.round .lb-name{text-align:center}
.lb-cell.round .lb-sub{text-align:center}
/* A rectangular tint behind a circle prints as a square halo on the
   backing paper; the tint follows the curve instead. */
.lb-cell.round{background-clip:padding-box}
/* Numbering badges sit inside the curve, not on the corner. */
.lb-cell.round .lb-no{inset-inline-start:14%;top:9%}
@media print{
  .lb-cell.round{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}