/* The container for the tablets */
.loom-container {
    display: flex;
    gap: 15px;
    padding: 20px;
    background-color: #d0d0d0;
    overflow-x: auto; /* Allows scrolling if you have many tablets */
}
/* The container for the woven pattern */
.pattern-container {
    display: flex;
    flex-direction: column-reverse; /* New rows appear on top */
    gap: 2px;
    margin-top: 20px;
    background-color: #f2ceb1;
    padding: 10px;
    width: max-content;
}
/* The woven row */
.pattern-row {
    display: flex;
    gap: 2px;
}
.dirs-container {
    display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	margin-top: 20px;
	background-color: #707070;
	padding: 10px;
	width: max-content;
}
.dirs-row {
    display: flex;
        padding: 0 !important;
	gap: 2px;
}
/* The stich */
.stitch {
    width: 20px;
    height: 32px;
	position: relative;
    border: 1px solid rgba(0,0,0,0.2);
	box-sizing: border-box;
}
/* S and Z slants */
.slant-S { transform: skewY(60deg); }
.slant-Z { transform: skewY(-60deg); }

#loom {
    display: flex;
    flex-direction: row;      /* Forces items to align horizontally left-to-right */
    flex-wrap: wrap;          /* Allows cards to smoothly wrap to a new row if they run out of screen space */
    gap: 5px;                /* Puts clean breathing room between each card column */
    padding: 5px;
    background: #c6a784;
    border-radius: 8px;
    margin-bottom: 5px;
    width: 100%;
    box-sizing: border-box;
}

.tablet-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.tablet-card {
    display: flex;
	flex-wrap: wrap;
	width: 74px;
	height: 74px;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
    background: #333;
    border: 2px solid #555;
    border-radius: 6px;
}
/* Z-Threading: Skews the box to lean down and left (/) */
.threading-Z {
    transform: skewX(8deg);
    border-right: 4px solid #00bcd4; /* Optional: adds a distinct right anchor edge */
    border-left: 1px solid #555;
}

/* Maintain internal circle alignment so holes don't distort into ovals */
.threading-S .hole, .threading-Z .hole {
    transform: skewX(0deg); 
}
.tablet-controls {
    display: flex;
    gap: 6px;
    width: 80%;
	align: center;
}
.tablet-controls button {
    flex: 1; /* Makes both buttons the same width */
    padding: 1px 0;
    font-size: 13px;
    cursor: pointer;
}
.tablet-card.S-slant {
    background: linear-gradient(to top right, #fff 48%, #ccc 49%, #ccc 51%, #fff 52%);
}
.tablet-card.Z-slant {
    background: linear-gradient(to top left, #fff 48%, #ccc 49%, #ccc 51%, #fff 52%);
}
.tablet-number {
		font-size: 16px;
		font-weight: bold;
		color: #555;
		margin-bottom: 2px;
}
.weaving-actions {
		display: flex;
		gap: 8px;
		align: center;
}
.weaving-actions button {
		flex: 1;
		padding: 1px 0;
		font-size: 16px;
		cursor: pointer;
		width: 80%;
}
.hole {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 4px;
    border: 1px solid #ccc;
    position: relative; /* Necessary to position the label inside */
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	transition: transform 0.1s ease;
}
.hole-label {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    /* This makes the text readable regardless of hole color */
    text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
    pointer-events: none; /* Clicking the label clicks the hole */
}
.active-hole .hole-label {
    color: black;
    font-size: 12px;
}
.hole:hover {
    transform: scale(1.10);
    border: 2px solid #777;
    z-index: 10;
}
.global-toolbar {
    background: #333;
    padding: 10px;
    display: flex;
    gap: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
	width: 100%;
}
.global-toolbar button {
    background: #555;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}
.global-toolbar button:hover {
    background: #777;
}
.global-toolbar button.danger {
    background: #a33;
    margin-left: auto; /* Push 'Clear' to the far right */
}
.rotation-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    /* Clean text stroke effect for contrast against any background yarn color */
    text-shadow: 
        1px  1px 0px #fff,
       -1px -1px 0px #fff,
        1px -1px 0px #fff,
       -1px  1px 0px #fff;
}
.tablets-group{
		display: flex;
		gap: 5px;
		background: #444;
		padding: 3px;
		border-radius: 4px;
		align-items: center;
}
.save-load-group {
    display: flex;
    gap: 5px;
    background: #444;
    padding: 3px;
    border-radius: 4px;
    align-items: center;
}
.save-load-group input, .save-load-group select {
    background: #222;
    color: white;
    border: 1px solid #555;
    padding: 5px;
    border-radius: 4px;
}
.save-load-group button {
    background: #2e7d32; /* Green for saving */
}
.save-load-group button:hover {
    background: #1b5e20;
}
.hole-painter-group {
    display: flex;
    gap: 12px;
    background: #444;
    padding: 5px 12px;
    border-radius: 4px;
    align-items: center;
    color: white;
    font-size: 13px;
    font-weight: bold;
}
.painter-title {
    color: #bbb;
    margin-right: 2px;
}
.hole-painter-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.hole-painter-group input[type="color"] {
    border: 1px solid #222;
    background: none;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%; /* Makes them cool little circular color dots */
    overflow: hidden;
}
.threading-group {
    display: flex;
    gap: 6px;
    background: #444;
    padding: 5px 12px;
    border-radius: 4px;
    align-items: center;
}
.toolbar-title {
    color: #bbb;
    font-size: 13px;
    font-weight: bold;
}
.threading-group button {
    background: #0288d1; /* Distinct blue for structural threading changes */
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}
.threading-group button:hover {
    background: #01579b;
}
/* Styling for the new idle button */
.idle-btn {
    background: #616161;
    color: white;
}
.idle-btn:hover {
    background: #424242;
}
/* When the idle state is active, turn the button a soft yellow/amber warning color */
.active-idle {
    background: #ffb300 !important;
    color: #212121 !important;
    font-weight: bold;
}
/* Visually dim the card holes so you know they won't twist next turn */
.card-is-idled {
    opacity: 0.4;
    filter: grayscale(30%);
    border: 2px dashed #ffb300 !important; /* Dashed gold border implies it is locked */
}
.direction-group {
    display: flex;
    gap: 6px;
    background: #444;
    padding: 5px 12px;
    border-radius: 4px;
    align-items: center;
}
.direction-group button {
    background: #455a64; /* Slate gray for directional controls */
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}
.direction-group button:hover {
    background: #263238;
}
/* Layout container to split the view 50/50 */
.split-pattern-container {
    display: flex;
    gap: 30px;
    width: 100%;
    margin-top: 20px;
    background: #222;
    padding: 15px;
    border-radius: 8px;
    box-sizing: border-box;
}
.pattern-pane {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
}
.pattern-pane h3 {
    color: #e0e0e0;
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Master grid alignments */
.weaving-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 1px; /* Creates clean pixel divider lines between rows */
    background: #777;
    padding: 5px;
    border-radius: 4px;
    overflow-x: auto;
}
.pattern-row {
    display: flex;
    gap: 1px; /* Creates clean divider lines between columns */
}
/* Custom design for the recipe grid layout cells */
.recipe-cell {
    border: 1px solid #444;
}
/* Clean centered display settings for recipe arrows */
.rotation-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}
.dir-F { color: #4caf50; } /* Neon/Bright Green for screen readability */
.dir-B { color: #ff5722; } /* Neon/Bright Orange for screen readability */
/* Container for the label row at the very top of the grid */
.pattern-header-row {
    display: flex;
    gap: 1px; /* Matches the stitch columns divider spacing exactly */
    background: #1a1a1a;
    padding-bottom: 4px;
    border-bottom: 2px solid #444; /* Puts a visual dividing line under numbers */
    margin-bottom: 2px;
}
/* Individual number cell block */
.column-label {
    width: 20px;       /* Matches your .stitch width exactly */
    height: 32px;      /* Slightly shorter height for text alignment */
    color: #888;       /* Subtle gray text so it doesn't distract from the design */
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 16px;
    font-family: monospace; /* Monospace fonts keep text perfectly centered */
    user-select: none;
}
/* Individual layout block for row numbers */
.row-label {
    width: 30px;          /* Slightly wider than stitches to accommodate double digits like "10", "24" */
    height: 18px;          /* Matches the height constraint of your .stitch element exactly */
    color: #ffb300;        /* Amber color makes step numbers easily distinguishable from card numbers */
    font-size: 11px;
    font-weight: bold;
    text-align: right;     /* Right-aligned text aligns beautifully against the grid wall */
    padding-right: 6px;    /* Slight breathing room before the first stitch column */
    line-height: 18px;
    font-family: monospace;
    background: #1e1e1e;   /* Soft slate back-border color */
    box-sizing: border-box;
    user-select: none;
}
/* Specific properties for the corner block intersection */
.spacer-label {
    background: transparent;
    height: 16px;          /* Matches the .column-label row height at the very top */
    border-bottom: 2px solid transparent; 
}
/* Style adjustment to frame your history controller tools */
.history-controls-group {
    display: flex;
    gap: 4px;
}
.history-controls-group button {
    background: #e91e63; /* Eye-catching crimson pink highlight for safety tools */
    color: white;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.history-controls-group button:hover {
    background: #c2185b;
}
/* Base badge layout formatting */
.twist-badge {
    display: inline-block;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    font-family: monospace;
    border-radius: 3px;
    text-align: center;
    min-width: 10px;
    user-select: none;
}

/* Neutral State: Twist balance is stable (-5 to +5 turns) */
.twist-neutral {
    background: #2e7d32; /* Soft Forest Green */
    color: #e8f5e9;
}

/* Warning State: Moderate twist build up (-6 to -11 or +6 to +11 turns) */
.twist-warning {
    background: #ef6c00; /* Deep Amber Orange */
    color: #fff3e0;
}

/* Critical State: Warp threads are under heavy strain (>= 12 turns) */
.twist-critical {
    background: #c62828; /* Warning Signal Red */
    color: #ffebee;
    animation: pulse-glow 2s infinite; /* Adds a soft visual flash */
}

/* Optional flashing animation for critical warnings */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}
/* Style it with a neutral gray or deep teal so it looks like a utility tool */
.maintenance-group button {
    background: #008080; /* Teal color for maintenance utilities */
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.maintenance-group button:hover {
    background: #004d4d;
}
/* Styling for interactive recipe cells */
.interactive-recipe {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Subtle highlight on hover */
.interactive-recipe:hover {
    background-color: #444 !important;
    border-color: #ffb300 !important; /* Gold border focus effect */
    transform: scale(1.05); /* Slight pop effect */
    z-index: 10;
}

/* Optional: Add a subtle visual cue to the text arrows */
.interactive-recipe:active .rotation-indicator {
    transform: translate(-50%, -50%) scale(0.8);
}
.print-btn {
    background: #3f51b5; /* Royal Blue for export/documentation profiles */
    color: white;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.print-btn:hover {
    background: #1a237e;
}
/* Add subtle text labels over your hole loops if they are empty */
.hole::before {
    content: attr(data-hole-name); /* If you set element.setAttribute('data-hole-name', 'A') in JS */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: bold;
    color: #000000;
    text-shadow: 0 0 2px #ffffff; /* Gives text a white outline so it reads easily over dark yarn colors */
}
footer {
		background: #333;
		color: white;
		text-align: center;
		padding: 10px;
		font-size: 11px;
}

a:link {
		color: cyan;
}

@media print {
    /* 1. Global Page Resets */
    body {
        background: #ffffff !important;
        color: #111111 !important;
        font-family: sans-serif;
        padding: 0;
        margin: 0;
    }

    /* 2. Hide ONLY UI controls, toolbars, and interaction buttons */
    .global-toolbar,
    .history-controls-group,
    .maintenance-group,
    .tablet-controls, /* Hides S/Z toggles, direction arrows, and twist badges under the cards */
    button {
        display: none !important;
    }
/* Ensure the dynamic heading is visible, high-contrast, and spaced cleanly on paper */
    .workspace-header h1#active-pattern-title {
        display: block !important;
        color: #000000 !important;
        font-size: 20px !important;
        font-weight: bold !important;
        margin-bottom: 20px !important;
        border-bottom: 3px double #111111 !important;
        padding-bottom: 5px !important;
        text-transform: uppercase;
    }

    /* 3. Format the Loom / Threading Chart for Paper */
    .printable-setup-pane {
        display: block !important;
        page-break-inside: avoid;
        margin-bottom: 30px;
    }

    .printable-setup-pane h2 {
        color: #111111 !important;
        font-size: 16px;
        border-bottom: 2px solid #111111;
        margin-bottom: 15px;
        text-transform: uppercase;
    }

    #loom {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Forces all cards onto one horizontal line across the page */
        gap: 3px !important;
		padding: 0px; !important
        background: transparent; !important
	/*	border-radius: 8px;
		margin-bottom: 25px;
		width: 100%;
		box-sizing: border-box;*/
    }
	
	.tablet-wrapper {
        width: auto !important; /* Let cards shrink slightly to fit the paper width */
    }

    /* 4. Format Individual Tablet Cards */
    .tablet-card {
        background: #ffffff !important; /* Flip card body to white background */
        border: 2px solid #111111 !important; /* Crisp black card border */
        box-shadow: none !important;
    }

    /* Maintain the structural S/Z skews on paper */
    .threading-S {
        transform: skewX(-8deg) !important;
        border-left: 4px solid #111111 !important; /* High contrast anchor border */
    }

    .threading-Z {
        transform: skewX(8deg) !important;
        border-right: 4px solid #111111 !important;
    }

    /* Ensure color holes show up as crisp circles on paper */
    .hole {
        border: 1px solid #111111 !important;
    }

    /* 5. Pattern Panes Layout (Stacking everything vertically) */
    .split-pattern-container {
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pattern-pane {
        display: block !important;
        page-break-inside: avoid;
        margin-bottom: 40px;
    }

    .pattern-pane h3 {
        color: #111111 !important;
        border-bottom: 2px solid #111111 !important;
        font-size: 14px;
    }

    .weaving-grid {
        background: #ffffff !important;
        padding: 0 !important;
        border: 1px solid #111111 !important;
    }

    .recipe-cell {
        background: #ffffff !important;
        border: 1px solid #aaaaaa !important;
    }

    .dir-F { color: #000000 !important; font-weight: bold !important; }
    .dir-B { color: #555555 !important; font-weight: normal !important; text-decoration: underline; }

    /* 6. Color Printing Enforcement */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}