/* Code the Moment shared web + responsive styles */
* { box-sizing: border-box; }

.ctm-print-page {
  --ink: #172033;
  --muted: #5d6475;
  --line: #d9deea;
  --soft: #f5f7fb;
  --blue: #246bfe;
  --green: #087f5b;
  --purple: #5c3cff;
  --green-soft: #eaf8f0;
  --blue-soft: #eaf2ff;
  --yellow: #fff5d9;
  --shadow: 0 8px 24px rgba(23, 32, 51, .05);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--ink);
  overflow-x: hidden;
}

.ctm-top { display: flex; justify-content: flex-start; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ctm-btn { border: 1px solid var(--line); border-radius: 999px; padding: .65rem 1rem; font-weight: 800; text-decoration: none !important; color: var(--ink) !important; background: #fff; }
.ctm-btn-print { display: none !important; }

.ctm-sheet { width: 100%; background: white; border: 1px solid var(--line); border-top: 8px solid var(--green); border-radius: 22px; padding: 1.25rem; box-shadow: var(--shadow); overflow-x: hidden; overflow-y: visible; }
.ctm-sheet.teacher { border-top-color: var(--purple); }
.ctm-head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.ctm-tag { display: inline-flex; border-radius: 999px; padding: .35rem .65rem; font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; background: #e8f8f1; color: var(--green); margin-bottom: .6rem; }
.ctm-tag.teacher { background: #eeeaff; color: var(--purple); }
.ctm-meta { min-width: 170px; text-align: right; color: var(--muted); font-size: .95rem; }
.ctm-sheet h1 { margin: .1rem 0 .35rem; line-height: 1.08; letter-spacing: -.04em; }
.ctm-sheet p { color: var(--muted); }

.ctm-grid { display: grid; gap: .85rem; align-items: start; }
.ctm-grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ctm-grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ctm-grid.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ctm-note { background: var(--blue-soft); border: 1px solid #cfe0ff; border-radius: 16px; padding: 1rem; margin: .8rem 0; overflow-wrap: break-word; word-break: normal; }
.ctm-note.green { background: var(--green-soft); border-color: #ccefdc; }
.ctm-note.yellow { background: var(--yellow); border-color: #ffe5a3; }
.ctm-note.red { background: #fff0f0; border-color: #ffd2d2; }
.ctm-grid .ctm-note { margin: 0; padding: .95rem 1rem; align-self: start; min-height: 0; }
.ctm-grid .ctm-note h3 { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.18; letter-spacing: -.01em; }
.ctm-grid .ctm-note p { margin: 0; line-height: 1.4; font-size: .95rem; }
.ctm-grid .ctm-note strong { line-height: 1.35; }

.ctm-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.ctm-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .28rem .6rem; font-size: .82rem; font-weight: 750; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.ctm-note.green .ctm-chip { border-color: #ccefdc; background: #ffffff; }
.ctm-chip.blue { border-color: #cfe0ff; background: #f8fbff; }
.ctm-chip.green { border-color: #ccefdc; background: #f7fffb; }
.ctm-chip.purple { border-color: #d9d1ff; background: #fbfaff; }

.ctm-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; border-collapse: collapse; margin: 1rem 0; border: 1px solid var(--line); }
.ctm-table col, .ctm-table colgroup { max-width: 100% !important; }
.ctm-table th, .ctm-table td { border: 1px solid var(--line); padding: .85rem .9rem; text-align: left; vertical-align: top; line-height: 1.45; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; overflow: hidden; }
.ctm-table th *, .ctm-table td * { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: break-word !important; }
.ctm-table th { background: var(--soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .035em; }
.ctm-table td.blank { height: 92px; }
.ctm-table ul, .ctm-table ol, .ctm-flow-card ul, .ctm-flow-card ol, .ctm-note ul, .ctm-note ol { margin: 0; padding-left: 1.15rem; }
.ctm-table li, .ctm-flow-card li, .ctm-note li { margin: 0 0 .25rem; line-height: 1.35; }
.ctm-table li:last-child, .ctm-flow-card li:last-child, .ctm-note li:last-child { margin-bottom: 0; }
.ctm-list-plain { margin: 0; padding-left: 1.15rem; }
.ctm-list-plain li { margin: 0 0 .25rem; line-height: 1.35; }

.ctm-frame { min-height: 58px; padding: .85rem 1rem; border: 1px dashed #9aa6c0; background: #fbfcff; border-radius: 14px; margin: .75rem 0; overflow-wrap: break-word; }
.ctm-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 1rem 0; }
.ctm-checklist li { border: 1px solid var(--line); border-radius: 14px; padding: .85rem; overflow-wrap: break-word; }
.ctm-box { display: inline-grid; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; margin-right: .5rem; vertical-align: -3px; }

.ctm-storyboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.ctm-story-card { min-width: 0; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.ctm-story-card h3 { background: var(--green-soft); margin: 0; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.ctm-draw { min-height: 190px; margin: .85rem; border: 2px dashed #aab3c8; border-radius: 14px; background: #fff; }
.ctm-story-field { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-height: 46px; border-top: 1px solid var(--line); }
.ctm-story-field strong { padding: .55rem .65rem; background: var(--soft); border-right: 1px solid var(--line); white-space: nowrap; font-size: .88rem; }
.ctm-wide-line { min-height: 56px; border-bottom: 2px solid #b8c0d5; color: var(--muted); font-weight: 800; margin-top: .85rem; overflow-wrap: break-word; }

.ctm-rubric-print, .ctm-flow-print { display: none; }
.ctm-landscape, .ctm-wide { max-width: 1280px; }
.ctm-landscape .ctm-table, .ctm-wide .ctm-table { min-width: 0 !important; max-width: 100% !important; }
.ctm-rubric-web, .ctm-flow-web { display: table; }

@media (max-width: 900px) {
  .ctm-head { display: block; }
  .ctm-meta { text-align: left; margin-top: .75rem; }
  .ctm-sheet { padding: 1rem; overflow-x: hidden; }
  .ctm-grid.two, .ctm-grid.three, .ctm-grid.four { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ctm-table, .ctm-table tbody, .ctm-table tr, .ctm-table td { display: block; width: 100% !important; }
  .ctm-table { min-width: 0 !important; border: 0; margin: 1rem 0; table-layout: auto !important; }
  .ctm-table tr:first-child { display: none; }
  .ctm-table tr { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: .85rem; margin-bottom: .9rem; box-shadow: 0 4px 14px rgba(23,32,51,.04); }
  .ctm-table td { border: 0; border-bottom: 1px solid #eef1f7; padding: .55rem 0; line-height: 1.45; overflow: visible; }
  .ctm-table td:last-child { border-bottom: 0; }
  .ctm-table td:first-child { font-weight: 900; font-size: 1.05rem; color: var(--ink); padding-top: 0; }
  .ctm-table td:not(:first-child)::before { display: block; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); margin-bottom: .18rem; }

  .ctm-table:not(.ctm-flow-web):not(.ctm-rubric-web):not(.small-moment-table):not(.debug-table):not(.reflection-table) td:nth-child(2)::before { content: "Details"; }
  .ctm-table:not(.ctm-flow-web):not(.ctm-rubric-web):not(.small-moment-table):not(.debug-table):not(.reflection-table) td:nth-child(3)::before { content: "Notes"; }
  .ctm-table:not(.ctm-flow-web):not(.ctm-rubric-web):not(.small-moment-table):not(.debug-table):not(.reflection-table) td:nth-child(4)::before { content: "More"; }

  .ctm-flow-web td:nth-child(2)::before { content: "Time"; }
  .ctm-flow-web td:nth-child(3)::before { content: "Best Use"; }
  .ctm-flow-web td:nth-child(4)::before { content: "Teacher Move"; }
  .ctm-flow-web td:nth-child(5)::before { content: "Student Product"; }

  .ctm-rubric-web td:nth-child(2)::before { content: "3 - Strong"; }
  .ctm-rubric-web td:nth-child(3)::before { content: "2 - Developing"; }
  .ctm-rubric-web td:nth-child(4)::before { content: "1 - Starting"; }

  .small-moment-table td:nth-child(2)::before { content: "My Response"; }
  .debug-table td:nth-child(2)::before { content: "What I Did"; }
  .reflection-table td:nth-child(2)::before { content: "My Response"; }

  .ctm-table td.blank { min-height: 88px; height: auto; }
  .ctm-storyboard { grid-template-columns: 1fr; }
  .ctm-story-field { grid-template-columns: 116px minmax(0, 1fr); }
  .ctm-chips { gap: .35rem; }
  .ctm-chip { white-space: normal; }
}

@media print {
  body { font-size: 11pt !important; }
  .ctm-top { display: none !important; }
  .ctm-sheet { box-shadow: none !important; border-radius: 0 !important; }
}