/************************************************************
 * Shared between resume.html (style.css) and syokumu.html (syokumu.css).
 * Only rules that were byte-identical (or safely mergeable) across both
 * page stylesheets live here — anything with a real per-page difference
 * (e.g. .left, .right, .container, .zoom-controls positioning, the 768px
 * form-field breakpoint) stays in its own page stylesheet.
 ************************************************************/
:root {
  /* Chrome palette remapped to the Swiss system (swiss-base.css).
     The document (.resume-page / .mhlw-sheet) does NOT use these
     tokens and keeps its own hardcoded colors, so PDF output is
     unaffected — only the editor UI shifts to the unified palette. */
  --brand: var(--sw-accent);
  --brand-dark: #0b7e60;
  --accent: var(--sw-accent);
  --accent-dark: #0b7e60;
  --danger: #c0392b;
  --danger-dark: #a5352a;
}

/* ---- Pane resizer + scrollbar ---- */
.pane-resizer {
  flex: 0 0 14px;
  width: 14px;
  margin-left: -7px;
  margin-right: -7px;
  background: transparent;
  border: 0;
  cursor: col-resize;
  position: relative;
  z-index: 500;
  touch-action: none;
}

.pane-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  border-radius: 999px;
  background: rgba(0, 226, 138, 0.32);
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.08);
  transform: translateX(-50%);
  transition: width 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.pane-resizer:hover,
.pane-resizer:focus-visible {
  background: transparent;
  outline: none;
}

.pane-resizer:hover::before,
.pane-resizer:focus-visible::before {
  width: 6px;
  background: rgba(0, 226, 138, 0.74);
  box-shadow: 0 0 0 3px rgba(0, 226, 138, 0.18);
}

body.is-pane-resizing {
  cursor: col-resize;
  user-select: none;
}

.left::-webkit-scrollbar {
  width: 8px;
}

.left::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.left::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
  border: 2px solid #f0f0f0;
}

/* ---- Header (aligned to the home masthead: solid paper, hairline
   bottom rule, no blur/heavy shadow) ---- */
.header-left {
  background-color: var(--sw-surface);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--sw-line-strong);
  padding: 1.1rem 24px;
  margin-bottom: 30px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-branding {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-home-link {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.brand-home-link:focus-visible {
  outline: 2px solid var(--sw-accent);
  outline-offset: 3px;
}

.brand-home-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  background: var(--sw-ink);
  color: var(--sw-paper);
  box-shadow: 0 10px 24px rgba(21, 24, 27, 0.22);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.brand-home-link:hover .brand-home-tooltip,
.brand-home-link:focus-visible .brand-home-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.header-left h1 {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: var(--sw-font-logo);
}

.header-left .smart {
  color: var(--sw-ink);
  font-family: var(--sw-font-logo);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.header-left .dash {
  font-family: var(--sw-font-logo);
  font-size: 1.6rem;
  margin: 0 2px;
  color: var(--sw-ink-3);
  font-weight: 500;
}

/* Same dedicated brighter shade as .sw-logo .cv in the shared masthead
   (large bold display type, more contrast headroom than body text). */
.header-left .cv {
  color: #0ea563;
  font-family: var(--sw-font-logo);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.header-left h2 {
  font-size: 0.82rem;
  color: var(--sw-ink-3);
  padding: 0;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

.document-switch-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(44, 221, 180, 0.65);
  border-radius: 999px;
  color: #178b80;
  background: rgba(44, 221, 180, 0.08);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.document-switch-link:hover,
.document-switch-link:focus-visible {
  border-color: #2cddb4;
  color: #178b80;
  background: rgba(44, 221, 180, 0.16);
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--sw-line-strong);
  background: var(--sw-surface);
  color: var(--sw-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: border-color var(--sw-dur) var(--sw-ease), color var(--sw-dur) var(--sw-ease);
}

.back-link:hover {
  border-color: var(--sw-accent);
  color: var(--sw-accent);
}

/* ---- Save-status banner ---- */
.save-status-banner {
  margin: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(4px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #334155;
  transition: all 0.3s ease;
}

.save-status-banner:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.save-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  position: relative;
}

.save-status-label {
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.save-status-value {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.save-status-banner[data-state="saved"] .save-status-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.save-status-banner[data-state="saving"] .save-status-dot {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.save-status-banner[data-state="dirty"] .save-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* ---- Access-state badges ---- */
.header-subtitle-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.access-state-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.access-state-label {
  display: none;
}

.access-state-value {
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.access-state-badge[data-role="owner"] {
  background: var(--sw-accent-soft);
  color: var(--sw-accent);
  border-color: rgba(0, 226, 138, 0.2);
}
.access-state-badge[data-role="owner"]::before {
  content: '👑';
  font-size: 11px;
}

.access-state-badge[data-role="editor"] {
  background: rgba(21, 24, 27, 0.06);
  color: var(--sw-ink-2);
  border-color: var(--sw-line-strong);
}
.access-state-badge[data-role="editor"]::before {
  content: '✏️';
  font-size: 11px;
}

.access-state-badge[data-role="viewer"] {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.2);
}
.access-state-badge[data-role="viewer"]::before {
  content: '👁️';
  font-size: 11px;
}

/* ---- Choice / step boxes ---- */
.choice-box {
  border: none;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: #555;
  background-color: transparent;
  width: 90%;
  line-height: 1.6;
}

.first-box,
.second-box {
  border: none;
  margin: 20px auto;
  width: 90%;
  padding: 15px;
  text-align: center;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #00baa3;
  background-color: #e0fbf7;
  box-shadow: 0 2px 4px rgba(0, 186, 163, 0.1);
}

/* ---- Zoom buttons (positioning of .zoom-controls itself stays per-page) ---- */
.zoom-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #2cddb4;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  line-height: 1;
}

.zoom-btn:hover {
  background: #20b2aa;
  transform: scale(1.1);
}

.zoom-btn:active {
  transform: scale(0.95);
}

.zoom-level {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  min-width: 45px;
  text-align: center;
}

/* ---- Shared button system: add/remove-row (.btn-primary/.btn-danger) and
   the PDF export button (.pdf-btn). Both pages apply these same classes. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
  color: #fff;
}

.btn:hover {
  opacity: 0.9;
}

/* Same mint as .pdf-btn/.storage-btn-primary, by request — the
   add-row button reads as part of the same "editor action" family as
   save/export, not the app's standard green. */
.btn-primary {
  background-color: #2cddb4;
}

.btn-primary:hover {
  background-color: #20b2aa;
}

/* A soft pink fill with dark-red text, not a solid red block — this
   button removes one form row (undo is just "add it back"), so it
   doesn't need to look as alarming as a real destructive confirm.
   Matches .storage-item-btn-danger's already-calm language. */
.btn-danger {
  background-color: #fee2e2;
  color: #b91c1c;
}

.btn-danger:hover {
  background-color: #fecaca;
}

.pdf-btn-wrapper {
  text-align: center;
  margin-top: 50px;
  padding-bottom: 50px;
}

/* Mint, by request — kept as the one deliberate exception to the
   app's fluorescent-green primary-action color, not a stray leftover.
   Previously this same mint value lived in a second, later "match the
   standalone static editor" rule with equal specificity to the rule
   above it, so it won by cascade order alone — fragile, and looked
   like an accident. Declared once, directly, so it's an intentional
   choice instead of an emergent one. */
.pdf-btn {
  background: linear-gradient(135deg, #2cddb4 0%, #20b2aa 100%);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 15px 40px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(44, 221, 180, 0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  display: block;
  margin: 0 auto;
}

.pdf-btn:hover {
  background: linear-gradient(135deg, #20b2aa 0%, #1c9c95 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(44, 221, 180, 0.4);
}

.pdf-btn:active {
  transform: translateY(0);
}

/* ---- Save / storage / share modal system ---- */
/* A visible card, not a plain padded strip — this cluster (title,
   save/save-as-new/history, overwrite target) is a distinct, denser
   set of controls from the form fields above it (which just export
   or store the document, they don't describe it), so it gets its own
   boundary instead of blending into the same flow. Compound selector
   (.storage-controls.storage-panel) so it outranks the plain
   .storage-controls padding rule in style.css/syokumu.css regardless
   of which stylesheet happens to load last — the same load-order trap
   that broke the mobile stacked layout (see the media query further
   up this file). Left untouched: the bare .storage-controls used by
   StatusMessage's top-of-form banner, which only carries that one
   class and stays a plain strip. */
.storage-title-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  background-color: #fff;
}

.storage-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.overwrite-target-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.overwrite-target-label {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

.overwrite-target-value {
  flex: 1;
  min-width: 180px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.overwrite-target-change-btn {
  min-width: 84px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
}

.storage-btn {
  border: none;
  border-radius: 8px;
  height: 38px;
  min-width: 112px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* Same mint as .pdf-btn/.btn-primary above, by request — the editor's
   save/export/add-row actions share this one deliberate exception to
   the app's fluorescent-green primary-action color. Declared once
   here, not duplicated in a second later rule (that pattern is what
   made the previous mint styling look like an accident instead of a
   choice). */
.storage-btn-primary {
  background: #2cddb4;
  color: #ffffff;
}

.storage-btn-primary:hover {
  background: #20b2aa;
}

.storage-btn-secondary {
  background: #e8eef7;
  color: #2d3748;
}

.storage-btn-secondary:hover {
  background: #d8e3f2;
}

.storage-modal[hidden] {
  display: none;
}

.storage-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.storage-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.storage-modal-panel {
  position: relative;
  width: min(860px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.storage-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.storage-modal-header h3 {
  margin: 0;
  font-size: 16px;
}

.storage-close-btn {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #4b5563;
}

.storage-list {
  padding: 14px 16px 16px;
  overflow: auto;
}

.storage-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

.storage-item + .storage-item {
  margin-top: 10px;
}

.storage-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.storage-item-meta {
  margin-top: 3px;
  font-size: 12px;
  color: #6b7280;
}

/* Was a GitHub-dark-style code box (near-black bg, light text) — the
   one dark surface in an otherwise all-light app, which read as a
   mistake rather than a deliberate "code snippet" moment. Matches the
   app's own light surface language instead. */
.share-link-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 4px;
}

.share-link-url {
  flex: 1;
  min-width: 0;
  color: #334155;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.share-link-copy-btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  height: 30px;
  padding: 0 12px;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.share-link-copy-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.share-link-copy-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.storage-item-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.share-inline-control {
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-width: 360px;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.share-inline-url {
  width: 340px;
  max-width: 52vw;
  border: none;
  outline: none;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0 10px;
}

.share-inline-copy-btn {
  border: none;
  border-left: 1px solid #d1d5db;
  height: 100%;
  padding: 0 12px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.share-inline-copy-btn:hover {
  background: #f3f4f6;
}

.share-inline-copy-btn:disabled {
  color: #6b7280;
  cursor: default;
}

.share-manage-control {
  display: contents;
}

.share-manage-toggle-btn {
  align-self: flex-start;
}

.share-manage-panel {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-basis: 100%;
  width: 100%;
  order: 1000;
}

.share-manage-panel[hidden] {
  display: none;
}

.share-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-manage-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1f2937;
}

.share-manage-expiry {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  background: #fff;
}

.share-manage-fixed-expiry {
  font-size: 12px;
  color: #334155;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
}

.share-manage-status {
  font-size: 12px;
  color: #475569;
}

.storage-item-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 7px;
  height: 32px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.storage-item-btn:hover {
  background: #f3f4f6;
}

.storage-item-btn-danger {
  border-color: #f0b6b6;
  color: var(--danger-dark);
  background: #fff5f5;
}

.storage-item-btn-danger:hover {
  background: #ffe9e9;
}

.storage-empty {
  color: #6b7280;
  font-size: 14px;
}

@media (max-width: 900px) {
  .share-inline-control {
    min-width: 0;
    width: 100%;
  }

  .share-inline-url {
    width: 100%;
    max-width: none;
  }
}

/* ---- Stacked mobile layout (shared subset only — each page keeps its own
   .zoom-controls override alongside this, since fixed vs sticky positioning
   differs per page).
   `body` prefix is load-bearing, not decorative: style.css/syokumu.css load
   AFTER this file and declare `.container`/`.left`/`.right` with the same
   plain-class specificity but no media guard, so at equal specificity the
   later stylesheet always won regardless of viewport — this media query
   was silently dead, and the two-pane editor never actually stacked on
   mobile (the form pane was squeezed to a sliver at the fixed desktop
   width/height while only the preview pane was visible). Adding one
   ancestor selector outranks the unconditional desktop rule without
   touching load order or any other cascade relationship. */
@media (max-width: 900px) {
  html,
  body {
    height: auto;
  }

  body .container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  body .left,
  body .right {
    flex: none;
    width: 100%;
    max-height: none;
  }

  .pane-resizer {
    display: none;
  }

  body .left {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    overflow-y: visible;
  }

  body .right {
    padding: 20px 12px 28px;
    overflow-x: auto;
    overflow-y: auto;
  }
}

/* ---- AI auto-fill highlight ---- */
[data-ai-filled="true"] {
  background-color: #f0fdfa !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px rgba(0, 226, 138, 0.15);
}

/* ---- "Create from recording" banner (links to auto-generate.html) ---- */
.vtt-create-banner {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0;
  padding: 0 40px;
}

.vtt-create-banner button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  background: var(--brand);
  cursor: pointer;
  transition: background 0.2s;
}

.vtt-create-banner button:hover {
  background: var(--brand-dark);
}

@media (max-width: 768px) {
  .vtt-create-banner button {
    width: 100%;
  }
}