/* S2S Website CMS V9.6.6 — Typography & Layout Controls
   One predictable design system for all nine CV templates. */

/* ---------- Design controls ---------- */
.v966-design-system{
  margin:18px 0 0;
  padding:0;
  border:1px solid #dbe5ef;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 28px rgba(21,47,76,.05);
  overflow:hidden;
}
.v966-design-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 18px 15px;border-bottom:1px solid #edf2f6;
  background:linear-gradient(180deg,#fff,#fbfdff)
}
.v966-kicker{display:block;margin-bottom:5px;color:#1488e8;font-size:8px;font-weight:900;letter-spacing:.16em}
.v966-design-head h3{margin:0;color:#10263e;font-size:16px;letter-spacing:-.02em}
.v966-design-head p{margin:5px 0 0;color:#718197;font-size:9px;line-height:1.5}
.v966-safe-badge{flex:0 0 auto;padding:6px 9px;border:1px solid #cdebd8;border-radius:999px;background:#effaf4;color:#147d48;font-size:8px;font-weight:900}
.v966-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:17px 18px 15px}
.v966-control{display:grid;align-content:start;gap:7px;min-width:0;color:#38506a;font-size:9px;font-weight:850}
.v966-control>span:first-child,.v966-range-label{min-height:14px}
.v966-control select{width:100%;height:40px;padding:0 11px;border:1px solid #d6e1eb;border-radius:10px;background:#fff;color:#20374f;font-size:10px;outline:0}
.v966-control select:focus{border-color:#78b9f2;box-shadow:0 0 0 3px rgba(12,132,240,.1)}
.v966-range-label{display:flex;justify-content:space-between;gap:10px;align-items:center}
.v966-range-label output{color:#0d82e6;font-size:9px;font-weight:900;font-variant-numeric:tabular-nums}
.v966-control input[type="range"]{width:100%;height:24px;margin:0;padding:0!important;accent-color:#0c86ed;cursor:pointer}
.v966-segments{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px;border:1px solid #dbe5ed;border-radius:11px;background:#f5f8fb}
.v966-segments button{min-height:32px;padding:5px 7px;border:0;border-radius:8px;background:transparent;color:#65778d;font-size:8.5px;font-weight:850;cursor:pointer;transition:.15s ease}
.v966-segments button:hover{color:#0d78da;background:#fff}
.v966-segments button.active{background:#fff;color:#087fdc;box-shadow:0 1px 6px rgba(24,64,105,.12),inset 0 0 0 1px #9ed0fb}
.v966-colour{min-height:40px;display:flex;align-items:center;gap:10px;padding:5px 9px;border:1px solid #d8e2eb;border-radius:10px;background:#fff}
.v966-colour input[type="color"]{display:block!important;width:34px!important;height:28px!important;min-height:28px!important;padding:2px!important;border:0!important;border-radius:7px!important;background:#fff!important;cursor:pointer}
.v966-colour>span:last-child{font-size:9px;color:#52677d;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.v966-primary-actions{display:flex;gap:8px;padding:0 18px 16px}
.v966-primary-actions button{min-height:38px;padding:0 14px;border:1px solid #d4e0ea;border-radius:9px;background:#fff;color:#39516a;font-size:9px;font-weight:850;cursor:pointer}
.v966-primary-actions button:hover{border-color:#8fc7f8;color:#0c7fdc}
.v966-primary-actions .v966-primary{border-color:#0a86eb;background:#0a86eb;color:#fff;box-shadow:0 6px 14px rgba(10,134,235,.18)}
.v966-primary-actions .v966-primary:hover{background:#0677d2;color:#fff}
.v966-advanced{margin:0 18px 14px;border:1px solid #e0e8ef;border-radius:11px;background:#fbfdff;overflow:hidden}
.v966-advanced summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:11px 12px;color:#3d536b;font-size:9px;font-weight:900;list-style:none}
.v966-advanced summary::-webkit-details-marker{display:none}
.v966-advanced summary:before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#eef5fb;color:#1682db;font-size:13px}
.v966-advanced[open] summary:before{content:"−"}
.v966-advanced summary span{margin-left:auto;color:#8997a7;font-size:8px;font-weight:700}
.v966-advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:2px 12px 14px;border-top:1px solid #edf2f6}
.v966-advanced-grid .v966-control{padding-top:12px}
.v966-design-note{margin:0;padding:10px 18px 12px;border-top:1px solid #edf2f6;color:#8190a2;font-size:8px;line-height:1.5}

/* ---------- Shared A4 typography tokens ---------- */
.cv-paper{font-family:var(--cv-font-family,Arial,Helvetica,sans-serif)!important}
.cv-paper .cv-name{font-size:var(--cv-name-size,28px)!important;line-height:1.06!important;overflow-wrap:anywhere}
.cv-paper .cv-role{font-size:var(--cv-role-size,13px)!important;line-height:1.25!important;overflow-wrap:anywhere}
.cv-paper .section-title{font-size:var(--cv-heading-size,12px)!important;line-height:1.25!important}
.cv-paper .body-text,.cv-paper .bullet-list{font-size:var(--cv-body-size,10.5px)!important;line-height:var(--cv-line-height,1.45)!important}
.cv-paper .entry-title{font-size:calc(var(--cv-body-size,10.5px) * 1.13)!important;line-height:1.3!important}
.cv-paper .entry-meta,.cv-paper .simple-list{font-size:var(--cv-meta-size,9.4px)!important;line-height:var(--cv-line-height,1.45)!important}
.cv-paper section{margin-bottom:calc(10mm * var(--cv-spacing-scale,.92))!important}
.cv-paper .entry{margin-bottom:calc(10px * var(--cv-spacing-scale,.92))!important}
.cv-paper .cv-photo-frame{width:var(--cv-photo-size,34mm)!important;height:var(--cv-photo-size,34mm)!important;max-width:100%}

/* Contact, skills and compact side content now have a real independent size control. */
.cv-paper :is(.sidecol,.rightcol,.minimal-grid>aside,.exec-body>aside,.tg-side,.cp-side,.gg-side,.nm-side,.nc-side) :is(.contact-line,.skill,.simple-list,.bullet-list,.body-text,.entry-meta){
  font-size:var(--cv-sidebar-size,9px)!important;
  line-height:var(--cv-line-height,1.45)!important;
}
.cv-paper :is(.sidecol,.rightcol,.minimal-grid>aside,.exec-body>aside,.tg-side,.cp-side,.gg-side,.nm-side,.nc-side) .section-title{
  font-size:var(--cv-heading-size,12px)!important;
}

/* ---------- Safe adjustable columns ---------- */
.template-modern{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-classic .classic-body{grid-template-columns:minmax(0,1fr) var(--cv-sidebar-width,60mm)!important}
.template-minimal .minimal-grid{grid-template-columns:minmax(0,1fr) var(--cv-sidebar-width,60mm)!important}
.template-executive .exec-body{grid-template-columns:minmax(0,1fr) var(--cv-sidebar-width,60mm)!important}
.template-teal_gold{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-charcoal_pro{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-gold_geometry{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-gold_geometry::before{width:var(--cv-sidebar-width,60mm)!important}
.template-navy_manager{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-navy_curve{grid-template-columns:var(--cv-sidebar-width,60mm) minmax(0,1fr)!important}
.template-navy_curve .nc-side::before{width:var(--cv-sidebar-width,60mm)!important}

/* Keep photo controls aligned when their size changes. */
.template-modern .cv-photo-frame,.template-classic .cv-photo-frame,.template-charcoal_pro .cv-photo-frame,.template-navy_manager .cv-photo-frame,.template-navy_curve .cv-photo-frame{margin-left:auto!important;margin-right:auto!important}
.template-teal_gold .tg-head{grid-template-columns:var(--cv-photo-size,34mm) minmax(0,1fr)!important}
.template-gold_geometry .gg-side{padding-top:calc(var(--cv-photo-size,34mm) + 18mm)!important}
.template-gold_geometry .gg-side .cv-photo-frame{left:calc((var(--cv-sidebar-width,60mm) - var(--cv-photo-size,34mm))/2)!important}

/* V9.6.5 had an emergency fixed 8.7px sidebar rule; V9.6.6 makes it user-controlled. */
.template-modern .sidecol .contact-line,
.template-teal_gold .tg-side .contact-line,
.template-charcoal_pro .cp-side .contact-line,
.template-gold_geometry .gg-side .contact-line,
.template-navy_manager .nm-side .contact-line,
.template-navy_curve .nc-side .contact-line{font-size:var(--cv-sidebar-size,9px)!important}

/* Accent should visibly affect common CV hierarchy without destroying template base colours. */
.cv-paper .cv-role{color:var(--accent)!important}
.template-executive .section-title,.template-executive .exec-head .cv-role{color:var(--accent)!important;border-color:var(--accent)!important}
.template-teal_gold .section-title{background:var(--accent)!important}
.template-teal_gold .tg-side .section-title{background:transparent!important;border-color:var(--accent)!important}
.template-teal_gold .tg-head .cv-photo-frame{border-color:var(--accent)!important}
.template-gold_geometry .gg-name{border-color:var(--accent)!important}
.template-gold_geometry .gg-main .section-title::before{background:var(--accent)!important}
.template-gold_geometry .skillbar i{background:var(--accent)!important}
.template-navy_manager .nm-main .section-title,.template-navy_curve .nc-main .section-title{border-color:var(--accent)!important;color:var(--accent)!important}

@media(max-width:680px){
  .v966-design-head{padding:15px 13px 13px}.v966-safe-badge{display:none}.v966-quick-grid,.v966-advanced-grid{grid-template-columns:1fr;padding-left:13px;padding-right:13px}.v966-primary-actions{padding-inline:13px}.v966-primary-actions button{flex:1}.v966-advanced{margin-inline:13px}.v966-advanced summary span{display:none}.v966-design-note{padding-inline:13px}.v966-control select{font-size:16px}
}
@media print{.v966-design-system{display:none!important}}

/* Contact and skill text follow the dedicated control even when a template places them in its header/main column. */
.cv-paper .contact-line,.cv-paper .skill{
  font-size:var(--cv-sidebar-size,9px)!important;
  line-height:var(--cv-line-height,1.45)!important;
}