/* DT Attuned Workbook — book-like styling.
   Two-page spread on desktop; single column on mobile. */

.dtcw {
	/* Brand: purple #6a4c89, lighter #a987c2 / #b39ddb. Light-purple paper. */
	--dtcw-ink:      #352c46;
	--dtcw-soft:     #6e6385;
	--dtcw-paper:    #f7f2fc;
	--dtcw-paper-2:  #ece2f7;
	--dtcw-line:     #ddd0ec;
	--dtcw-accent:   #6a4c89;
	--dtcw-accent-2: #815ba6;
	--dtcw-done:     #5a7d52;
	--dtcw-body:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--dtcw-head:     'Fredoka', 'Poppins', sans-serif;

	display: grid;
	/* Index rail 20% of the template width; the book fills the rest.
	   No max-width — the page template dictates the total width. */
	grid-template-columns: 20% 1fr;
	gap: 1.25rem;
	width: 100%;
	color: var(--dtcw-ink);
	font-family: var(--dtcw-body);
	line-height: 1.5;
}

/* Headings in Fredoka. */
.dtcw-cover__title,
.dtcw-page__chapter,
.dtcw-practice__name,
.dtcw-paws__tab { font-family: var(--dtcw-head); }

/* ---- Cover / gate --------------------------------------------------- */
.dtcw--gate { display: block; }
.dtcw-cover {
	background: var(--dtcw-paper-2);
	border: 1px solid var(--dtcw-line);
	border-radius: 10px;
	padding: 2rem 1.5rem;
	text-align: center;
}
.dtcw-cover--mini { padding: 1.1rem 1rem; text-align: left; border-radius: 8px; }
.dtcw-cover__kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; color: var(--dtcw-accent); margin: 0 0 .4rem; }
.dtcw-cover__title { font-size: 1.5rem; margin: 0 0 .5rem; font-weight: 600; }
.dtcw-cover--mini .dtcw-cover__title { font-size: 1.1rem; margin: 0; }
.dtcw-cover__sub { color: var(--dtcw-soft); font-style: italic; margin: 0 0 1.2rem; }

/* ---- Rail ----------------------------------------------------------- */
.dtcw-rail { align-self: start; position: sticky; top: 1rem; }
.dtcw-progress { margin: 1rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.dtcw-progress__bar { flex: 1; height: 6px; background: var(--dtcw-paper-2); border-radius: 4px; overflow: hidden; }
.dtcw-progress__bar span { display: block; height: 100%; background: var(--dtcw-accent); transition: width .3s ease; }
.dtcw-progress__label { font-size: .75rem; color: var(--dtcw-soft); }

.dtcw-contents { font-size: .9rem; }
.dtcw-contents__part { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: var(--dtcw-accent); margin: 1rem 0 .35rem; }
.dtcw-contents ul { list-style: none; margin: 0; padding: 0; }
.dtcw-contents__item {
	display: flex; align-items: baseline; gap: .5rem;
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: .3rem .25rem; color: var(--dtcw-ink); font-family: inherit; font-size: .88rem;
	border-radius: 5px;
}
.dtcw-contents__item:hover { background: var(--dtcw-paper-2); }
.dtcw-contents__item.is-done .dtcw-contents__name { color: var(--dtcw-soft); }
.dtcw-contents__item.is-locked { opacity: .55; }
.dtcw-contents__tick { color: var(--dtcw-done); font-size: .85rem; width: 1em; flex: 0 0 auto; }

/* ---- Book / spread -------------------------------------------------- */
.dtcw-book {
	background: var(--dtcw-paper);
	border: 1px solid var(--dtcw-line);
	border-radius: 10px;
	box-shadow: 0 12px 30px -18px rgba(0,0,0,.35);
	overflow: hidden;
}
/* Description sits ABOVE the input area, which then gets the full book width. */
.dtcw-spread { display: block; }
.dtcw-spread.is-hidden { display: none; }
.dtcw-page { padding: 1.8rem 2.2rem; }
.dtcw-page--left {
	background: linear-gradient( to bottom, var(--dtcw-paper-2), var(--dtcw-paper) );
	border-bottom: 1px solid var(--dtcw-line);
}
/* Keep the prose at a readable measure even on a very wide template. */
.dtcw-page--left .dtcw-page__teaser,
.dtcw-page--left .dtcw-practice__prompt { max-width: 68ch; }

/* Input area: fill the width. Short fields sit two-up; anything that wants
   room (reflections, checklists, tables, grids, trackers) spans the row. */
.dtcw-page--right {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 2.5rem;
	align-content: start;
}
.dtcw-field--textarea,
.dtcw-field--checklist,
.dtcw-field--tracker30,
.dtcw-field--daygrid,
.dtcw-field--rows,
.dtcw-field--log,
.dtcw-spread__foot,
.dtcw-turn,
.dtcw-entryform,
.dtcw-entries,
.dtcw-lock { grid-column: 1 / -1; }

/* A single field that is a dated log (add box + running list). */
.dtcw-logadd { background: rgba( 255,255,255,.45 ); border: 1px solid var(--dtcw-line); border-radius: 8px; padding: .7rem .8rem; }
.dtcw-logadd .dtcw-spread__foot { margin-top: .6rem; }
.dtcw-entry__note { font-size: .9rem; }

/* Repeatable practice: the add-entry form is itself a two-up field grid. */
.dtcw-entryform { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0 2.5rem; }

/* Running list of logged entries. */
.dtcw-entries { margin-top: 1.6rem; border-top: 1px dashed var(--dtcw-line); padding-top: 1.1rem; }
.dtcw-entries__head { font-family: var(--dtcw-head); font-size: .98rem; color: var(--dtcw-accent); margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; }
.dtcw-entries__count { background: var(--dtcw-accent); color: #fff; border-radius: 20px; padding: .05rem .55rem; font-size: .72rem; }
.dtcw-entries__list { display: flex; flex-direction: column; gap: .8rem; }
.dtcw-entry { background: rgba( 255,255,255,.6 ); border: 1px solid var(--dtcw-line); border-radius: 8px; padding: .7rem .9rem; }
.dtcw-entry__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.dtcw-entry__date { font-size: .75rem; color: var(--dtcw-soft); letter-spacing: .02em; }
.dtcw-entry__del { background: none; border: 0; cursor: pointer; color: var(--dtcw-soft); font-size: 1.15rem; line-height: 1; padding: 0 .2rem; }
.dtcw-entry__del:hover { color: #a4443a; }
.dtcw-entry__body { margin: 0; display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: .2rem .9rem; }
.dtcw-entry__body--single { grid-template-columns: 1fr; }
.dtcw-entry__body dt { font-size: .72rem; color: var(--dtcw-soft); }
.dtcw-entry__body dd { margin: 0; font-size: .9rem; }
.dtcw-entry__rows { margin: .2rem 0; padding-left: 1.1rem; }

.dtcw-page__kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--dtcw-accent); margin: 0 0 .4rem; }
.dtcw-page__chapter { font-size: 1.35rem; margin: 0 0 .2rem; font-weight: 600; }
.dtcw-page__dog { font-style: italic; color: var(--dtcw-accent-2); margin: 0 0 1rem; font-size: .95rem; }
.dtcw-page__teaser { color: var(--dtcw-soft); font-style: italic; margin: 0 0 1.5rem; }
.dtcw-practice__name {
	font-weight: 600; font-size: 1.05rem; color: var(--dtcw-accent);
	border-top: 1px solid var(--dtcw-line); padding-top: 1rem; margin: 0 0 .5rem;
}
.dtcw-practice__prompt { margin: 0; }

/* ---- Fields --------------------------------------------------------- */
.dtcw-field { margin: 0 0 1.15rem; }
.dtcw-field__label { display: block; font-size: .8rem; color: var(--dtcw-soft); letter-spacing: .02em; margin: 0 0 .35rem; }
.dtcw-input {
	width: 100%; box-sizing: border-box; font-family: inherit; font-size: .95rem; color: var(--dtcw-ink);
	background: transparent; border: 0; border-bottom: 1px solid var(--dtcw-line);
	padding: .35rem .1rem; line-height: 1.6;
}
.dtcw-input:focus { outline: 0; border-bottom-color: var(--dtcw-accent); }
.dtcw-input--area {
	border: 1px solid var(--dtcw-line); border-radius: 6px; padding: .5rem .7rem;
	background: rgba(255,255,255,.5); resize: vertical; min-height: 7em;
	/* lined-paper feel */
	background-image: linear-gradient( transparent 95%, var(--dtcw-line) 0 );
	background-size: 100% 1.7em; line-height: 1.7em;
}
.dtcw-input--big { min-height: 18rem; }

/* Checklist */
.dtcw-checklist { display: flex; flex-wrap: wrap; gap: .4rem; }
.dtcw-check {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: inherit; font-size: .85rem; cursor: pointer;
	border: 1px solid var(--dtcw-line); background: rgba(255,255,255,.5);
	border-radius: 20px; padding: .3rem .7rem; color: var(--dtcw-ink);
}
.dtcw-check__box { width: .8em; height: .8em; border: 1px solid var(--dtcw-accent); border-radius: 3px; display: inline-block; }
.dtcw-check.is-on { background: var(--dtcw-accent); color: #fff; border-color: var(--dtcw-accent); }
.dtcw-check.is-on .dtcw-check__box { background: #fff; }

/* 30-day tracker */
.dtcw-tracker { display: grid; grid-template-columns: repeat(10, 1fr); gap: .35rem; }
.dtcw-day {
	aspect-ratio: 1; font-family: inherit; font-size: .8rem; cursor: pointer;
	border: 1px solid var(--dtcw-line); background: rgba(255,255,255,.5); border-radius: 6px; color: var(--dtcw-soft);
}
.dtcw-day.is-on { background: var(--dtcw-done); color: #fff; border-color: var(--dtcw-done); }

/* Day grid */
.dtcw-daygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.dtcw-daygrid__cell { display: flex; flex-direction: column; gap: .2rem; }
.dtcw-daygrid__cell span { font-size: .7rem; color: var(--dtcw-soft); text-align: center; }
.dtcw-daygrid__in { text-align: center; font-size: .85rem; }

/* Rows table */
.dtcw-rows { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dtcw-rows th { text-align: left; font-weight: 600; font-size: .72rem; color: var(--dtcw-soft); padding: .2rem .3rem; border-bottom: 1px solid var(--dtcw-line); }
.dtcw-rows td { padding: .1rem .3rem; border-bottom: 1px solid var(--dtcw-line); }
.dtcw-rows__in { border: 0; }
.dtcw-rows td { vertical-align: top; }
.dtcw-rows select.dtcw-rows__in,
.dtcw-rows textarea.dtcw-rows__in {
	width: 100%; box-sizing: border-box; font-family: inherit; font-size: .85rem; color: var(--dtcw-ink);
	border: 1px solid var(--dtcw-line); border-radius: 4px; background: rgba( 255,255,255,.6 ); padding: .25rem .35rem;
}
.dtcw-rows textarea.dtcw-rows__in { resize: vertical; min-height: 3.4em; line-height: 1.45; }
.dtcw-rows__labelcell { width: 4.5rem; }
.dtcw-rows__wk { font-size: .8rem; font-weight: 600; color: var(--dtcw-soft); white-space: nowrap; }
.dtcw-addline {
	background: none; border: 0; cursor: pointer; font-family: inherit;
	color: var(--dtcw-accent); font-size: .82rem; padding: .35rem .1rem; margin-top: .2rem;
}
.dtcw-addline:hover { text-decoration: underline; }

/* ---- Foot / turn / buttons ----------------------------------------- */
.dtcw-spread__foot { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 0; }
.dtcw-saved { font-size: .78rem; color: var(--dtcw-done); font-style: italic; }
.dtcw-turn {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--dtcw-line);
}
.dtcw-turn button { background: none; border: 0; font-family: inherit; cursor: pointer; color: var(--dtcw-accent); font-size: .9rem; }
.dtcw-turn button[disabled] { color: var(--dtcw-line); cursor: default; }
.dtcw-turn__page { font-size: .78rem; color: var(--dtcw-soft); }

.dtcw-btn {
	display: inline-block; font-family: inherit; font-size: .9rem; cursor: pointer;
	background: var(--dtcw-accent); color: #fff; border: 1px solid var(--dtcw-accent);
	border-radius: 6px; padding: .5rem 1.1rem; text-decoration: none;
}
.dtcw-btn:hover { background: var(--dtcw-accent-2); }
.dtcw-btn--ghost { background: transparent; color: var(--dtcw-accent); }

/* ---- Lock / redeem -------------------------------------------------- */
.dtcw-lock { text-align: center; padding: 1.5rem 1rem; }
.dtcw-lock__icon { font-size: 1.8rem; margin: 0 0 .5rem; }
.dtcw-lock__text { color: var(--dtcw-soft); margin: 0 0 1rem; }
.dtcw-redeem__label { display: block; font-size: .82rem; color: var(--dtcw-soft); margin: 0 0 .5rem; }
.dtcw-redeem__row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.dtcw-redeem__input {
	font-family: inherit; font-size: 1rem; letter-spacing: .15em; text-transform: uppercase; text-align: center;
	border: 1px solid var(--dtcw-line); border-radius: 6px; padding: .5rem .8rem; background: #fff;
}
.dtcw-redeem__msg { min-height: 1.2em; font-size: .85rem; margin: .6rem 0 0; }
.dtcw-redeem__msg.is-ok { color: var(--dtcw-done); }
.dtcw-redeem__msg.is-err { color: #a4443a; }
.dtcw-note { padding: 1rem; background: var(--dtcw-paper-2); border-radius: 8px; color: var(--dtcw-soft); }
.dtcw-note--ok { color: var(--dtcw-done); }

/* ── Book-owner registration gate ─────────────────────────────── */
.dtcw--gate .dtcw-note--err { margin: 1rem auto; max-width: 420px; }
.dtcw-register {
	max-width: 420px;
	margin: 1.25rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid var(--dtcw-line);
	border-radius: 12px;
	padding: 1.5rem;
}
.dtcw-register__label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-family: var(--dtcw-head);
	font-size: 0.9rem;
	color: var(--dtcw-soft);
}
.dtcw-register__opt { font-family: var(--dtcw-body); font-weight: 400; color: #a89bbd; font-size: 0.82rem; }
.dtcw-register input[type="text"],
.dtcw-register input[type="email"],
.dtcw-register input[type="password"],
.dtcw-register input[type="date"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--dtcw-line);
	border-radius: 8px;
	font-size: 1rem;
	font-family: var(--dtcw-body);
	color: var(--dtcw-ink);
	box-sizing: border-box;
}
/* Match the height of the text fields and keep the native picker icon on-brand. */
.dtcw-register input[type="date"] { min-height: calc(1rem + 1.2rem + 2px); appearance: none; -webkit-appearance: none; }
.dtcw-register input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.dtcw-register input:focus { outline: 2px solid var(--dtcw-accent-2); outline-offset: 1px; border-color: var(--dtcw-accent-2); }
.dtcw-register .dtcw-btn { margin-top: 0.4rem; width: 100%; }
.dtcw-register__login { text-align: center; margin: 1rem auto 0; color: var(--dtcw-soft); font-size: 0.92rem; }
.dtcw-register__login a { color: var(--dtcw-accent); font-weight: 600; }
.dtcw-btn--sm { padding: .35rem .8rem; font-size: .82rem; margin-left: .5rem; }

/* ---- PAWS panel ----------------------------------------------------- */
.dtcw-paws {
	display: block;                 /* override the .dtcw two-column grid */
	background: var(--dtcw-paper);
	border: 1px solid var(--dtcw-line);
	border-radius: 10px;
	box-shadow: 0 12px 30px -20px rgba(53,44,70,.4);
	padding: 1.6rem 1.8rem;
	margin: 0 auto 1.5rem;
}
.dtcw-paws__head { margin: 0 0 1.1rem; }
.dtcw-paws__head .dtcw-page__chapter { margin: 0 0 .3rem; }
.dtcw-paws__tabs {
	display: flex; gap: .4rem;
	border-bottom: 2px solid var(--dtcw-line); margin: 0 0 1.3rem;
}
.dtcw-paws__tab {
	background: none; border: 0; cursor: pointer; font-size: .95rem;
	padding: .6rem 1.1rem; color: var(--dtcw-soft);
	border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.dtcw-paws__tab:hover { color: var(--dtcw-accent); }
.dtcw-paws__tab.is-active { color: var(--dtcw-accent); border-bottom-color: var(--dtcw-accent); }
.dtcw-paws__panel { display: none; }
.dtcw-paws__panel.is-active { display: block; }

/* ---- Top-level app tabs (Workbook / PAWS) --------------------------- */
.dtcw-app {
	--dtcw-ink: #352c46; --dtcw-soft: #6e6385; --dtcw-line: #ddd0ec;
	--dtcw-accent: #6a4c89; --dtcw-accent-2: #815ba6;
	--dtcw-head: 'Fredoka','Poppins',sans-serif; --dtcw-body: 'Poppins',sans-serif;
	font-family: var(--dtcw-body); width: 100%;
}
.dtcw-app__tabs { display: flex; gap: .5rem; margin: 0 0 1.4rem; }
.dtcw-app__tab {
	font-family: var(--dtcw-head); font-size: 1.05rem; cursor: pointer;
	background: var(--dtcw-paper-2, #ece2f7); color: var(--dtcw-soft);
	border: 1px solid var(--dtcw-line); border-bottom: 0;
	border-radius: 12px 12px 0 0; padding: .75rem 1.5rem;
}
.dtcw-app__tab:hover { color: var(--dtcw-accent); }
.dtcw-app__tab.is-active {
	background: var(--dtcw-accent); color: #fff; border-color: var(--dtcw-accent);
}
.dtcw-app__panel { display: none; }
.dtcw-app__panel.is-active { display: block; }
/* Inside the app, the PAWS panel needn't re-draw its own outer margin. */
.dtcw-app__panel .dtcw-paws { margin: 0; }

@media ( max-width: 820px ) {
	.dtcw-app__tabs { flex-wrap: wrap; }
	.dtcw-app__tab { font-size: .95rem; padding: .6rem 1rem; border-radius: 10px; }
}

/* ---- Mobile: collapse to a single page ------------------------------ */
@media ( max-width: 820px ) {
	.dtcw { grid-template-columns: 1fr; }
	.dtcw-rail { position: static; }
	.dtcw-contents { max-height: 12rem; overflow: auto; border: 1px solid var(--dtcw-line); border-radius: 8px; padding: .5rem .7rem; }
	.dtcw-page--right { grid-template-columns: 1fr; gap: 0; }
	.dtcw-entryform { grid-template-columns: 1fr; gap: 0; }
	.dtcw-entry__body { grid-template-columns: 1fr; gap: .05rem; }
	.dtcw-entry__body dt { margin-top: .3rem; }
	.dtcw-page { padding: 1.4rem 1.2rem; }
	.dtcw-tracker { grid-template-columns: repeat(6, 1fr); }
}