/* ============================================================================
   ta-default-layout-v1.0.15.css
   INBXIFY · T-A Studio · Default Layout tab  (Workstream K-2)

   v1.0.15 — removed orphaned CSS: .tdl-flag* (photo-essay row, K9 reversed),
             .tdl-toggle* (the switch), .tdl-switches/.tdl-sw-* (empty switches
             panel from K10 reversal). Pairs with JS v1.0.15.
   v1.0.14 — (1) LEFT palette + RIGHT rail now position:sticky (top:16px) so only
             the CENTER newsletter column scrolls past them. (2) Cream boundary
             around the newsletter: stack-wrap gets a 2px cream border + 1px
             border-color outline to read as the newsletter edge. Pairs w/ JS
             v1.0.14 (Header title true-centered).
   v1.0.13 — fixed Header (gold #f4a127, horizontal). [CSS unchanged this bump]
   v1.0.13-css — disabled palette state, 65% tiles, branding.
   v1.0.3 — Save button hardened: literal #5B7FFF + #fff !important.
   v1.0.2 — toggle contrast + non-sticky footer fixes.
   v1.0.1 — (GitHub) inadvertently the unfixed v1.0.0 content under a bumped name.
   v1.0.0 — initial port from inbxify-ta-default-layout-mockup-v0_8.html.

   Ported from inbxify-ta-default-layout-mockup-v0_8.html.
   Production reconciliations enforced (locks confirmed 2026-06-08):
     • K11 — Title Masthead is newsletter chrome, NOT a block → removed from
             the stack + palette. No .blk.fixed / .lock-pill styles needed,
             but retained (greyed) in case a legacy JSON carries one.
     • K9  — Photo Essay is an Article FLAG, not a block type → no PE palette
     • K10 — Local Weather is a Default Layout SWITCH, not a block → no LW

   NAMESPACE: every class prefixed .tdl-  ·  scoped under [data-tdl-root]
   so nothing here can collide with the live T-A page, Studio, or IPP styles.
   Tokens reused from the mockup verbatim (INBXIFY corporate blue/gold/cream).
   ============================================================================ */

[data-tdl-root]{
  --tdl-blue:#5B7FFF;
  --tdl-blue-deep:#3E5BD4;
  --tdl-blue-light:#A8BBFF;
  --tdl-blue-ghost:#EEF2FF;
  --tdl-gold:#C4A35A;
  --tdl-gold-deep:#9D8341;
  --tdl-gold-glow:#F5EBD2;
  --tdl-cream:#FAF9F5;
  --tdl-cream-dark:#FDFCF8;
  --tdl-text-dark:#1A2238;
  --tdl-text-mid:#5A6378;
  --tdl-text-light:#6B7488;
  --tdl-border:#E5E8EE;
  --tdl-border-light:#EFF1F5;
  --tdl-border-input:#D5DAE2;
  --tdl-font-display:'Fraunces',Georgia,serif;
  --tdl-font-body:'DM Sans',-apple-system,sans-serif;
  --tdl-r:10px;
  --tdl-shadow-card:0 2px 8px -3px rgba(30,42,58,.06);
  --tdl-shadow-pop:0 14px 38px -10px rgba(30,42,58,.18);

  /* shared edit-state dirty border — gold, matches IPP --ipp-edit-dirty-border
     (HC-IPP-EDIT). Site-wide convention: a selection/edit that will be written
     on Save shows this border. */
  --tdl-dirty-border:var(--tdl-gold);

  /* per-title brand color; JS overrides via TA_CONFIG.titleColor. Default =
     corporate teal so tiles still look intentional if a title has no color. */
  --tdl-brand:#1A3A3A;

  font:14px/1.5 var(--tdl-font-body);
  color:var(--tdl-text-dark);
  display:block;
}
[data-tdl-root] *{box-sizing:border-box}
[data-tdl-root] button{font-family:inherit}

/* ─────────────── FIXED HARDCODED MASTHEAD (HC-TDL-MAST, WLN) ─────────────── */
/* 65% width to match tiles, 80px tall, #142e2e, white Fraunces, top corners
   rounded 5px. Centered in the column above the block stack. */
[data-tdl-root] .tdl-fixed-mast{
  width:65%;height:80px;margin:0 auto 12px;
  background:#142e2e;color:#fff;
  border-radius:5px 5px 0 0;
  display:flex;align-items:center;justify-content:center;
  font:600 26px 'Fraunces',Georgia,serif;letter-spacing:-.01em;
}

/* ─────────────────────────── PAGE HEADER (Issues-style) ─────────────────── */
[data-tdl-root] .tdl-pagehead{width:100%;padding:8px 0 0}
[data-tdl-root] .tdl-pagehead-row{display:flex;align-items:center;gap:16px}
[data-tdl-root] .tdl-pagehead-ico{width:60px;height:60px;border-radius:14px;background:var(--tdl-cream);border:1px solid var(--tdl-border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;box-shadow:var(--tdl-shadow-card)}
[data-tdl-root] .tdl-pagehead-txt{display:flex;flex-direction:column;gap:3px}
[data-tdl-root] .tdl-pagehead-txt h1{margin:0;font:600 32px var(--tdl-font-display);color:var(--tdl-text-dark);letter-spacing:-.015em;line-height:1.05}
[data-tdl-root] .tdl-pagehead-sub{font:600 12px ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.12em;color:var(--tdl-text-light);text-transform:uppercase}
[data-tdl-root] .tdl-pagehead-rule{height:0;border-bottom:2px solid var(--tdl-text-dark);margin:16px 0 6px}

/* ─────────────────────────── 3-COLUMN GRID ─────────────────────────── */
/* LEFT = palette · CENTER = stack · RIGHT = template rail (reordered v1.0.3) */
[data-tdl-root] .tdl-grid{
  display:grid;grid-template-columns:202px 1fr 220px;gap:20px;
  padding:8px 0 88px;width:100%;
  align-items:start;
}

/* Right rail — Template context + switches */
[data-tdl-root] .tdl-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px;align-self:start}
[data-tdl-root] .tdl-tr-card{background:#fff;border:1px solid var(--tdl-border);border-radius:var(--tdl-r);padding:14px 12px 13px;box-shadow:var(--tdl-shadow-card)}
[data-tdl-root] .tdl-rail h4{margin:0 0 10px;font:700 10px var(--tdl-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--tdl-text-mid);text-align:center}
[data-tdl-root] .tdl-tr-name{font:600 18px var(--tdl-font-display);color:var(--tdl-text-dark);text-align:center;margin:0 0 3px;letter-spacing:-.01em}
[data-tdl-root] .tdl-tr-sub{font:11.5px var(--tdl-font-body);color:var(--tdl-text-light);text-align:center;margin:0 0 12px}
[data-tdl-root] .tdl-tr-meta{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-top:1px solid var(--tdl-border-light);border-bottom:1px solid var(--tdl-border-light);margin-bottom:11px}
[data-tdl-root] .tdl-tr-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
[data-tdl-root] .tdl-tr-lbl{font:600 9.5px var(--tdl-font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--tdl-text-light)}
[data-tdl-root] .tdl-tr-val{font:600 12px var(--tdl-font-body);color:var(--tdl-text-dark)}
[data-tdl-root] .tdl-tr-status{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#e8f5ee;border:1px solid #3aa367;border-radius:7px;justify-content:center}
[data-tdl-root] .tdl-tr-status .tdl-dot{width:7px;height:7px;border-radius:50%;background:#3aa367}
[data-tdl-root] .tdl-tr-status .tdl-status-lbl{font:700 10.5px var(--tdl-font-body);letter-spacing:.08em;color:#246c41;text-transform:uppercase}

/* Switches panel (K10 — Local Weather lives here, NOT in the block palette) */
/* toggle — high-contrast in BOTH states. OFF: solid mid-grey track with a
   defined border so it reads clearly on the cream card (the v1.0.0 bug was a
   too-faint track). ON: solid blue. Thumb is white with a shadow in both. */
/* toggle — OFF: dirty-gold track (#C4A35A). ON: corporate blue track. White
   thumb in both states. (Per Jeff's spec: off = gold, on = blue.) */

/* Col 2 — Slot palette */
[data-tdl-root] .tdl-palette{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px;align-self:start}
[data-tdl-root] .tdl-pl-card{background:#fff;border:1px solid var(--tdl-border);border-radius:var(--tdl-r);padding:13px 11px 12px;box-shadow:var(--tdl-shadow-card)}
[data-tdl-root] .tdl-palette h4{margin:0 0 11px;font:700 10px var(--tdl-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--tdl-text-mid);text-align:center}
[data-tdl-root] .tdl-pl-list{display:flex;flex-direction:column;gap:5px}
[data-tdl-root] .tdl-pl-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--tdl-border);background:var(--tdl-cream);border-radius:6px;cursor:grab;transition:all .15s;user-select:none}
[data-tdl-root] .tdl-pl-item--disabled{opacity:.4;cursor:not-allowed;pointer-events:auto}
[data-tdl-root] .tdl-pl-item--disabled:hover{border-color:var(--tdl-border);background:var(--tdl-cream);transform:none}
[data-tdl-root] .tdl-pl-item:hover{border-color:var(--tdl-blue);background:var(--tdl-blue-ghost);transform:translateX(2px)}
[data-tdl-root] .tdl-pl-item.tdl-dragging{opacity:.5}
[data-tdl-root] .tdl-pl-ico{flex-shrink:0;width:30px;height:24px;border-radius:5px;background:var(--tdl-blue);color:#fff;display:flex;align-items:center;justify-content:center;font:700 9.5px var(--tdl-font-body);letter-spacing:.04em}
[data-tdl-root] .tdl-pl-ico.tdl-gold{background:linear-gradient(135deg,var(--tdl-gold),var(--tdl-gold-deep))}
[data-tdl-root] .tdl-pl-label{font:600 11.5px var(--tdl-font-body);color:var(--tdl-text-dark);line-height:1.2}
[data-tdl-root] .tdl-pl-hint{margin-top:9px;padding-top:9px;border-top:1px solid var(--tdl-border-light);font:10.5px var(--tdl-font-body);color:var(--tdl-text-light);text-align:center;line-height:1.45}

/* Col 3 — Stack column */
[data-tdl-root] .tdl-stack-wrap{padding:28px 80px;display:flex;flex-direction:column;background:#fff;border:2px solid var(--tdl-cream);outline:1px solid var(--tdl-border);border-radius:var(--tdl-r);box-shadow:var(--tdl-shadow-card)}
[data-tdl-root] .tdl-stack-intro{margin:0 0 18px}
[data-tdl-root] .tdl-stack-intro p{margin:0;font:13.5px var(--tdl-font-body);color:var(--tdl-text-mid);line-height:1.55}
[data-tdl-root] .tdl-stack-intro p b{color:var(--tdl-text-dark)}
[data-tdl-root] .tdl-applies{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 11.5px var(--tdl-font-body);color:var(--tdl-gold-deep);background:var(--tdl-gold-glow);border:1px solid var(--tdl-gold);border-radius:999px;padding:4px 11px}
[data-tdl-root] .tdl-ls-head{font:600 11px var(--tdl-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--tdl-text-light);text-align:center;margin:4px 0 8px}

/* ─────────────────────────── BLOCK STACK ─────────────────────────── */

/* card drag hints — a blue insertion bar above (drop-before) or below
   (drop-after) the hovered card. Replaces the v1.0.2 thin between-block
   strips that were nearly unhittable. */
[data-tdl-root] .tdl-stack{display:flex;flex-direction:column;gap:8px;align-items:center}
/* block tiles render at 65% of the column width, centered, so the stack reads
   like a newsletter body column. Markers + add-button match. */
[data-tdl-root] .tdl-stack > *{width:65%}
[data-tdl-root] .tdl-ls-head{width:65%;margin-left:auto;margin-right:auto}
[data-tdl-root] .tdl-add-blk{width:65% !important;margin-left:auto;margin-right:auto}
[data-tdl-root] .tdl-blk.tdl-drop-before{box-shadow:0 -3px 0 -1px var(--tdl-blue)}
[data-tdl-root] .tdl-blk.tdl-drop-after{box-shadow:0 3px 0 -1px var(--tdl-blue)}

/* block card */
[data-tdl-root] .tdl-blk{background:#fff;border:1px solid var(--tdl-border);border-left:3px solid var(--tdl-brand);border-radius:var(--tdl-r);padding:11px 14px 12px 38px;position:relative;transition:box-shadow .15s,border-color .15s;box-shadow:var(--tdl-shadow-card)}
[data-tdl-root] .tdl-blk:hover{border-color:var(--tdl-blue-light);box-shadow:0 6px 18px -10px rgba(91,127,255,.28)}
[data-tdl-root] .tdl-blk.tdl-dragging{opacity:.45}
[data-tdl-root] .tdl-blk .tdl-handle{position:absolute;left:6px;top:0;bottom:0;width:24px;display:flex;align-items:center;justify-content:center;color:var(--tdl-text-light);cursor:grab;font-size:15px;letter-spacing:-2px}
[data-tdl-root] .tdl-blk .tdl-handle:hover{color:var(--tdl-blue)}
[data-tdl-root] .tdl-blk-head{display:flex;align-items:center;gap:10px}
[data-tdl-root] .tdl-pos{font:700 11px var(--tdl-font-body);color:var(--tdl-text-mid);background:var(--tdl-cream);border:1px solid var(--tdl-border);border-radius:999px;padding:2px 8px;min-width:24px;text-align:center}
[data-tdl-root] .tdl-type{font:600 14.5px var(--tdl-font-display);color:var(--tdl-text-dark);letter-spacing:-.005em}
[data-tdl-root] .tdl-blk .tdl-sp{flex:1}
[data-tdl-root] .tdl-act{background:transparent;border:1px solid var(--tdl-border);border-radius:6px;width:24px;height:24px;font-size:11px;color:var(--tdl-text-mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-left:3px;padding:0}
[data-tdl-root] .tdl-act:hover{background:var(--tdl-cream);color:var(--tdl-blue);border-color:var(--tdl-blue-light)}

/* Article photo-essay flag row (K9 — flag, not a block) */

/* legacy fixed-masthead card (only if a legacy JSON carries one; never authored) */
[data-tdl-root] .tdl-blk.tdl-fixed{background:var(--tdl-cream-dark);border-color:var(--tdl-gold);border-left:3px solid var(--tdl-gold);padding-left:36px}
[data-tdl-root] .tdl-blk.tdl-fixed .tdl-handle{color:var(--tdl-gold-deep);cursor:not-allowed;font-size:13px;letter-spacing:0}
[data-tdl-root] .tdl-lock-pill{font:700 9.5px var(--tdl-font-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--tdl-gold),var(--tdl-gold-deep));padding:3px 9px;border-radius:4px}

/* + Add block CTA */
[data-tdl-root] .tdl-add-blk{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:2.5px dotted var(--tdl-blue);background:transparent;color:var(--tdl-blue);border-radius:var(--tdl-r);font:600 13px var(--tdl-font-body);cursor:pointer;width:100%}
[data-tdl-root] .tdl-add-blk:hover{background:var(--tdl-blue-ghost);border-color:var(--tdl-blue-deep)}
[data-tdl-root] .tdl-add-blk .tdl-circ{width:24px;height:24px;border-radius:50%;background:var(--tdl-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 16px var(--tdl-font-body);line-height:1}

/* footer actions — plain flex bar (NOT sticky). The v1.0.0 sticky footer could
   clip its rightmost child (Save) when the tab pane lacked a stable stacking
   context, leaving Cancel visible but Save gone. A normal-flow flex bar with
   flex-wrap can never clip a button off-canvas. */
[data-tdl-root] .tdl-footer-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;border-top:1px solid var(--tdl-border);box-shadow:0 -6px 20px -10px rgba(30,42,58,.18);padding:14px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
[data-tdl-root] .tdl-reset{background:transparent;border:none;color:var(--tdl-text-mid);font:600 12.5px var(--tdl-font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
[data-tdl-root] .tdl-reset:hover{color:var(--tdl-text-dark)}
[data-tdl-root] .tdl-footer-bar .tdl-sp{flex:1 1 auto;min-width:8px}
[data-tdl-root] .tdl-btn{flex:0 0 auto;padding:9px 18px;border-radius:7px;font:600 13px var(--tdl-font-body);cursor:pointer;border:1px solid transparent;white-space:nowrap}
[data-tdl-root] .tdl-btn.tdl-cancel{background:#fff;border-color:var(--tdl-border-input);color:var(--tdl-text-mid)}
[data-tdl-root] .tdl-btn.tdl-cancel:hover{border-color:var(--tdl-text-mid)}
[data-tdl-root] .tdl-btn.tdl-cancel:disabled{opacity:.4;cursor:not-allowed}
/* Save: always visible, high contrast. Disabled = dimmed but PRESENT. */
/* Save: corporate blue #5B7FFF background, WHITE text — always, in every state.
   Literal hex + !important on the three load-bearing props so no other
   stylesheet on the T-A page can override it (the empty blue-outline box bug
   was a foreign rule winning the cascade). Disabled = dimmed but still blue. */
[data-tdl-root] .tdl-btn.tdl-save{
  background:#5B7FFF !important;
  color:#fff !important;
  border:1px solid #3E5BD4 !important;
  box-shadow:0 1px 3px -1px rgba(62,91,212,.5);
}
[data-tdl-root] .tdl-btn.tdl-save:hover:not(:disabled){background:#3E5BD4 !important}
[data-tdl-root] .tdl-btn.tdl-save:disabled{opacity:.5;cursor:not-allowed}
[data-tdl-root] .tdl-btn.tdl-save.tdl-saving{opacity:.75;cursor:wait}
[data-tdl-root] .tdl-dirty-note{font:11.5px var(--tdl-font-body);color:var(--tdl-gold-deep);background:var(--tdl-gold-glow);border:1px solid var(--tdl-gold);border-radius:999px;padding:3px 9px}
[data-tdl-root] .tdl-dirty-note[hidden]{display:none}

/* mini spinner for async save (T-A async-feedback rule) */
[data-tdl-root] .tdl-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:tdl-spin .6s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes tdl-spin{to{transform:rotate(360deg)}}

/* scope note */
[data-tdl-root] .tdl-scope-note{margin:0 0 18px;padding:11px 14px;background:var(--tdl-cream);border:1px solid var(--tdl-border);border-left:3px solid var(--tdl-blue);border-radius:6px;display:flex;align-items:flex-start;gap:10px;font:13px var(--tdl-font-body);color:var(--tdl-text-mid)}

/* toast */
/* toasts — anchored to the tab root (position:absolute, root is the
   positioning context) so an ancestor transform/overflow can't push them
   off-screen or hide them behind the fixed navbar (the v1.0.5 position:fixed
   bug). Bold dark navy + white text, high z-index. */
/* toasts use the platform .studio-toast standard (defined in
   title-admin-page-design). They render into <body>, so these rules are NOT
   scoped to [data-tdl-root]. We re-declare defensively in case load order puts
   this file first, plus an error variant + bold-text color. */
.studio-toast.tdl-toast{position:fixed;bottom:32px;right:32px;z-index:100000;padding:12px 20px;background:#4060dd;color:#fff;font:600 14px var(--tdl-font-body,'DM Sans',sans-serif);letter-spacing:.01em;border-radius:6px;box-shadow:0 8px 32px rgba(91,127,255,.32),0 2px 8px rgba(30,42,58,.18);opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.studio-toast.tdl-toast.visible{opacity:1;transform:translateY(0)}
.studio-toast.tdl-toast b{color:#dbb868}
.studio-toast.tdl-toast.studio-toast--err{background:#c0563f;box-shadow:0 8px 32px rgba(192,86,63,.3),0 2px 8px rgba(30,42,58,.18)}

/* empty / loading states */
[data-tdl-root] .tdl-empty{padding:40px 20px;text-align:center;color:var(--tdl-text-light);font:13px var(--tdl-font-body)}

/* ── Save confirmation modal (Option C) ──────────────────────────────────────
   Base overlay/modal visuals come from the page's ix-modals stylesheet. These
   rules add the fade-in, the countdown bar, and ensure the overlay clears the
   fixed action bar. Rendered into <body>, so NOT scoped to [data-tdl-root]. */
.ix-overlay.tdl-save-overlay{opacity:0;transition:opacity .28s ease;z-index:100001}
.ix-overlay.tdl-save-overlay.tdl-save-overlay--visible{opacity:1}
.tdl-save-modal{max-width:440px}
.tdl-save-modal-text{margin:0 0 16px;font:14px var(--ix-font-body,'DM Sans',sans-serif);line-height:1.55;color:#5A6378}
.tdl-save-modal-bar{height:4px;border-radius:999px;background:#EFF1F5;overflow:hidden}
.tdl-save-modal-fill{display:block;height:100%;width:100%;background:#5B7FFF;border-radius:999px}
.tdl-save-modal-refresh{background:#5B7FFF !important;color:#fff !important;border:1px solid #4060dd !important}
.tdl-save-modal-refresh:hover{background:#4060dd !important}